2020-11-05

行内式写法: 直接写在标签style属性中
行内式：写法简单。
缺点：1.结构和样式没有分离。
2.只对当前的标签生效。不能重复
内嵌式
写法：

使用style标签，要在head标签内。
css属性写在style标签内。
缺点：
1.如果样式比较多，页面代码会比较多。
2.只对当前页面生效。如果多个页面有共同的样式，需要写多次。
优点：
结构和样式分离。
样式可以复用。
**外链式** 
写法：<link rel="stylesheet" href="">

通过link标签，引入外部的css文件。
优点：
结构和样式分离。
样式可以复用。
可以多个页面使用。
选择器：选择页面上的元素进行样式的修改
标签选择器：通过标签名来选择相应的标签写在
用途：a标签，li标签。标签选择器可以用来默认样式初始化
ID选择器：通过给标签设置一个ID值，然后通过这个ID值来选择标签。
写法：#id{声明；}（以字母开头，后面可以是数字，下划线，横线）
一个页面中id值是唯一的，只会选择一个标签
缺点：有多个标签用id选择器时，需要分别设置id值和重复设置一样的样式
类选择器
通过标签的class属性来选择相应的标签。
class值是可以重复的。
格式：
.class属性值{
声明;
}
类选择器选择的是拥有相同class属性的标签元素。
class属性是可以有多个的。命名规则与ID值是一样的。字母开头，后面跟 数字，下划线，横线。
css样式书写样式 最多的选择器就是类选择器。

<p>春华秋实，落叶归根，亘古不变。</p>
<p id="Orz">春华秋实，落叶归根，亘古不变。</p>
<p>春华秋实，落叶归根，亘古不变。</p>
<a href="#"></a>
<p class="b1">妖怪，我要你助我修行。</p>

<p class="b2">红的花是绿的草</p>

<p class="b3">大威天龙</p>
<h1>咏鹅</h1>

<p>鹅鹅鹅，</p>
<p class="o-o">曲项向天歌。</p>
<p>白毛浮绿水，</p>
<p class="o-o">红掌拨清波。</p>

@charset "utf-8"; body { font-size: 13px; font-family: "Microsoft Yahei"; }

p {
color: red;
}

a {
text-decoration: none;
/* text-decoration: none;清除样式 */
}

#Orz {
color: red;
background-color: green;
}

.b1 {
font-size: 13px;
color: green;
align-content: center;
}

.b2 {
font-size: 13px;
color: hotpink;
align-content: center;
}

h1,
p {
background-color: yellow;
color: blue;
}

.o-o {
color: green;
text-align: center;
}