Web前端开发学习6——CSS选择器的运用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44918529/article/details/103017802

第一种：标签选择器（在css内嵌样式下运用）

css部分：

<style type="text/css">
       body {background-color:#ccc;
 text-align:center;
 font-size:12px;}
 h1{font:"黑体";font-size:20px;}
 p{color:red;font-size:16px;}
 hr{width:200px;}
</style>

html部分：

<body>
<h1>标题（20px）</h1>
<hr>
<p>正文的段落（16px）</p>
欢迎来到我的网页（12px）
</body>

整体代码：
在这里插入图片描述
显示如下：

第二种：类别选择器（在css内嵌样式下运用）
css部分：

<style type="text/css">
 p{font-size:12px}
 .one{font-size:18px}
 .two{font-size:24px}
</style>

html部分：

<body>
 <p class="one">类别1（18px）</p>
 <p class="one">类别1（18px）</p>
<p class="two">类别2（24px）</p>
 <p class="two">类别2（24px）</p>
 <p>普通段落中的文字（12px）</p>
</body>

整体代码：
在这里插入图片描述

显示如下：
在这里插入图片描述

注意：类别选择器要在作用的标签之内引用，引用时，去掉前面的点

第三种：ID选择器（在css内嵌样式下使用）

css部分：

<style type="text/css">
 #one{font-size:18px}
 #two{font-size:24px}
</style>

html部分：

<body>
 <p id="one">文字1（18px）</p>
 <p id="two">文字2（24px）</p>
 <p>普通段落中的文字</p>
</body>

整体代码：
在这里插入图片描述

显示如下：
在这里插入图片描述
注意：id选择器引用时去掉前面的＃号，并且id选择器具有唯一性

第四种：嵌套声明（在css内嵌模式下使用）
css部分：

<style type="text/css">
 p span{
  color:red;
  }
</style>

html部分：

<body>
 <p><span>欢迎来到</span>我的网页</p>
 <p>普通段落中的文字</p>
</body>

整体代码：
显示如下：
第五种：集体声明（在css内嵌模式下使用）
css部分：

<style type="text/css">
 h1,p{text-align:center;
 }
</style>

html部分：

<body>
 <h1>欢迎来到我的网页（h1标签）</h1>
 <p>普通段落中的文字（p标签）</p>
</body>

整体代码：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191111214558365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTE4NTI5,size_16,color_FFFFFF,t_70 显示如下：

第六种：全局声明（在css内嵌模式下使用）
css部分：

<style type="text/css">
 *{
 text-align:center;
 }
</style>

html部分：

<body>
 <h1>欢迎来到我的网页（h1标签）</h1>
 <p>欢迎来到我的网页（p标签）</p>
 <h2>欢迎来到我的网页（h2标签）</h2>
</body>

整体代码：
在这里插入图片描述显示如下：
结束！

学习内容来源于中国大学MOOC——Web前端开发（3-3），如有错误，请指正！