复合选择器

后代选择器

又称包含选择器，可以选择父元素里的子元素；

元素1 元素2 ... {样式声明}

  • 空格隔开
  • 层层查找
  • 元素一和元素二可以是任意的基础选择器；.class ul li {}
子选择器

子元素选择器选择作为某一元素的最近一级元素；亲儿子元素

元素1>元素2 {样式声明}

并集选择器

可以选择多组标签，同时定义相同的样式

并集选择器是各选择器通过逗号连接，任何选择器都可以作为并集选择器一部分

元素1,元素2 {样式声明}

伪类选择器

添加特殊效果，比如链接

用冒号(:)表示

链接伪类选择器

a:link 选择所有未访问

a:visited 选择所有以访问

a:hover 指针位于其上

a:active 选择活动链接，按下未抬起

focus伪类选择器

用于选取获得焦点的表单元素

input:focus{}

CSS元素显示模式

元素显示模式

元素以什么方式进行显示

块元素

<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

  • 独占一行
  • 高度宽度，内外边距可控
  • 容器盒子，内部可以存放块级、行内元素；文字类元素内不能使用块级元素
行内元素

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

  • 相邻行内元素在一行，一行显示多个
  • 宽高设置无效
  • 默认宽度为内容宽度
  • 行内元素容纳文本和行内元素；链接内部不能放链接，但能存放块级元素，且可转换为块级元素
行内块元素

<input>,<img>,<td>

  • 同时具有行内元素和块元素特点
  • 和相邻行内元素在一行，一行显示多个
  • 默认宽度为内容宽度
  • 高度，内外边距可控
元素显示模式转换

一个模式的元素需要另一种模式的特性

  • display:block; 行内元素转块级元素
  • display:inline; 块级元素转行内元素
  • display:inline-block; 转换为行内块元素
垂直居中

行高等于块元素高度

height = line-hight

CSS背景

背景图片

background-image: none | url() 指定背景图片

背景平铺

background-repeat: repeat | no-repeat |repeat-x |repeat-y 对背景图像进行平铺

背景图片位置

background-position: x y x坐标和y坐标

length 百分数 | 由浮点数和单位标识符组成的长度值

position top | center | bottom | left | right 方位名词

背景图像固定

background-attachment: scroll | fixed

  • scroll 背景图像是随对象内容滚动
  • fixed 背景图像固定
背景复合写法

background: 颜色 图片地址 背景平铺 图像滚动 图像位置

背景色半透明

background: rgba(0,0,0,0.3)

rgba( red , green , blue , alpha透明度)

CSS三大特性

层叠性

相同样式会覆盖

  • 样式冲突：就近原则（从上往下，类似方法重写）
  • 样式不冲突，不进行层叠
继承性

子标签会继承父标签的某些样式

  • 简化代码，降低css复杂性
  • 子元素可以继承父元素的样式（text- ,font- ,line- ,这些元素开头的可以继承，以及color属性）
行高继承性
body{
    font :12px/1.5 Microsoft YaHei
}
  • 行高可以不跟单位：1.5表当前文字大小的1.5倍
  • 子元素可以根据自己文字大小自动调整行高
优先级

当同一个元素指定多个选择器

  • 选择器相同，执行层叠性
  • 不同，根据权重执行
选择器 选择器权重
继承或者 * 0 0 0 0
元素选择器 0 0 0 1
类选择器，伪类选择器 0 0 1 0
id选择器 0 1 0 0
行内样式style=”” 1 0 0 0
!important 无穷大 
div {
 color: red!important;
}

a链接拥有浏览器默认样式

权重叠加

复合选择器会有权重叠加的问题

ul li {
 color:green;
}
li {
 color:red;
}

范围越小，权重越大

ul li的权重叠加高于li的权重，不会进位

盒子模型

盒子模型组成
  • border边框
  • content内容
  • padding内边距
  • margin外边距
边框（border）

border : border-width || border-style || border-color 边框粗细，样式，颜色

  • border-style: solid | dashed | dotted 实线，虚线，点线
边框复合写法

border : border-width | border-style | border-color 边框粗细，样式，颜色`

边框分开写法

border- top | bottom | left | right 上下左右边框

表格细线边框

border-collapse:collapse

  • collapse单词是合并的意思
  • 表示相邻边框合并
内边距（padding）

padding属性用于设置内边距，设置边框与内容之间的距离

padding- top | bottom | left | right 上下左右

padding:X px 内边距

  • 1：上下左右；
  • 2：上下，左右；
  • 3：上，左右，下；
  • 4：上，右，下，左；顺时针；