关于样式表的基础

• 大部分标签都有 id 属性，同一个 html 文件中，id 必须唯一
• 大部分标签都有 class 属性，同一个文件中，class 可以重复
• 大部分标签都有一个 style 属性

样式表的三种写法

1. 行内样式

<strong style="font-size: 40px; color: aqua; ">我是行内样式</strong>

2. 内部样式

body 中

<!-- 形式二 -->
<center>
<strong id="c1">我是内部样式</strong>
<hr >
</center>

head 中

<!-- 内部样式 -->
<style type="text/css">
#c1{
/* 字体大小 */
font-size: 40px;
/* 字体类型 */
font-family: "楷体";
/* 字体颜色 */
color: red;
}
</style>

3. 外部样式

（id 用 ‘#’ 号，class 用 ‘.’）
body 中

<!-- 外部样式 -->
<center id="c2">
我是外部样式
</center>

head 中

<link rel="stylesheet"  href="myCssDemo.css"/>

CSS 文件中

#c2{
font-size: 50px;
font-family: "新宋体";
color: blueviolet;
}

外部样式的基础使用：

1. 有多个class 时

body 中

<ul style="align-items: center;">
<li class="waste1">抽烟</li>
<li class="waste2">喝酒</li>
<li class="waste3">烫头</li>
<li class="waste4">蹦迪</li>
</ul>

CSS文件中

.waste1,.waste2,.waste3{
color: brown;
}

2. 找子标签时

Body 中

<ul style="align-items: center;">
<li class="waste1">抽烟</li>
<li class="waste2">喝酒</li>
<li class="waste3">烫头</li>
<li class="waste4">蹦迪</li>
</ul>

CSS 文件中

ul>li{
color: gray;
}

• 点赞
• 收藏
• 分享
• 文章举报