CSS 样式表｛二｝

1 选择器的优先级

　　选择器的优先主要考虑选择器的权重

　　可以将各种选择器的权重以数值来表示，数值越大，优先级越高

　　

选择器	权重值
标签selector	1
类选择器	10
ID选择器	100
行内样式	1000

　　复杂选择器优先级的计算：

　　　　1 群组选择器不参与计算

　　　　后代和子代选择器，各种选择器权值

　　　　2 伪类选择器的权值与类选择器保持一致，都是10

　　2 尺寸单位

　　　1  。px ：像素单位，浏览器默认单位

　　　2  %：百分比，参照父元素对应属性的值计算

　　    3 in : inch 英寸 换算： 1 inch = 2.54cm

　　　4 pt :磅 ，1 pt = 1/72 in

　　  5   cm

　　　6  mm

　　　补充：

　　　7 em:默认情况下，字体大小为16px, 1 em =16px

　　3 颜色取值

　　　　1 英文单词

　　　　2 rgb()表示法：

　　　　　　根据红绿蓝三原色组合呈现不同的颜色

　　　　　每个值取值范围 0~255

　　　　3 rgba(r,g,b,alpha)表示法

　　　　　　rgb三原色取值范围 0~255

　　　　　　alpha透明度取值范围0 （透明）-1（不透明）

　　　　4 颜色的十六进制表示法

　　　　　　把三原色的十进制范围 0~255 转换成十六进制表示

　　　　　　十六进制的取值范围：0-9 a-f

　　　　　　　0-255 换算成十六进制 00-ff

　　　　　　　　语法：#开头，跟 上 6位的十六进制，每两位为一组表示一种三原色

　　　　5 短十六进制表示颜色

　　　　　　# 开头，采用三位十六进制代表三原色

　　　　　　浏览器在解析时，会自动会对每一位进行重复，补全成长十六进制

　　3 HTML 标签分类

　　　　1 块级元素：

　　　　　　特点：

　　　　　　　　1 独占一行，不与其他元素共行

　　　　　　　　2 可以手动调整宽度

　　　　　　　　3 默认情况下，块元素的宽度与父元素保持一致

　　　　　　常见块元素：body h1-h6 div ul ol li table form p

　　　　2  行内元素：

　　　　　　特点：

　　　　　　　　1 可以与其他元素共行显示

　　　　　　　　2 不可以手动调整宽高大小

　　　　　　　　3 实际大小由元素的内容多少决定

　　　　　　常见行内元素： span label i b s a sup sub strong

　　　　3 行内块元素：

　　　　　　特点：

　　　　　　　　1 可以共行显示

　　　　　　　　2 可以手动调整宽高

　　　　　　 常见的行内块元素  img input button

尺寸与边框

　　1 尺寸

　　　　1 属性：

　　　　　　width height 分别设置元素的宽高大小

　　　　　　取值：像素值或是百分比

　　　　　　注意：块元素和行内块元素可以设置宽高属性

　　　　2 溢出处理

　　　　　　溢出处理，内容超出元素尺寸范围，称为内容溢出,默认情况下，溢出部分仍然可见

　　　　  属性：overflow 可以处理内容溢出

　　　　　　取值：

　　　　　　　　1 visible 默认值，溢出部分仍然可见.　　

　　　　　　　　2 scroll 添加滚动条,包含水平和垂直方向，不管该方向有没有发生内容溢出，都显示滚动条

　　　　　　　　3 auto 自动添加滚动条

　　　　　　　　4 hidden  隐藏溢出部分

　　2 边框

　　　　1 边框实现：

　　　　　　属性：border

　　　　　　取值：border-width  border-style border-color

　　　　　　边框宽度，样式，颜色，三个值缺一不可（即使有些值是默认的）

　　　　　　　　border-width :取像素值，设置四个方向边框宽度

　　　　　　　　border-style :边框样式

　　　　　　　　　　取值：

　　　　　　　　　　　　solid 实线边框

　　　　　　　　　　　　dashed 虚线边框

　　　　　　　　　　　　dotted 点线边框

　　　　　　　　　　　　doule  双线边框

　　　　　　　　border-color ;设置边框颜色，取颜色值

　　　　　　注意 ：

　　　　　　　　1 使用border 属性为元素设置边框，是同时设置 上 右 下 左 四个方向的边框

　　　　　　　　2 取消默认边框，border : none；常用于按钮

　　2 单边边框的设置

　　　　属性：

　　　　　　1 border-top :设置顶部边框

　　　　　　2 border-right :设置右边边框

　　　　　　3 border-bottom :设置底部边框

　　　　　　4 border-left :设置左边边框

　　　　　　取 值：border-width   border-style boder-color

　　3 网页三角标制作：

　　　　1 设置空的块元素，宽度为0

　　　　2 为元素设置等宽的边框

　　　　3 调整边框颜色，显示一个方向的边框，其余边框设置透明边框颜色 transparent

　　　　　注意：四个方向的边框缺一不可，缺少的话，边框会恢复成矩形边框，不再是三角形

　　4 轮廓线

　　　　属性：outline

　　　　取值：width style color

　　　　注意：轮廓线围绕在元素内容区域四周，与边框类似，但有区别：轮廓线在网页中不占位，边框在网页中是实际占位的

　　　　取消轮廓线：outline:none ;

　　5 圆角边框

　　　　1 属性：border-radius

　　　　2 取值：像素值或者百分比

　　　　　　1  border-radius:20px

　　　　　　　　一个值表示四个角都以20px 做圆角

　　　　　　2 border-radius:20px 40px

　　　　　　　　取两个值，按照上右下左顺时针方向设置圆角，从左上角开始，依次取值，在给两个值的情况下，上下保持一致，左右保持一致

　　　　　　3 border-radius: 10px  20px 30px ; 三个值，左右角一致，对应的角值是一致

　　　  3 百分比取值实现元素形状改变

　　　　　　border-radius;50%;　　

　　　　　　注意：使用百分比设置圆角边框时，是参照当前元素的尺寸进行计算的

　　　　　　　　如果元素本身是长方形，设置50%的圆角会变成椭圆

　　　　　　　　如果元素本身是正方形，会变成正圆

　　6 盒阴影

　　　　属性：box-shadow

　　　　取值：

　　　　　　offset-x  阴影的水平偏移距离，取像素值

　　　　　　offset-y 阴影的垂直偏移距离，取像素值

　　　　　　blur 　阴影的模糊程序，取像素值，值越在越模糊

　　　　　　spread  阴影的延伸距离（可选），取像素值，可以扩大阴影的范围

　　　　　　color 设置阴影颜色（默认为黑色）

　　　　注意：不管是浏览器窗口中还是元素本身，都存在坐标系，都以左上角为（0，0）点，向右，向下代表x 和y 轴的正方向

5 盒模型（框模型）

　　1 在css中。认为一切元素都是框，都是矩形区域

　　　  盒模型：计算元素在文档中的实际占位情况

　　　　副模型组成：margin(外边距) border

　　　　　　　　　　padding(内边距) content(元素的宽高尺寸)

　　　　元素在文档中实际尺寸的计算：

　　　　　　默认情况下：

　　　　　　最终宽度 = 左右外边距+ 左右边框宽度+左右内边距+width

　　　　　　最终高度 = 上下外边距 + 上下边框 + 上下内边距 + height

　　　2 margin

　　　　1 margin表示外边距：元素边框与其他元素边框之间的距离

　　　　2 取值：像素值

　　　　　　1 .margin :10px

　　　　　　　　表示设置上右下左四个方向都为10px的外边距

　　　　　　2 margin:10px 20px

　　　　　　　　表示设置上下外边距为10px，左右外边距为20px;

　　　　　　3 margin:10px 20px 30px;

　　　　　　　　表示上右下左四个方向上的外边距分别为：

　　　　　　　　　　10 20 30 20

　　　　　　4 margin: 10px 20px 30px 40px;

　　　　　　　　分别设置四个方向的边距值

　　　3 单方向外边距的设置

　　　　1 属性：

　　　　　　1 margin-top:上方外边距

　　　　　　2 margin-right:右边的外边距

　　　　　　3 margin-bottom: 底部外边距

　　　　　　4 margin-left:左边外边距

　　　　2 取值：像素值

　　　　　　只给当前方向设置外边距，给一个值

　　4 特殊取值：

　　　　1 。margin:0; 设置元素外边距为0 ，常用于初始化页面样式，取消一些元素的默认外边距

　　　　2 。margin:0 auto;设置左右外边距自动，用来实现元素的居中效果。auto只对左右外边距起作用

　　　　3 。取负值：

　　　　　　会移动元素的位置，负值表示向上向左移动元素，常用于页面元素位置的微调

　　5 自带默认外边距的元素：

　　　　body h1-h6 p ul ol