课堂笔记之CSS相关杂记
在课堂中随手记录了一些笔记，仅限于自己复习整理用途，如有看到这篇随笔的同行，欢迎补充
w3c要求html和css是分离的。
html的css分离，css不再影响html的代码阅读。css的复用性高。
html和css分离以后，需要通过css选择器进行关联。
选择器的使用 ID
/*
id选择器：#ID名称
*/
类选择器
/*
通过类添加的样式要比通过元素添加的样式优先级高
类选择器：.类名称
*/
元素选择器
/*
元素选择器: 直接写元素名称
元素选择器会选中当前页面的所有匹配元素。
*/
后代和子代选择器
/*
后代选中器： 空格 范围大
子代选择器： > 范围小
*/
补充（样式继承）
/*
某些css样式会被子代甚至后代继承
有些属性则不会，比如height属性。
*/
并集选择器
/*并集选择器：用,分隔！*/
通用选择器
/*通配符选器:匹配当前页面的所有元素*/
伪类（伪元素）选择器
/*伪类选择器：用：来使用伪类选择器*/
例:
li:nth-child(3n){
color: red;
}
外部样式 用link标签关联
例：
<link rel="stylesheet" href="../../css/first.css">
在正常的引入顺序下（先引入外部的，再写内部的）。
优先级（就近原则）顺序为：
行内样式 > 内部样式 > 外部样式
/*!important 通过标记使优先权最高*/
li{
color: yellow !important;
}
在CSS设置宽高时
<div id="div">div>
<p id="p">杰瑞教育p>
文本样式
#text{
color: red;/*字体颜色*/
opacity: 0.8;/*1：不透明，0：全透明*/
font-style: italic;/*字体样式*/
font-weight: bold;/*字体粗细*/
font-size: 40px; /*字体大小*/
line-height: 60px;/*字体行高*/
font-family: 宋体 微软雅黑 sans-serif;/*字体系列*/
/*复合属性（顺序！！）：等效于前五个属性（复合属性效率高）*/
font: italic bold 40px/1.5 宋体 微软雅黑 sans-serif;
}
文本样式
#text{
height: 30px;
background-color: red;
text-align: center;/*文本水平对齐方式*/
line-height: 30px;/*行高，通常用来设置文本垂直方向的对齐方式*/
letter-spacing: 10px;/*文本间距*/
/*
overline：上划线
line-through：中划线
underline：下划线
*/
text-decoration: underline;/*文本修饰*/
/*
wavy：波浪线
dashed：间隔线
dotted：点状线
solid：单实线
double：双实线
*/
text-decoration-style: solid;/*文本修饰的样式*/
text-decoration-color: #FF6600;/*文本修饰的颜色*/
text-indent: 2em;/*文本缩进*/
}
文本单行显示：
white-space: nowrap;/*文本换行的处理。不折行*/
overflow: hidden;/*溢出部分的处理。隐藏*/
text-overflow: ellipsis;/*溢出文本的处理。显示省略号*/
文本阴影
#p{
font-size: 100px;
font-weight: bold;
color: red;
/*
text-shadow：x轴的偏移量 Y轴的偏移量 模糊程度 阴影的颜色
*/
/*text-shadow: 0px 8px 5px black;*/
/*text-stroke:文本描边的宽度 文本描边的颜色*/
-webkit-text-stroke: 2px yellow;
}
背景相关样式
#div{
height: 300px;
/*背景颜色*/
background-color: red;
/*背景图片（优先级高于背景颜色）*/
background-image: url("../../img/f3_Android1.png");
/*背景图片的遍历方式
no-repeat：不重复
repeat-x：X轴遍历
repeat-y：Y轴遍历
*/
background-repeat: no-repeat;
/*
background-size:背景图片的大小
contain：
图片的宽高比例不变，直到较小的方向填满，才停止缩放
图片永远不可能溢出
cover：
图片的宽高比例不变，直到较大的方向填满，才停止缩放
图片基本上都会溢出
固定的大小：x轴的宽度 y轴的高度
百分的大小（用的较多）：X轴的宽度百分百 y轴高度的百分比
*/
background-size: 50% 50%;
/*复合属性 图片地址 遍历方式*/
background: url("../../img/TIM20180723155817.png") no-repeat;
}
超链接的状态
a:link{
color: black;
}
a:visited{
color: darkgray;
}
a:hover{
color: yellow;
}
a:active{
color: red;
}
以上设置必须按顺序设置