Day21——css

一、语法

选择器 { 属性名1 : 属性值1 ; 属性名2 : 属性值2 ... }

---

二、样式

• 内联样式表：将样式表写在标签的style中。 注意，这种样式表不需要写"选择器{}"，直接给属性赋值
• 内部样式表:：将样式表写在style标签中(这个标签可以放在head中，也可以放在body中)
• 外部样式表：将样式表写在一个css文件中，然后在head中通过link导入
  link标签 - 导入外部文件
  rel属性 - 导入的文件的作用, stylesheet->样式表, icon->网页图标
  type属性 - 导入的文件的类型说明, 类型/文件后缀
  href属性 - 文件路径

---

三、选择器

1. 元素选择器
   直接将标签名作为选择器。例如: div{}, p{}, a{}
2. id选择器
   将标签的id属性值前面加#作为选择器，一个页面中id值要唯一，例如: #p2{}
3. class选择器(类选择器)
   将标签的class属性值前面加.作为选择器，例如: .c1{}
4. (通配符)
   直接将作为选择器，选中当前页面中所有的标签，例如: *{}
5. 群组选择器
   将多个选择器用逗号隔开作为一个选择器，例如: a,p{}
6. 层级选择器(后代选择器)
   将多个选择器用空格隔开作为一个选择器，按层级选中最后一个选择器选中的标签，例如: div .c1{}

选择器优先级：

名称	优先级
内联样式	最高
通配符	0001(1)
元素选择器	0001(1)
class选择器	0010(2)
id选择器	0100(4)
群组选择器	分开看每个选择器的权重
后代选择器	用空格分开的所有选择器权重之和

四、伪类选择器

语法：

普通选择器 : 状态 {}

状态	功能
link	初始状态(a标签，指标签对应的地址没有成功访问过的时候)
visited	访问后的状态(一般针对a标签有效)
hover	鼠标悬停在标签上的时候对应的状态
active	鼠标按住标签不放的时候对应的状态

注：需要遵守‘爱恨’原则,'LoVeHAte'

---

五、布局

标准流	功能	标签
块级	一个占一行，默认父标签宽度和内容高度，设置宽高有效	p
行内	一行显示多个，默认为内容大小，设置宽高无效	span、a
行内块	一行显示多个，默认为内容大小，设置宽高有效	img、input

设置布局：

1. 左右结构：

display属性	功能
block	块
inline	行内
inline-block	行内块	默认左右间隙，可通过设置父标签字体大小为0来去掉
none	隐藏

2. 脱流：
   ①浮动（float）
   ②定位（left、right、top、bottom、position）
   脱流后，都按一行显示多个，默认为内容大小，设置宽高有效

①浮动

float属性	功能
left	上左对齐
right	上右对齐

• 文字环绕：被环绕的标签浮动，文字标签不浮动

• 清除浮动：清除因为浮动产生的高度塌陷
  高度塌陷： 当父标签不浮动，子标签浮动的时候，父标签就会产生高度塌陷

方法	步骤
添加空盒子	在高度会塌陷的父标签的最后添加一个空的div；然后给空的div添加样式设置clear属性的值为both
overflow	给高度会塌陷的那个父标签，添加样式设置overflow属性值为hidden
万能清除法	选中高度会塌陷的那个父标签；给after状态添加样式：display:block;clear:both;content:"";visibility:hidden;height:0; 然后再给这个父标签添加样式：zoom:1

②定位

position属性	功能
initial	定位无效（默认）
static	定位无效（默认）
absolute	绝对定位	以第一个position的值不是默认值的父标签进行定位。（注意：body标签的position不是initial和static）
relative	相对定位	相对本身在标准流中的位置进行定位
fixed	相对浏览器定位
sticky	粘性定位	当浏览器内容没有超过一屏的时候，显示在内容的最下面；当浏览器内容超过一屏bottom有效，并且显示在浏览器的底部（top和bottom有效，left和right无效）

定位属性	功能
top属性	顶部的距离
bottom属性	底部的距离
left属性	左边的距离
right属性	右边的距离

---

六、盒子模型

组成	名称	功能
content	内容	可见，标签宽高的作用域，显示文本、图像、子标签
padding	内边距	可见，默认为0，背景色同content，有四个方向
border	边框	可见，默认为0，颜色和大小都可以单独设置，有四个方向
margin	外边距	不可见，占位

border属性：
语法：

border-方向：边框宽度 边框风格 边框颜色

边框风格: solid(实线), dashed(虚线), dotted（点划线）