HTML——css选择器

最新推荐文章于 2023-05-28 09:50:56 发布

yoghurt&girl

最新推荐文章于 2023-05-28 09:50:56 发布

阅读量134

点赞数 1

分类专栏： web前端开发 HTML 文章标签： css html 前端

本文链接：https://blog.csdn.net/ywforever/article/details/125014530

版权

web前端开发同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

2 篇文章 0 订阅

订阅专栏

一、CSS选择器

1、标签选择器

语法格式：

在这里插入图片描述
直接指定标签给定样式，比如p标签、h1~h6标题标签等等，下面是部分标签选择器的展示：

<style type="text/css">
        p {
            text-align: center;
            color: red;
            font-size: 18px;
        }
        
        h1 {
            color: aqua;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>标题一的样式</h1>
    <p>段落样式</p>
</body>

效果图：
在这里插入图片描述

2、类名选择器（class引用）

语法格式：
在这里插入图片描述
语法小技巧：

长名称或词组可以使用中横线来为选择器命名
不建议使用_来命名css选择器
不要使用纯数字、中文等命名，尽量使用英文字母表示
举例说明：

效果展示：

3、多类名选择器

语法格式：
就是在class属性中写多个类名，必须用空格分开

在这里插入图片描述
举例说明：

    <style type="text/css">
        .info {
            text-align: center;
            font-size: 18px;
        }
        
        .head {
            color: pink;
            font-style: italic;
        }
    </style>

效果展示：
在这里插入图片描述

4、ID选择器（用id引用css样式）

语法格式：
在这里插入图片描述

举例说明：
在这里插入图片描述
效果展示：

5、通配符选择器
使用*定义，表示选取所有页面的元素，不需要调用
举例说明：

    <style type="text/css">
        * {
            text-align: center;
            font-size: 18px;
            color: green;
        }
    </style>
</head>

<body>
    <p>测试通配符选择器</p>
    <h1>我来了，来测试这个通配符啦！</h1>
</body>

**效果图：
在这里插入图片描述
**

二、css的用法

（1）行内样式表（）

直接写在标签内，用style属性值引用，
行内式
举例：

<p style="color:red"></p>

（2）内部样式表

在head中定义，语法格式：
在这里插入图片描述
举例：

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

（3）外部样式表

在这里插入图片描述

将样式单独存于一个文件，通过引用该文件进行样式的设置
引入代码的语法：也是在head中写入

<link rel="stylesheet" href="css文件路径">

总结

在日常开发中，我们最常用的是内部样式表和外部样式表针对样式复杂，且内容较多的我们最好是选择通过外部样式表去设定我们的内容样式，而针对内容不多的可采用内部样式表。

yoghurt&girl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML——css选择器

HTML中的css的选择器使用
复制链接

扫一扫

专栏目录