CSS
一、引入方式
css的引入方式有三种，分别是：行内样式、内部样式、外部样式
1.行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
2. 内部样式表
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中
例：<style>
div {
color: red;
font-size: 12px;
}
</style>
<style> 标签理论上可以放在 HTML 文档的任何地方，但一般会放在文档的<head>标签中
3.外部样式表
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中，之后把CSS文件引入
到 HTML 页面中使用.
引入外部样式表分为两步：
1. 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
2. 在 HTML 页面中，使用<link> 标签引入这个文件
例：<link rel="stylesheet" href="css文件路径">
二、 基本选择器
css中的选择器有很多，我们主要使用的是以下四种选择器：标签选择器、类选择器、id选择器、通配符选择器。
2.1标签选择器
标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
语法
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
例： <style>
/* 标签选择器 : 写上标签名 */
p {
color: green;
}
div {
color: pink;
}
</style>
2.2类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器
语法
结构需要用class属性来调用 class 类的意思，在 CSS 中，类选择器以一个点“.”号显示
<style>
.red {
color: red;
}
</style>
<div class=‘red’> 变红色 </div>
同时，类选择器还可以进行多类名使用，使用方法是：
(1) 在标签class 属性中写 多个类名
(2) 多个类名中间必须用空格分开
(3) 这个标签就可以分别具有这些类名的样式
<div class="red font20">亚瑟</div>
2.3id 选择器
id 选择器好比人的身份证号码，全中国是唯一的，不得重复。id 选择器和类选择器最大的不同在于使用次数上。CSS 中 id 选择器以“#" 来定义。
语法：
#id名 {
属性1: 属性值1;
...
}
例：#nav {
color:red;
}
2.4通配符选择器
在 CSS 中，通配符选择器使用“*”定义，它表示选取页面中所有元素（标签）。
语法
* {
属性1: 属性值1;
...
}
例：
* {
margin: 0;
padding: 0;
}
清除所有的元素标签的内外边距
三、复合选择器
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
3.1后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
元素1 元素2 {
样式声明 }
例如：
ul li {
样式声明 } /* 选择 ul 里面所有的 li标签元素 */
3.2子选择器
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法：
元素1 > 元素2 {
样式声明 }
例：
div > p {
样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
3.3并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1,元素2 {
样式声明 }
例：
ul,div {
样式声明 } /* 选择 ul 和 div标签元素 */
3.4伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。伪类选择器有很多，主要介绍链接伪类选择器与focus 伪类选择器。
链接伪类选择器主要包括link－:visited－:hover－:active。四个属性。
- a：link 把没有点击过的(访问过的)链接选出来
- a：visited 选择点击过的(访问过的)链接
- a：hover 选择鼠标经过的那个链接
- a：active 选择的是我们鼠标正在按下还没有弹起鼠标的那个链接
例：
/* a 是标签选择器 所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
}
:focus 伪类选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况 < input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
例：
input:focus {
background-color:yellow;
}
复合选择器总结;
四、字体属性
4.1字体基本属性
CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）。
font-family：字体系列；常见的字体：微软雅黑
font-size：字体大小；用px（像素）作为单位
font-weight：字体粗细；normal（400）不加粗，bold（700）加粗，100-900调整粗细
font-style：字体样式；normal默认，italic斜体
例子：<style>
body {
font-family: '微软雅黑';
font-size: 16px;
font-weight: 400;
font-style: italic;
}
</style>
字体属性可以把以上文字样式综合来写, 这样可以更节约代码:
body {
font: font-style font-weight font-size/line-height font-family;
}
1.使用 font 属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
2.不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用
4.2字体图标（iconfont）
字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。展示的是图标，本质属于字体。
字体图标的优点：
轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等。
兼容性：几乎支持所有的浏览器，请放心使用。
总结：
如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图。
字体图标是一些网页常见的小图标，我们直接网上下载即可。 因此使用可以分为：
- 字体图标的下载
- 字体图标的引入 （引入到我们html页面中）
- 字体图标的追加 （以后添加新的小图标）
下载网站：
1.icomoon 字库 http://icomoon.io
2.阿里 iconfont 字库 http://www.iconfont.cn/
引入：把下载包里面的 fonts 文件夹放入页面根目录下，然后在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中。
引入代码：
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
追加：
html 标签内添加小图标，然后给标签定义字体。font-family: “icomoon”;
例：
<style>
/* 字体声明 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?p4ssmb');
src: url('fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?p4ssmb') format('truetype'),
url('fonts/icomoon.woff?p4ssmb') format('woff'),
url('fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
span {
font-family: 'icomoon';
font-size: 100px;
color:pink;
}
</style>
<span></span>
<span></span>
五、 文本属性
CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1.color：文本颜色,用于定义文本的颜色。有三种表示方式，分别是预定义的颜色值（red）、16进制（#FF0000）、RGB代码（rgb(255,0,0)）。
2.text-align：对齐文本,用于设置元素内文本内容的水平对齐方式。有三种属性值：left（左对齐）、right（右对齐）、center（居中对齐）。
3. text-decoration：装饰文本,规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。属性：none（默认没有）、underline（下划线）、overline（上划线）、line-througt（删除线）。
4.text-indent：文本缩进，用来指定文本的第一行的缩进，通常是将段落的首行缩进。通常用em作为单位，em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小。
5. line-height：行间距，用于设置行间的距离（行高），可以控制文字行与行之间的距离。px为其单位。
例：
<style>
div {
color: rgb(255, 0, 255);
text-align: right;
text-decoration: none;
text-indent: 2em;
line-height: 25px;
}
</style>
六、Emmet 语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。
快速生成HTML结构语法：
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 < div></ div>
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的， 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
快速生成CSS样式语法;
- 比如 w200 按tab 可以 生成 width: 200px;
- 比如 lh26px 按tab 可以生成 line-height: 26px;
七、元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示，比如< div>自己占一行，比如一行可以放多个< span>。HTML 元素一般分为块元素、内元素、 行内块三种类型。
7.1块元素
常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中 < div> 标签是最典型的块元素。
块级元素的特点：
① 比较霸道，自己独占一行。
② 高度，宽度、外边距以及内边距都可以控制。
③ 宽度默认是容器（父级宽度）的100%。
④ 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
1.文字类的元素内不能使用块级元素
2.< p> 标签主要用于存放文字，因此 < p> 里面不能放块级元素，特别是不能放< div>
3.同理， < h1>~< h6>等都是文字类块级标签，里面也不能放其他块级元素
7.2行内元素
常见的行内元素有 < a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等，其中< span> 标签是最典型的行内元素。
行内元素的特点：
① 相邻行内元素在一行上，一行可以显示多个。
② 高、宽直接设置是无效的。
③ 默认宽度就是它本身内容的宽度。
④ 行内元素只能容纳文本或其他行内元素。
注意：
1.链接里面不能再放链接
2.特殊情况链接 < a> 里面可以放块级元素，但是给 < a> 转换一下块级模式最安全
7.3 行内块元素
在行内元素中有几个特殊的标签 —— < img />、< input />、< td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
② 默认宽度就是它本身内容的宽度（行内元素特点）。
③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
7.4元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性。比如想要增加链接 的触发范围。
最低0.47元/天 解锁文章
422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
