CSS之特性，背景，行高，复合选择器，显示模式

css复合选择器

css 分为 基础选择器 和 复合选择器 , 但是基础选择器不能满足实际开发中 快速高效的选择标签

• 目的是为了选择更准确更精细的目标元素标签
• 复合选择器是由两个或者多个基础选择器 , 通过不同的方式组合而成

后代选择器 ( 重点 )

父级 子级 {
  属性名: 属性值;
}
div a {
  color: #ccc;
}

• 当标签发生嵌套时 , 内层标签就成为外层标签的后代;
• 子孙后代都可以选择 , 或者说 , 它能包含任何包含在内的标签 .

子元素选择器

作用 : 子元素选择器只能选择作为某元素子元素的元素

父级>子级 {
  属性名: 属性值;
}
div>a {
  color: #ccc;
}

交集选择器

标签名.类名 {
  属性名: 属性值;
}
/* 即是div 又是nav类名 并且的关系 */
div.nav {
  color: #ccc;
}

并集选择器 ( 重点 )

应用 : 如果某些选择器定义相同的样式 , 就可以利用并集选择器 , 可以让代码更简洁

并集选择器 是各个选择器通过 , 链接而成 , 通常用于集体声明 ;

任何形式的选择器 ( 标签 class类 id等 ) , 都可以作为并集选择器的一部分 ;

标签名,
类名 {
  属性名: 属性值;
}
div,
.nav {
  color: #ccc;
}

链接伪类选择器 ( 重点 )

作用 : 用于向某些选择器添加特殊效果 , 比如给链接添加特殊效果 , 比如可以选择第一个 , 第 n 个元素 ; 因为伪类选择器很多 , 比如链接伪类 , 结构伪类

链接伪类选择器

a:link {} 未访问的链接

a:visited {} 已访问的链接

a:hover {} 鼠标移动上的链接

a:active {} 选定的链接

注意 : 书写尽量不要颠倒 lvha 的顺序 , 否则可能容易引起错误

标签的显示模式 ( 重要 )

什么是标签显示模式 ?

• 标签以什么方式进行显示 , 比如 div 自己占一行 , 比如 span 一行可以放很多个
• 作用 : 网页的标签非常多 , 在不同的地方用到不同的类型 , 以便更好的完成我们的网页 ;
• HTML 标签一般分为 块标签 和 行内标签 两种类型 , 也可以成为 块元素 和 行内元素

块级元素 ( block-level )

<!-- 常见的块级元素有 h1~h6 p div ul ol li 等 其中 div 标签是典型的块元素 -->

块级元素的特点

• 独占一行
• 高度 , 宽度 , 外边距以及内部编辑可以控制 .
• 宽度默认是容器的100%
• 是一个容器及盒子 , 里面可以放行内或者块级元素
• 注意 : 只有文字才能组成段落 因此 p 里面不能放块级元素 , 同理还有 h1~h6 dt 这些文字类块级元素里面不能放其他块级元素 .

行内元素 ( inline-level )

<!-- 常见的行内元素有 a strong b em i del s ins u span等 其中 span 标签是典型的行内元素有时候也叫内联元素 -->

行内元素的特点

• 相邻元素在一行上 , 可以在一行显示多个
• 高 , 宽直接设置是无效的
• 默认高度就是内容本身的高度
• 行内元素只能容纳文本或其他行内元素
• 注意 : 特殊情况 a 里面可以放块元素 , 但是给 a 转换一下块级模式最安全

行内块元素 ( inline-block )

<!-- 在行内元素中有几个特殊的标签 img input td 可以对他们设置宽高和对齐属性, 有些资料可能会称为行内块元素-->

行内块元素的特点

• 和相邻的行内块元素在一行内显示 , 但是之间会有缝隙 , 一行可以显示多个
• 默认宽度就是它本身的宽度
• 高度 , 行高 , 外边距 , 内边距都可以控制

标签显示模式转换 ( display )

• 块级 转 行内 : display: inline;
• 行内 转 块级 : display: block;
• 块级 , 行内 转 行内块 : display: inline-block;

行高 ( line-height ) 文字垂直居中

• 行高和高度的三种关系
  • 行高 = 上距离 + 下距离 + 文字高度
  • 行高大于高度文字会偏下
  • 行高小于高度文字会偏上
• 行高的测量
  • 汉字和英文是有 顶线 中线 基线 底线 组成 两行文字的基线之间的距离就是行高 ; 也就是说 一行汉子的地步到另一行汉子的地步 , 就是这两行文字之间的行高

CSS 背景 ( background )

背景颜色 ( background-color )

background-color: #ccc;

背景图片 ( background-image )

background-image: url('image/test.png');

背景平铺 (background-repeat)

background-repeat: repeat | no-repeat | repeat-x | repeat-y

背景位置 ( background-position ) 重点

background-position: length || length
background-position: position || position
background-position: x坐标 y坐标;
background-position: 10px 50px;

注意 :

• 必须先指定 background-image 属性
• position 后面跟 x坐标 和 y坐标 , 可以使用方位名词 , 也可以使用精确单位
• 如果只指定了一个方位名词 , 另一个默认居中
• 如果至指定一个方位名词 , 默认是 x 另一个默认是 y 居中
• 如果指定两个值 , 两个值都是方位名词 , 则两个值顺序无关 比如 left top 和 top left 效果一致
• 如果指定两个值 , 精确单位和方位名词混用 , 则第一个值是 x 第二个值是 y

背景附着 ( background-attachment )

解释 : 背景附着就是解释背景是滚动还是固定的

background-attachment: scroll | fixed

背景简写 ( background )

• background : 属性的值书写顺序没有强制要求 , 为了可读性建议
• background: 背景颜色 背景图片 背景平铺 背景滚动 背景位置
• background: #ccc url(images/image.png) no-repeat fixed center top;

背景透明 ( CSS3 )

• background: rgba(0, 0, 0, 0.2);
• 最后一个参数是 alpha 透明度 取值范围 0~1 之间
• 背景半透明是指盒子半透明 , 盒子的内容不受影响
• 低于 IE9 的版本不支持

CSS 三大特性

CSS 层叠性

• 概念 : 所谓层叠性是指多种css样式的叠加 ; 是浏览器处理冲突的方法 , 如果一个属性通过两个相同的选择器设置属性在同一个元素上 , 这个时候会有一个属性被另一个属性层叠掉 ;
• 原则 :
  • 样式冲突 , 遵循就近原则 , 哪个样式离结构近 , 就执行哪个样式
  • 样式不冲突 , 不会层叠

CSS 继承性

• 概念 : 子标签会继承父标签的一些样式 , 如字体颜色和字号 ; 想要设置一个可继承属性 , 只需要将它应用与父元素即可
• 注意 :
  • 恰当的使用继承可以简化代码 , 降低 css 的复杂性 , 比如有很多子级都需要某个样式 , 可以给父级指定一个
  • 子元素可以继承父元素的样式 , text-, font-, line-, color 这些属性都是可以继承的

CSS 优先级

• 概念 : 定义css样式的时候 , 经常出现两个或多个规则用在一个元素上 , 此时
  • 选择器相同 , 则执行层叠性
  • 选择器不同 , 就会出现优先级的问题

权重计算公式

权重叠加

我们经常用交集选择器 ， 后代选择器等 ； 是有多个基础选择器组合而成，那么此时，就是会出现权重叠加。

注意 ：

• 数位之间没有进制 ， 所以不会存在 10 个 div 能赶上一个类选择器的情况。
• 继承的权重是 0
• 如果权重相同，则会根据层叠性，就近原则；
• 2 个特殊标签 链接 和 h标题 他们浏览器有自己默认的样式 ， 继承的权重为 0 ，所以还要单独给链接和标题一个样式。