行内式写法: 直接写在标签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;
}