CSS笔记
内嵌样式:
借助于style标签，在HTML文档中嵌入CSS样式代码，可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式。
<style> 选择器{ 属性:值; 属性:值; } </style>
外链样式表：
创建外部样式表文件 后缀使用.css
在HTML文件中使用<link>标签引入外部样式表
<link rel="stylesheet" href="URL" type="text/css">
常用CSS属性 :
设置文本颜色 color:red;
设置背景颜色 background-color:green;
设置字体大小 font-size:32px;
选择器
1.标签选择器：h1{}
1.id选择器：#id属性值{}
2.类选择器：.class属性值{}
3.群组选择器：h1,h2,h3{}
4.后代选择器：selector1 selector2{} 匹配selector1中所有满足selector2的后代元素
5.子代选择器：selector1>selector2{} 匹配满足选择器的所有直接子元素
6.伪类选择器：为元素的不同状态分别设置样式,必须与基础选择器结合使用
:link 超链接访问前的状态 a:link{}
:visited 超链接访问后的状态 a:visited{}
:hover 鼠标滑过时的状态 .c1:hover{ } 常用
:active 鼠标点按不抬起时的状态(激活)
:focus 焦点状态(文本框被编辑时就称为获取焦点)
标签分类及嵌套
1.块元素：独占一行,不与元素共行;可以手动设置宽高,默认宽度与父元素保持一致
例：body div h1~h6 p ul ol li form, table(默认尺寸由内容决定)
2.行内元素：可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例 : span label b strong i s u sub sup a
3.行内块元素：可以与其他元素共行显示,又能手动调整宽高
例 : img input button (表单控件)
4.嵌套原则
块元素中可以嵌套任意类型的元素
p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
行内元素中最好只嵌套行内或行内块元素
总结：块元素独占一行，可以设置高度
行内元素可与其他共行，不能设置高度
行内块元素可同行可改高度
转换元素的类型
display取值：block(块元素)
inline(行内元素)
inline-block(行内块元素)
none(隐藏)
边框：border :10px style color;
style:
solid:实线边框
dotted:点线边框
dashed:虚线边框
double:双线边框
border-top 设置上边框
border-bottom 设置下边框
border-left 设置左边框
border-right 设置右边框
border-radius 指定圆角半径
outline :width style color 轮廓线
box-shadow：offsetX offsetY blur (spread) color;盒阴影
offsetX 取像素值，阴影的水平偏移距离
offsetY 取像素值，阴影的垂直偏移距离
blur 取像素值，表示阴影的模糊程度，值越大越模糊
spread 选填，取像素值，阴影是否需要延伸
color 设置阴影颜色,默认为黑色
例句：box-shadow:20px 10px 5px 3px red;
内边距：padding:调整元素内容框与边框之间的距离(上右下左)
padding-top
padding-right
padding-bottom
padding-left
外边距：margin:调整元素与元素之间的距离
1）margin:0; 取消默认外边距
2）margin:0 auto;左右自动外边距，实现元素在父元素范围内水平居中
3）margin:-10px;元素位置的微调
margin-top
margin-right
margin-bottom
margin-left
元素最终尺寸的计算: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
text-align:center;//文字水平居中
vertical-align:top;/*底部对齐*/
line-height:30px;//行高与元素高度保持一次，实现一行文本的垂直居中效果
display:inline-block;/*换行成行内块*/
text-decoration:none;/*去下划线*/
浮动布局：
float:left/right;(重点)
设置元素向左浮动或向右浮动
定位布局：
postion:relative/absolute/fixed（重点）
属性position：可取relative（相对定位）/absolute（绝对定位）/fixed（固定定位）
top 距参照物的顶部
right 距参照物的右侧
bottom 距参照物的底部
left 距参照物的左侧
堆叠次序:
z-index:元素发生堆叠时可以使用 z-index 属性调整已定位元素的显示位置，值越大元素越靠上
1. 定位元素与文档中正常元素发生堆叠，永远是已定位元素在上
2. 同为已定位元素发生堆叠，按照 HTML 代码的书写顺序，后来者居上
背景属性：
background-image : url("路径");设置背景图片，指定图片路径，如果路径中出现中文或空格，需要加引号
background-size:width height;设置背景图片的尺寸
background-repeat:repeat/repeat-x/repeat-y/no-repeat
默认背景图片从元素的左上角显示，如果图片尺寸与元素尺寸不匹配时，会出现以下情况：
1. 如果元素尺寸大于图片尺寸，会自动重复平铺，直至铺满整个元素
2. 如果元素尺寸小于图片尺寸，图片默认从元素左上角开始显示，超出部分不可见
取值 ：
repeat 默认值，沿水平和垂直方向重复平铺
repeat-x 沿X轴重复平铺
repeat-y 沿Y轴重复平铺
no-repeat 不重复平铺
精灵图技术 ：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于**background-position**进行背景图片位置的调整，实现显示不同的图标。
文本属性：
设置字体大小font-size:20px;
设置字体粗细程度font-weight:normal;
1. normal（默认值）等价于400
2. bold (加粗) 等价于700
设置斜体font-style:italic;
设置字体名称font-family:Arial,"黑体";
字体属性简写1 font : style weight size family;
例句：font : italic 700 32px "黑体";
文本颜色color:red;
文本装饰线 text-decoration:none;
取值 :
underline 下划线 text-decoration:underline
overline 上划线 text-decoration:overline
line-through 删除线 text-decoration:line-through
none 取消装饰线text-decoration:none
文本内容的水平对齐方式 text-align:center;
取值：
left(默认值) 左对齐
center 居中对齐 text-align:center;
right 右对齐 text-align:right;
justify 两端对齐 text-align:justify;
行高 line-height:30px; 文本在当前行中永远垂直居中,可以借助行高调整文本在元素中的垂直显示位置
font属性简写2 font : size/line-height family;
例句：font : 32px/5 "黑体";
字体属性简写1 font : style weight size family;
例句：font : italic 700 32px "黑体";
