CSS的概述和基本语法

CSS概述

首先我们理清网页的前端是由什么构成：

HTML：超文本标注语言，主要用来控制内容的结构的。

CSS：级联样式表，主要用来控制HTML标签的格式的。

JavaScript：客户端的脚本程序，主要用来控制HTML标签的行为的。

CSS是什么？

1.CSS（Cascading Style Sheets)叫做级联样式表。

具体含义分析：

级联：即关联，关联网页内容和语法。
样式表：修饰网页内容样式的语法集合。
作用：修饰网页内容的外观。

2.理念：将网页内容与样式分离（重复部分可以只做一次）。

CSS基本语法

三种样式表

1.行内（间）样式表。

例：<p style="color: #00FFFF;font-size:20px;">内容1</p>
style="#" 描述CSS语法，只作用于当前标签。
当修改的属性相同时，优先级至高。

2.内嵌样式表。例：

<!--头部标签中 -->
    <style type="text/css">
                h4{background-color: #A52A2A;color: antiquewhite;font-size: 1.875rem;width: 10.25rem;}
    </style>
<!-- body中 -->
<h4>I love you</h4>

3.外部样式表。

在.html文件外再创建以个.CSS文件，在CSS文件中按照内嵌样式表的样子编写网页内容样式。最后在.html文件中导入.CSS文件。

在html中声明引入一个样式表的格式如下：
<link href="文件.CSS" rel="stylesheet" type="text/CSS" />

选择器

1.标签（元素）选择器。语法：指定标签名{ }。

描述:标签选择器于HTML标签一一对应,但是不加</>

例：

p{color: aqua;font-size: 10px;}

2.类选择器。 语法：.class属性值{ }。

描述:给一类的HTML标记添加样式.只要HTML标记的class属性是一样的,浏览器就认为是一类

例：

.class{color: #FF0000;font-size: 20px;text-align: center;}

3.id选择器。 语法：#id属性值{ }。

描述:给网页中指定id属性的HTML样式

例：

#id{color: brown;font-size: 30px;text-align: right;}

4.通配选择器。 语法：*{ }。

描述:将代表HTML所有的标签

例：

*{font-family:"楷体";}

5.组合选择器。 语法：指定标签1，指定标签2，·····{ }。

描述：同时给多个元素，加同一种样式。多个元素之间用英文下的逗号隔开

例：

#id_1,.box{background-color: #FAEBD7;}

6.后代选择器。 语法：祖先标签 后代标签{ }。

描述:给某个元素的所有后代元素，添加样式。两个选择器之间用空格隔开.

例：

ul ol{color: green;}

7.子标签选择器。 语法：父标签 > 子标签{ }。

描述：给当前元素的子元素添加样式。两个选择器之间用大于号(>)隔开

例：

ol > #id_2{color: #0000FF;}

8.相邻兄弟选择器。 语法：父标签+指定一个兄弟标签{ }。 例：

#id_2 + p{color: #A52A2A;}

9.兄弟选择器。 语法：指定标签~兄弟标签{ }。 例：

p ~ li{color: aqua;}

10.选择器的优先级。

（由高到底）id>类>标签>通配。
需注意行内（间）样式表依旧最高。

样式的继承

CSS中，祖先标签上的样式，会被他的后代继承。