CSS

二、CSS
1.Cascading Style Sheet 层叠样式表，实现网页的排版布局以及样式美化。
2.CSS使用方式
1）行内样式
借助于style标签属性书写样式声明
常用的CSS属性：
color 设置文本颜色
background-color 设置背景颜色
font-size 设置字体大小
例：

2）文档内嵌
将CSS代码与标签相分离，嵌入在HTML文件中。借助于标签，标签内容即为CSS代码。
例：

一、选择器
1.伪类选择器（见01-link.html）
:link
:visited
:hover
:active
:focus
注意：
如果需要给超链接设置四种状态下的样式，必须按照以下顺序书写 :link :visited :hover :active
2.选择器优先级（见02-selector.html）
选择器的优先级看权重，值越大，优先级越高
标签选择器 1
类/伪类选择器 10
id选择器 100
特殊：
1）后代选择器和子代选择器的权重由各个选择器权重累加得到
例：
span{}
div h1 span{}
2）群组选择器的权重分别计算，不进行累加
3.标签分类及嵌套（见03-tagType.html、04-tags.html）
1）块元素
独占一行，不与其他元素共行；可以手动调整宽高,默认宽度跟父元素保持一致，默认高度由内容决定。例：body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,li,table,form（table尺寸由内容决定）
2）行内元素
可以与其他元素共行，不能手动调整宽高，元素尺寸由内容决定。例：span,b,strong,lable,a
3）行内块元素
可以与其他元素共行显示；可以手动调宽高。例：img,input,button
属性：vertical-align
取值：top/middle/bottom
作用：调整左右其他元素跟当前行内块元素的垂直对齐方式
4）转换元素类型
属性：display
取值：block(块)/inline(行内)/inline-block(行内块)/none(隐藏)
5）标签嵌套
1.块元素中可以嵌套添加任意类型的元素
注意：p元素只能嵌套行内或行内块元素
2.行内元素中尽量只嵌套行内或行内块元素

二、盒模型
1.尺寸单位和颜色表示（见05-size.html）
1）尺寸
px : 像素单位
% : 百分比单位，默认参照父元素相关属性值进行计算
em : 参照父元素的字体大小计算，默认1em=16px
2）颜色表示
1.英文单词
2.rgb(r,g,b)通过三原色设置颜色，每一种颜色取值0~255
例：
red rgb(255,0,0)
black rgb(0,0,0)
white rgb(255,255,255)
3.rgba(r,g,b,alpha)三原色取值0_{255，alpha表示透明度，取值0(透明)}1(不透明)
4.十六进制
以#为前缀
1）每两位为一组，代表一种三原色，需6位，每一位取值0_9,af
例：
red #ff0000 rgb(255,0,0)
2）使用三位字符表示三原色，取值0_9，af,浏览器会自动对每一位重复，扩充为长十六进制
例：
#000 #000000
#fff #ffffff
#f00
2.内容尺寸及溢出处理（见06-overflow.html）
1）盒模型由内容框，边框，内边距，外边距组成，关系到元素在文档中的实际占位，影响页面布局。
2）内容尺寸
width/height:一般用于设置内容框的尺寸
3）溢出
元素的内容超出元素的尺寸时，称为溢出。默认溢出部分仍然可见，但是会影响文档中正常元素的显示。
属性：overflow
取值：
visible(默认可见)
hidden(隐藏)
scroll(强制添加水平和垂直的滚动条)
auto(自动在发生溢出的方向添加可用的滚动条)
3.边框（见07-border.html）
1）边框实现
属性:border
取值:width style color;
使用:
1.边框样式必填
2.样式分为：
solid 实线边框（重点）
dashed 虚线边框
dotted 点线边框
double 双线边框
2）单边框实现
属性：
border-top 上边框
border-bottom 下边框
border-left 左边框
border-right 右边框
取值：width style color;
3）网页三角标制作
1.设置元素尺寸为0
2.统一设置四个方向透明边框
3.单独调整可见色
4）圆角边框
属性：border-radius 指定圆角半径
取值：像素值或百分比
取值规律：
一个值 表示统一设置上右下左
四个值 表示分别设置上右下左
两个值 表示分别设置上下 左右
三个值 表示分别设置上右下，左右保持一致
5）轮廓线
属性：outline
取值：width style color
区别：边框实际占位，轮廓不占位
特殊：取none可以取消文本输入框默认轮廓线
6）盒阴影
属性：box-shadow
取值：offsetX offsetY blur (spread) color;
使用：
不管是浏览器窗口还是元素自身都可以构建坐标系，统一以左上角为原点，向右向下为X轴和Y轴的正方向
offsetX 取像素值，阴影的水平偏移距离
offsetY 取像素值，阴影的垂直偏移距离
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影是否需要延伸
color 设置阴影颜色
3. 内边距
属性：padding
作用：调整元素内容框与边框之间的距离
取值：
20px;
20px 30px;
20px 30px 40px;
20px 30px 40px 50px;
单方向内边距,只能取一个值：
padding-top
padding-right
padding-bottom
padding-left
4. 外边距
属性：margin
作用：调整元素与元素之间的距离
特殊：
1）margin:0; 取消默认外边距
2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
3）margin:-10px;元素位置的微调
单方向外边距：只取一个值
margin-top
margin-right
margin-bottom
margin-left
外边距合并：
1）垂直方向
1. 子元素的margin-top作用于父元素上
解决：
为父元素添加顶部边框；
或为父元素设置padding-top:0.1px;
2. 元素之间同时设置垂直方向的外边距，最终取较大的值
2）水平方向
块元素对盒模型相关属性（width,height,padding,border,margin）完全支持;
行内元素对盒模型相关属性不完全支持，不支持width/height,不支持上下边距
行内元素水平方向上的外边距会叠加显示
带有默认边距的元素：
body,h1,h2,h3,h4,h5,h6,p,ul,ol{
margin:0;
padding:0;
list-style:none;
}
5. 元素最终尺寸的计算
盒模型相关的属性会影响元素在文档中的实际占位，进而影响布局
属性：box-sizing
取值：content-box/border-box
1）标准盒模型计算：各个属性值累加得到最终尺寸
box-sizing:content-box;
元素设置width/height指定的是内容框的大小
最终尺寸 = width/height+padding+border+margin
2）特殊盒模型计算（按钮元素）：
box-sizing:border-box;
元素设置width/height指定的是包含边框在内的区域大小
最终尺寸 = width/height+margin