标签：

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 参数 感化
repeat   默认 , 配景图片在纵向和横向平铺显示  
no-repeat   不服铺  
repeat-x   x轴 横向平铺  
repeat-y   y轴 纵向平铺  
配景位置 ( background-position ) 重点 background-position: length || length background-position: position || position background-position: x坐标 y坐标; background-position: 10px 50px; 参数 值
length   百分数 | 浮点数和单位标识符构成的长度值  
position   top | bottom | left | right | center 方位名词  

注意 :

必需先指定 background-image 属性

position 后面跟 x坐标 和 y坐标 , 可以使用方位名词 , 也可以使用精确单位

如果只指定了一个方位名词 , 另一个默认居中

如果至指定一个方位名词 , 默认是 x 另一个默认是 y 居中

如果指定两个值 , 两个值都是方位名词 , 则两个值挨次无关 好比 left top 和 top left 效果一致

如果指定两个值 , 精确单位和方位名词混用 , 则第一个值是 x 第二个值是 y

配景附着 ( background-attachment )