我的HTML学习记录（二）
css常用标签
通用选择器
* 1、写法*{}
* 2、作用：选中页面中所有html标签
* 3、优先级最低*/
选择器命名规范
* 1、只能有字母、数字、下划线组成。
* 2.开头不能是数字。
* */
*选择器优先级
* 1、就近原则：近者优先
* 2、当作用于同一层时：可用权重计算
* 权重划分：标签选择器为1
* class选择器为10
* ID选择器为100
* 行级样式表style=""1000
* #ul .li .li2 .li{} 优先级权重121
* li .li1 .li2 .lis2{} 优先级权重31
* #ul #li li*/
标签选择器
1.写法：HTML标签名
2.作用:选中所有对应HTML标签，并修改样式
类型选择器class选择器
1、写法：.class名{}
2.调用：在需要修改样式的html标签上，使用class="选择器的名字"
3.优先级：class选择器大于标签选择器
当作用于同一层时，class选择器大于标签选择器
*/
.list{
color:blue;
}
ID选择器
1.写法：#选择器名{}
2.调用:在需要修改样式的标签上，使用id="选择器名"
3.优先级：同一层时，id选择器大于class选择器
4.id选择器是唯一的！同一页面严禁出现同名id
后代选择器
*1.写法：选择器1 选择器2 …… 选择器N{}
* 2、生效规则：选择器2必须是选择器1 的后代……以此类推
*
子代选择器
* 1、写法：选择器1>选择器2>……>选择器N{}
* 2、生效规则：选择器2必须是选择器1 的“直接子代”
交集选择器
* 1.写法：选择器1,选择器2,……选择器N{}
* 2、生效规则：必须同时满足所有选择器，才会生效。
并集选择器
* 1、写法：选择器1选择器2……选择器N{}
* 2、生效规则：满足任意一个选择器，均可生效
伪类选择器
* 1,、写法：选择器名：伪类状态
* 常见的伪类状态：
* ：link 未访问；visited 已访问
* ；hover 鼠标指上状态；active 激活选定状态
三种使用css的方式
1.行内样式表：直接在html标签中使用style=""的方式引用；
特点：将css代码与html代码完全杂糅在一起，不符合为w3c关于内容与表现分离的要求。不利于样式复用；
优先级:最高。
2.内部样式表，在<head></head>中,使用<style type="text/css"方式引用
将css代码与HTML代码分离，但是没有彻底分离css文件与html文件，不利于页面复用样式
3.外部样式表： 使用link标签链接css文件
<link rel="stylesheet" type="text/css" href="css/01.css"/>
特点：实现了css与html的彻底分离，有利于样式复用和后期维护
css常用文本属性
颜色常用单位
* 十六进制：#ffffff
* 颜色名称：red
* RGB：RGB（255,255,255）
* RGBA:第四位表示透明度。可选值0-1
*
* 尺寸属性：min-width、max-width
CSS常用文本属性
* 1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)
font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;
font-style:字体样式,正常(normal) 斜体(italic)
* font-variant：small-caps; 将字母转为小型大写字体。
(了解)font缩写形式：font-style font-variant{基本不用} font-weight font-size
line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对，用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)
2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会使本控件
透明，子控件不会发生透明度变化。
3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height
text-align:块级元素中行级元素的水平对齐方式 left center right
letter-spacing:字符间距,字与字之间的间距
text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none
overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条，
hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 如果是中文，需设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示
white-space: nowrap; 设置中文行末不断行显示
word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单
词内换行。
text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色
text-indent:首行缩进，可用像素值调整缩进大小
* text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色
