part1.CSS初识
--学习平台：https://www.imooc.com/learn/9
1、CSS简介
1.1 CSS定义：Cascading Style Sheets，全称层叠样式表。主要用于定义HTML内容在浏览器内的显示样式，比如字体的大小、颜色等。
语法：选择符（选择器）{属性：值}， 其中{ }的属性和值就是CSS的声明，多条声明时用分号“;”分隔
注释：/*.......*/
1.2 CSS代码的插入：
（1）形式：
1）内联式：在现有标签中写CSS代码
eg. <p style="color:red"> 这是一段话</p>
注：写在元素的开始标签中
2） 嵌入式：在<head></head>里，加入<style type="text/css">...CSS代码... </style>
3）外联式：在一个单独的.css外部文件中，编写CSS代码，且在<head>......</head>内使用<link>标签将css样式文件链接到HTML文件内，如下：
<link href="***.css" rel="stylesheet" type="text/css" / > 注：标识突出的内容为固定写法
（2）优先级：就近原则，一般来说，内联式 > 嵌入式 >外联式
2、CSS选择器
选择器：指样式的作用对象，也就是元素
2.1 CSS选择器的类型
（1）标签选择器：也就是html中的标签，如：<p>、<img>、<a>、<h1>等
（2） 类选择器：
1）给标签设置一个类：< **** class="类名称">......< *** >
2）设置类选择器的样式：.类名称{ ...... }
注：可以应用于任何元素，可以使用多次，可以使用类选择器--词列表方法为一个元素同时设置多个样式
（3） ID选择器：
1）给标签设置 id 属性：<*** id="id名称">......<***>
2)设置标签选择器的样式：#id名称{ ...... }
注：可以应用于任何元素，仅可使用一次，不能为一个元素设置多个样式
（4）子选择器：
1）指定标签元素的第一代子元素：用>表示，仅作用于直接后代
2）例： .food > li{ border:1px solid red;} 表示使得class名为food下的子元素 li 样式设置为红色实线边框
（5）后代选择器：
1）指定标签元素的后代元素：用空格表示，可作用于所有后代
2）例：. first span{ color:red;} 表示使得class名为first下的子元素span字体变为红色
（6）通用选择器：
1）指定所有的标签元素：用*表示
2）例：*{color:red}
（7）伪类选择器：
1）可以为html中不存在的标签（标签的某种状态）设置样式
2）例：鼠标滑过的状态：a:hover{ color:red }
（8）分组选择器：
1）为多个标签元素设置同一个样式时，使用分组选择符：“,”--逗号
2）例：h1,span { color:red}
相当于
h1{ color:red;}
span{color:red;}
2.2 CSS选择器的优先级：
就近原则，内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
3、CSS样式
3.1 CSS样式的继承
CSS的某些样式具有继承性，继承：允许样式可以应用于其后代。比如color具有继承性，但是border不具有继承性
3.2 CSS样式的权值
当同一元素设置了多个CSS样式时，元素启用哪个CSS样式取决于CSS样式权值的大小，
规则：
标签---权值为1
类选择器---权值为10
ID选择器---权值为100
继承---权值较低，有时认为只有0.1
!important---表示最高权值，写在分号的前面，在特殊情况需要设置最高权值时使用，eg. p{ color:red !important;}
3.3 CSS样式的类型
（1）字体样式
1）设置字体系列：font-family:"宋体...";
2）设置字体的大小：font-size:12px; 表示将字体设置字号为12像素
3）设置字体的粗细：font-weight:bold; 表示将字体加粗
4）设置字体的样式：font-style: normal / italic / oblique; 表示将字体设置为：正常/斜体/强制倾斜
5）设置字体的颜色：color:red / rgb(133,45,200) / rgb(20%,33%,25%) / (#00ffff); 表示将字体颜色设置为红色，其中：英文命令/ RGB颜色 / 十六进制颜色
注：RGB即表示按照R（red）、G（green）B、（blue）三种颜色的配比，每种颜色的值在0~255之间的整数，或者是在0%~100%之间的分数；
十六进制颜色，也是按照RGB设置，每种颜色的值为十六进制：00-ff
6）font样式简写：
eg. body{
font:12px/1.5em "宋体" ,sans-serif;
}
注：sans-serif专指西文中没有衬线的字体，与汉字字体中的黑体相呼应；如果所列的字体不能调用，则默认的该sans-serif字体能保证调用
在缩写时，字体大小和行高之间加入“/”斜杆
（2）文本样式
1）文本的修饰：text-decoration:none/underline/overline/line-through （文本--无线/上划线/删除线/下划线）
2）首行缩进：text-indent:2em; （2em表示文字的两倍大小）
3）设置行高：line-height:1.5em;
4）设置中文文字/英文字母间隔：letter-spacing:50px;
设置英文单词间隔：word-spacing:50px;
5）设置文本对齐方式：text-align:center / left / right; 为块状元素的文本、图片设置居中/居左/居右样式
6）长度值：以下三个都是相对单位
1/ 像素 --px
表示显示器上的小点，CSS中假设90px=1英寸
2/ em
表示给定字体的font-size值，1em=**px
3/ 百分比
表示设置为给定字体的百分比大小
html:
<p>以这个<span>例子</span>为例。</p>
CSS：
p{font-size:14px}
span{font-size:0.8em;}
<span>的字体“例子”大小为：14*0.8 = 11.2px
原文：https://www.cnblogs.com/Xue-Ying/p/12759847.html