<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="css/a.css">
<style>
<!-- 内部样式表法： -->
<!--三种常用的选择器 ：
第一种：标签选择器:直接打对应的标签名称
第二种：id选择器：#+id名称(id具有唯一性不能重复，id不能以数字开头)
第三种：类选择器（class选择器）:.+class名称（class可以重复）-->
/* 选择器{
样式
} */
/* 为什么要用选择器：在添加样式时选择到指定的标签 */
/* id和class的区别：id是唯一的，class可以重复。 */
/* 三种选择器的权重：id（权重值：100）>class（10）>标签（1） */
p{
color: red;
}
h1{
color: blue;
}
#text{
color: red;
}
.t1{
color: green;
}
</style>
</head>
<body>
<div id="">
快速打结构性代码
ul>li*12>p+img>a之后按tab
<!-- ul中有12个li，li中有一个p标签和一个img标签,图片中有超链接标签-->
<ul>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
<li>
<p></p>
<img src="" alt=""><a href=""></a></img>
</li>
</ul>
</div>
<!-- 行内样式法：给指定的标签添加style属性 -->
<p style="color: blue;">我是蓝色字</p>
<p style="color: red;">我是红色字</p>
<h1>我是蓝色字</h1>
<p id="text">我是红色字</p>
<p class="t1">我是绿色</p>
<h1 class="t1">我是绿色字</h1>
</body>
<!-- 引入css三种方式：
第一种：行内样式法：给指定标签添加style属性
第二种：内部样式表法：在head标签中加一对style标签，选择器{}
第三种：外部样式表法：建立一个样式表文件（xxx.css），然后写选择器{}，在网页中head标签中link引入 -->
<!-- 三种常用的选择器（在样式表中选择指定元素）：
1.标签选择器：直接打对应标签名称
2.id选择器：给标签一个id属性，然后在样式表中#+id名称
3.class选择器：给标签一个class属性，然后在样式表中.+class名称 -->
</html>
引入css的三种方法及三种选择器
最新推荐文章于 2024-06-02 21:27:33 发布
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
