【CSS】入门-特性-基础选择器&复合选择器-类-id-通配符-后代选择器-子元素选择器-伪类选择器-并集选择器

最新推荐文章于 2022-09-12 18:25:41 发布

YK菌

最新推荐文章于 2022-09-12 18:25:41 发布

阅读量439

点赞数

分类专栏： HTML&CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44972008/article/details/110390552

版权

本文介绍了CSS的引入方式、三大特性，重点讲解了基础选择器如标签、类、ID和通配符选择器，以及复合选择器如后代、子元素、并集和伪类选择器，帮助理解如何精确地选中和设置HTML元素的样式。

摘要由CSDN通过智能技术生成

1. 简介

1.1 名字

CSS Cascading Style Sheets

层叠样式表

CSS样式表或级联样式表

1.2 作用

设置HTML页面中的文本内容（字体、大小、对齐方式）、图片外观（宽高、边框样式、边距）以及版面布局和外观显示样式

1.3 价值

让HTML专注做结构呈现，样式交给CSS

结构、样式相分离

1.4 语法规范

选择器 + {声明(属性:值;)…}

<head>
    <style>
    p {
        color: red;
        font-size: 12px;
    }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>

有点意思

2. 引入方式三种样式表

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

2.1 外部样式表

新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
在HTML页面中，使用标签引入这个文件

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

2.2 总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一个标签
内部样式表	部分结构和样式分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构二号样式相分离	需要引入	最多	控制多个页面

3. 三大特性

3.1 层叠性

相同的选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
不冲突就不重叠

3.2 继承性

子元素可以继承父元素的样式(text-, font-, line-这些元素开头的可以继承，以及color属性)

3.2.1 行高的继承

body {
    font:12px/1.5 'Microsoft YaHei' ;
}

3.3 优先级

同一个元素指定多个选择器，就会有优先级的产生

选择器相同：层叠性
选择器不同：根据选择器权重执行
复合选择器：权重叠加（不进位）

选择器	权重
继承或 *	0,0,0,0
元素（标签）选择器	0,0,0,1
类选

最低0.47元/天解锁文章