前端学习之级联样式单与css选择器

分手后的思念是犯贱 2023-05-22 08:47 9阅读 0赞

**样式单(Style Sheet)**：专门描述结构文档表现方式的文档，既可以描述这些文档  
如何在屏幕上显示，也可以描述它们的打印效果，声音效果。一般不包含在结构化，优点如下：

> ➢表达效果丰富:样式单可以支持文字和图像的精确定位、三维层技术以及交互操作等，  
> ➢文档体积小:在样式单中，对同一类标记只需进行一次格式定义即可，可提高传输速度。  
> ➢便于信息检索:样式单的显示逻辑与数据逻辑分离，更容易检索到有用信息。  
> ➢可读性好

\*\*级联样式表：\*\*主要有以下两个功能：

> ➢对页面的字体、颜色控制更加细腻，让页面内容更富表现力，CSS的表现效果远远超  
> 出传统HTML页面的color、bgcolor 等属性的表现力。  
> ➢通过CSS样式单可以同时控制整个站点所有页面的风格，如果整个站点所有的页面效  
> 果都需要改变，则可直接通过CSS样式单控制，避免逐个修改每个页面文件。

CSS样式单的四种使用方式：

> ➢链接外部样式文件:将样式文件彻底与HTML文档分离，样式文件需要额外  
> 引入。在这种方式下，一批样式可控制多份文档。  
> ➢导入外部样式文件:只是使用@import来引入外部样式单。  
> ➢使用内部样式:通过在HTML文档头定义样式单部分来实现的。每批CSS样式只控制一份文档。  
> ➢使用行内样式:这种方式将样式行内定义到具体的HTML元素，用于精确控制一  
> 个HTML元素的表现。每份CSS样式只控制单个HTML元素。

**1.引入外部样式文件**

\*\*2.导入外部样式文件\*\*

**3.使用内部样式**

**4.使用行内样式**  
style=“font-size:18px;height:30px”

## 元素选择器 ##

1、\* ：定义对所有元素起作用的CSS样式

*{ 
    	margin:0;
    	padding:0;
     }
     div{ 
    	background-color:grey;
     }

2、ID选择器  
\#idValue\{ . . . \}

3、class选择器  
.classValue\{ . . . . . . \}

4、包含选择器  
div .a \#b \{ . . . . . . \}

5、子选择器  
div>.a \{ . . . . . . \}

6、兄弟选择器  
\#Android ~ .long\{ . . . . . . . \}