CSS简单学习

什么HTML : 超文本标记语言

p标签: 段落标签

br标签: 简单换行

h1-h6: 标题标签

hr标签: 水平分割线, 华丽的分割线

font标签: color属性改变颜色 , size

b标签: 加粗

i标签: 斜体

strong标签: 带语义的加粗

em标签: 斜体标签,带语义

img标签: 图片标签 显示图片

​ src: 指定图片路径(相对路径)

​ width: 宽度

​ height: 高度

​ alt: 图片加载失败时的提示

相对路径:

​ ./ 代表当前路径

​ …/ 代表的是上一级路径

​ …/…/ 代表的是上上一级路径

ul标签: 无序列表

ol标签: 有序列表

li标签: 列表项

a标签: 超链接标签:

​ target: 打开方式

​ href: 指定要跳转的链接地址

table标签: table > tr > td

tr标签: 行

td标签: 列

网站注册案例:

​ form 标签: 表单标签,主要是用来向服务器提交数据

​ method: 提交方式 get post

​ action : 提交的路径

​ input 标签:

​ type:

​ password: 密码框

​ text : 文本

​ submit: 提交

​ button: 普通的按钮

​ reset: 重置按钮

​ radio: 单选按钮 设置name属性让它们是一组

​ checkbox: 复选按钮

​ email:

​ date:

​ tel:

frameset : 框架标签

​ rows:

​ cols:

frame:

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2.  采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

技术分析

HTML的块标签:

​ div标签: 默认占一行,自动换行

​ span标签: 内容显示在同一行

css主要用作用:

​ 用来美化我们的HTML页面的

​ HTML 决定网页的骨架 ,CSS 化妆

​ 将页面的HTML和美化进行分离

CSS的简单语法:

​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{
    属性名称:属性的值;
    属性名称2: 属性的值2;
  }
</style>

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

示例：div 测试：span

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

ID选择器:

以#号开头  ID在整个页面中必须是唯一的  否则只找第一个id
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

类选择器:

以 . 开头 
.类的名称{
   属性名称:属性的值;
  	属性名称:属性的值;
}

CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

浮动(float)

普通流(normal flow)

这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。

前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

html语言当中另外一个相当重要的概念----------标准流！或者普通流。普通流实际上就是一个网页内标签元素正常从上到下，从左到右排列顺序的意思，比如块级元素会独占一行，行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。

后来，我们发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了。（CSS3已经我们真正意义上的网页布局，具体CSS3我们会详细解释）

什么是浮动？

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动，其基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

			float属性:
				left
				right
			
			clear属性: 清除浮动
				both : 两边都不允许浮动
				left: 左边不允许浮动
				right : 右边不允许浮动
			流式布局

步骤分析:

1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接

扩展:

• CSS的优先级

  按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

  就近原则: 哪个离得近,就选用哪个的样式

  CSS: 层叠样式表

  主要作用:

1. 美化页面
2. 将页面美化和HTML代码进行分离,提高代码的服用型

• 选择器:

  • 元素选择器: 标签的名称{}
  • 类选择器: 以. 开头 .类的名称
  • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

• CSS浮动:

  • float : left, right 不再占有正常文档流中的空间 , 流式布局

  • clear : both left right

• CSS中的其它选择器

  • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

  • 属性选择器:

    a[title]
    a[titile='aaa']
    a[href][title]
    a[href][title='aaa']
    

  • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

  • 子元素选择器: 父选择器 > 儿子选择器

  • 伪类选择器: 通常都是用在A标签上

CSS的盒子模型: 万物皆盒子

CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置

CSS部分的回顾:

​ CSS: 层叠样式表.

​ CSS作用: 美化页面,提高代码的复用性

​ 选择器:

​ 需要掌握的:

​ 元素选择器: 标签的名称

​ 类选择器: 以 . 开头

​ ID选择器: 以#开头, #ID的名称 ID必须是唯一的

​ 优先级: 按照选择精确度: 行内样式 > ID选择器 > 类选择器 > 元素选择器

​ 就近原则

​ 扩展选择器:

​ 选择器分组: 选择器1,选择器2 以逗号隔开

​ 后代选择器: 爷爷 孙子 中间以空格隔开

​ 子元素选择器: 爸爸 > 儿子

​ 属性选择器: 选择器[属性的名称=’’]

​ 伪类选择器: 超链接标签上使用

​ 浮动: float属性 left right

​ 清除浮动: clear: both left right

​

​ 绝对定位:

​ position: absolute

​ top:

​ left:

来源：https://blog.csdn.net/zhangnan456/article/details/99233771