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中,祖先标签上的样式,会被他的后代继承。