CSS（Cascading Style Sheets）——层叠式样式表

最新推荐文章于 2022-01-03 21:39:38 发布

原创

最新推荐文章于 2022-01-03 21:39:38 发布 · 802 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了CSS（层叠样式表）的基本概念、使用原因以及与HTML和JS的关系。详细讲解了CSS的语法规范，包括内联样式、内部样式和外部样式。讨论了CSS的特性，如继承性、层叠性和优先级。还详细阐述了基础选择器的种类，如通用选择器、元素选择器、类选择器、ID选择器、群组选择器等，并举例说明了它们的用法和优先级。

1.什么是CSS？

Cascading Style Sheets

层叠样式表 -> 样式表

2.为什么使用CSS？

设置HTML网页元素的样子——对HTML骨架进行修饰美化。就是我们所谓的擦粉打扮穿衣服。——如下图

3.CSS、HTML与JS的关系？

4.CSS语法规范

内联样式

特点	将CSS内容定义在HTML标记中
语法	<ANY style="样式声明1;样式声明2;... ...">
样式声明	1、由样式属性名以及值来组成 2、属性名与值之间使用 : 做连接 3、多个样式声明之间用 ; 做分隔
例子展示

内部样式

在网页中的一个独立的地方声明该网页要用到的所有的样式
语法：

  <head>
       <style>
          样式规则1
          样式规则2
          ...
          样式规则n
        </style>
   </head>

样式规则

由选择器和样式声明组成

选择器

规范了页面中哪些元素能够使用声明好的样式,其实就是为了匹配页面中的元素

选择器{
                       样式声明1;
                       样式声明2;
                   }

效果展示

外部样式

  独立于任何网页的位置处，声明一个样式表文件(***.css)，在文件中声明样式。在使用的网页中进行引入
   使用步骤：

1、创建样式表文件，并编写样式
在 xxx.css 文件中编写样式规则

2、在网页上对样式表文件进行引入
             <head>
                   <link rel="stylesheet" href="xxx.css">
             </head>

3.效果展示：

5.CSS样式表特征

继承性

必须是父子(有层级关系)结构
大部分的css效果是可以直接继承给子元素的

层叠性

可以为一个元素定义多个样式规则，规则中的属性不冲突时，可以同时都应用到当前元素上

所谓的属性冲突就是相同的属性设置不同的属性值

最低0.47元/天解锁文章