CSS（美颜，化妆术，美容师）
<!-- 1. CSS定义 -->
格式 ：
选择器{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
特点 ：
1、(选择器区分大小写) css中的空格不被解析
2、**多个属性**之间必须用英文分号隔开，最后一个属性的分号可省略，但最好加上
3、如果属性的值由**多个单词**组成且中间包含**空格**的，则必须为这个属性值加上**英文引号**
<!-- 2. 添加CSS（引入CSS样式表） -->
可以选择代码外的css源，也可以直接在网页内用<style></style>直接添加，在DW右侧添加 源，媒体，选择器
CSS中的<style >及其属性可以写在<head>头内，也可以直接写在你想修饰的标签内
<!-- 1. 行内式(行内样式表) -->
<标记名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3; ">内容</标记名>
任何 HTML 的标记 都拥有 style属性，只修改它所对应的标记和其子标记起作用
<!-- 2. 内嵌式(头部样式表) -->最好写在<title>之后
<head>
*<style type="text/css">
选择器{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
<!-- 3. 链入式(外部样式表) -->
直接写在外部，重新创建一个CSS样式表
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
**如果使用了多种方法，按就近原则来选择**
<!-- 2. CSS的基础选择器（7种） -->
<!-- 1. 标记选择器 -->（对某元素全部添加）
标记名{
属性1:属性值1;属性2:属性值2;属性3:属性值3;} （HTML上的任何标记名都可以）
ps:
<style type="text/css">
p{
font-size:12px; 段落标记 字号12px，字体雅黑，颜色#666
color:#666;
font-family:"微软雅黑";
}
</style>
<body>
<p>我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>
</body>
<!-- 2. 类选择器（class选择器） -->（对某元素精准单独添加）
**.类名**{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
（类名即HTML元素中的class属性值，大多数HTML都有**class属性**，类选择器可以为元素对象定义单独或相同的格式）
ps:
<style type="text/css">
.colorblue{
颜色为蓝色
color:#00F;
}
</style>
<body>
<p class="colorblue">我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>
</body>
<!-- 3. id选择器 --> （精准修饰指定元素）
**#id名**{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
（id名即为HTML元素的id属性值，**元素的id值是唯一的**，只能对应于文档中的某一个具体的元素）
ps:
<style type="text/css">
#font18{ 颜色为蓝色
font-size:18px;
}
</style>
<body>
<p id="font18" >我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落我是一个段落</p>
</body>
<!-- 4. 通配符选择器 --> （可以匹配页面中的所有元素） (一般网页都会使用)
*{
属性1:属性值1;属性2:属性值2;属性3:属性值3;}
ps:
<style type="text/css">
*{
margin:0px;
padding:0px;
}
</style>
<!-- 5. 标签指定式选择器(交集选择器) -->
（有**两个选择器构成**，一个是标记选择器，另一个是class选择器或id选择器，两个选择器之间**不能有空格**）
ps:
<style type="text/css">
h3.special{
**（必须同时满足两个选择器的要求才能显示效果）**
font-size:28px;
}
</style>
<body>
<h3 class="special">我是3级标题</h3> (效果出现)
<h2 class="special">我是3级标题</h2> (无效果展示)
<h3>我是3级标题的参照</h3> (无效果显示)
</body>
<!-- 6. 后代选择器 --> ！！！！！！！！！！比较常用
后代选择器用来选择元素或者元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。当标记发生嵌套时，内层标记就成为外层标记的后代。
ps :
<style type="text/css">
table tr td p{
（中间的两个元素标记可以不写）
color=#00F;
font-size:28px;
}
</style>
<body>
<table>
<tr>
<td><p>我是一个段落</p></td> （变色，字体变大）
</tr>
</table>
</body>
<!-- 7. 并集选择器 -->
并集选择器是各个选择器通过**逗号**连接而成的,任何形式的选择器(包括标记选择器、 class类选择器、jd选择器等),都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同,或部分相同,就可以利用并集选择器为他们定义相同的CSS样式
ps :
body, .top-nav, .top-nav dl, .top-nav dt, .top-nav dd, .top-nav ul, .top-nav ol, .top-nav li, .top-nav p, .top-nav form, .top-nav input, .top-nav textarea {
margin: 0;
padding: 0;
}
<!-- 8. 选择器优先级 -->
就近原则基础上，匹配原则（在就近原则的基础上，我能对上哪个就用哪个）
（1）标记选择器
（2）类选择器
（3）id选择器
<!-- . -->
其他的可以去菜鸟教程上看
字体样式相关的CSS属性
<!-- 1. 字体样式属性 -->
font-size: 字号大小;
font-family: 字体;(如果浏览器没有这种字体的胡可以选择多种字体,英文逗号隔开) body{
font-family:"华文彩云","宋体","黑体";}
font-weight: 字体粗细;
font-style: 字体风格;（斜体等）
综合字体样式，可以将多个字体样式属性合成一个写，熟练的编程者可以使用
@font-face: 定义服务器字体;（初学者了解）
word-wrap: 用于实现长单词和URL地址的自动换行
<!-- 2. 文本外观属性 -->
color: 颜色;
letter-spacing: 字间距px;
word-spacing: **英语单词**间距px; （对汉字无效）
line-height: 行间距px;
text-transtorm: 文本转换;{
(用于控制**英文**字符的大小写)
none 不转换（默认值）
capitalize 首字母大写
uppercase 全部字符转换为大写
lowercase 全部字符转换为小写
}
text-decoration: 文本修饰:{
none 无修饰
underline 下划线 （超链接用的多）
overline 上划线
line-through 删除线
}
text-align: 水平对齐方式; {
left 左对齐（默认）
right 右对齐
center 居中
}
text-indent: 首行缩进（2em）; （建议使用em作为设置单位）
white-space: 空白符处理; {
（无论有多少空格，在浏览器中只显示一个字符的空白）
normal 文本中空格空行无效，满行后自动会和
pre 保留空格，空白，原样显示
nowrap 强制不换行，除非遇到换行标记<br/>,内容超出边界自动增加滚动条 （CSDN中的代码）
}
text-shadow: 阴影效果; {
（为文本添加阴影效果）
ps : 选择器{
text-shadow:h-shadow v-shadow blur color;}
text-shadow:10px 5px 8px #FFF00;
h-shadow 水平阴影距离
v-shadow 垂直阴影距离
blur 设置模糊半径
color 设置阴影颜色
}
text-overflow: 表示对象内溢出文本的表示方式
更具体的看菜鸟课程
<!-- . -->
CSS层叠性，继承性及优先级
<!-- 1. 层叠性 -->
css中的多个属性会出现叠加，在不同位置出现了多个不冲突的效果时，会叠加效果
<!-- 2. 继承性 -->
子标记会继承父标记的某些属性（颜色，字号等）
以下属性例外：
边框，外边框，内边框，背景，定位，布局，元素宽高元素 等
<!-- 3. 优先级 -->
标记选择器 权重为 1
class选择器 权重为 10
id选择器 权重为 100
继承样式 权重为 0
行内样式表优先 权重为 >> 100 (就近原则)
权重相同 考虑优先原则
important 不一定直接显现效果，请自行测试 以最终结果为准
<!-- . -->