CSS基础，标签选择器、id选择器、命名规则、css书写位置、引入方式（内嵌式，外链式）、并列并集选择器、后代选择器、伪类

最新推荐文章于 2025-03-10 22:52:00 发布

好好学习昂

最新推荐文章于 2025-03-10 22:52:00 发布

阅读量877

点赞数

分类专栏：软件测试学习笔记 # 阶段1测试基础文章标签： css

本文链接：https://blog.csdn.net/m0_46442882/article/details/119538877

版权

软件测试学习笔记同时被 2 个专栏收录

37 篇文章

订阅专栏

阶段1测试基础

17 篇文章

订阅专栏

CSS基础
css定义：可以设置网页中的样式、外观、美化
标签选择器
选择器，在大括号之前写的内容，就是选择器，找到你要选择的内容
标签选择器，用标签的名字进行页面元素，标签，标记的选择

<!-- css美化页面内容 -->
<style>
    /* 
    font-size 代表字号    
    px代表像素单位 在css中，大部分的情况，数字后面需要加单位
    选择器{属性名1：属性值1；属性名2：属性值2；}
    */
    div{color: aqua;font-size:50px}
    /* 
    选择器，在大括号之前写的内容，就是选择器，找到你要选择的内容
    标签选择器，用标签的名字进行页面元素，标签，标记的选择
    */
    p{color: burlywood;font-size: 50px;}
</style>

<body>
    <div>好好学习</div>
    <p>天天向上</p>
</body>

id选择器
id选择器：用HTML标签中的id属性来进行选取的方式

<style>
    /* id选择器：用HTML标签中的id属性来进行选取的方式 */
    #p1{color: darkorchid;}
    #p2{color: darksalmon;}
    #p3{color: darkturquoise;}
    #p4{color: green;}
    /* 
    命名规则：
        1、数字不可以开头
        2、不能使用中划线-、下划线_ 之外的符号
        3、不推荐中文的命名
        4、尽量做到见名知意（看到名字知道意思)
    唯一性：
        1、id的具体命名，不可以重复使用
        2、每个标签只能有一组id
    */

</style>
<body>
    <p id="p1">好</p>
    <p id="p2">好</p>
    <p id="p3">学</p>
    <p id="p4">习</p>
    
</body>

命名规则
命名规则：
1、数字不可以开头
2、不能使用中划线-、下划线_ 之外的符号
3、不推荐中文的命名
4、尽量做到见名知意（看到名字知道意思)
唯一性：
1、id的具体命名，不可以重复使用
2、每个标签只能有一组id
类选择器
类选择器：使用html中的class的值来进行选取的方式
语法：.类名{}

  <p class="类名">xx</p>

注意：class类选择器可以重复命名，每个标签可以有多个class
命名规则:与id的命名规则一样

<style>
    .kx{color: aqua;}
    .kl{color: brown;}

</style>

<!-- 
类选择器：使用html中的class的值来进行选取的方式
语法：.类名{}
      <p class="类名">xx</p>
注意：class类选择器可以重复命名，每个标签可以有多个class
命名规则:与id的命名规则一样
 -->
<body>
    <p class="kx">开心</p>
    <p class="kx kl">快乐</p>
    <p>王俊凯</p>
    <p>杨洋</p>
</body>

css书写位置、引入方式
内嵌式：css写在style标签中，放在title标签的后面，因为HTML代码和css代码混在同一个文件中。一般应用在电商网站的首页，对加载速度有要求，一次性把html和css都加载
外链式：css代码和html代码，实现代码的分离效果，使用link标签设置href属性，即可单独把css文件链入到当前的html文件中。外链式应用在除了电商网站首页，实现代码的分离，方便后期修改。

<link rel="stylesheet" href="外链css.css">
<body>
    <p class="hhxx">好好学习</p>
</body>
<!-- 
    外链式：css代码和html代码，实现代码的分离效果，
    使用link标签设置href属性，即可单独把css文件链入到当前的html文件中
 -->

.hhxx{color: aqua;}

行内式
行内式:css代码写在标签的身上，强烈不推荐使用，
修改不方便，重复代码太多，导致页面加载速度变慢

<body>
    <p style="color:aqua;">reluctant</p>
    <p style="color: blueviolet;">不情愿的</p>
</body>
<!--
     行内式:css代码写在标签的身上，强烈不推荐使用，
     修改不方便，重复代码太多，导致页面加载速度变慢
-->

伪类

<style>
    p{color: chartreuse;}
    p:hover{color: cornflowerblue;}
    /* ：hover  伪类 鼠标移入动作执行后的css代码 */
    /* 鼠标不在字体上面，字体是青绿色，鼠标碰到的时候是蓝色 */
</style>
<body>
    <p>好好学习</p>
</body>

并列并集选择器

<style>
    h1,h2,p,span{color: cornsilk;}

</style>
<body>
    <h1>indispensable</h1>
    <h2>必不可少的</h2>
    <p>reluctant</p>
    <span>必不可少的</span>    
</body>

后代选择器
后代选择器:选择器中出现空格，代表选择后代；
代码从左向右执行，我们就从左向右执行代码

<style>
    div p{color: aqua;}
</style>
<body>

    <div>
        <p>
            <span>好好学习</span>
        </p>
    </div>
</body>