一、CSS简介
1、CSS----用于网页美化
CSS是层叠样式表(Cascading Style Sheets) 的简称,有时我们也叫CSS样式表或级联样式表。CSS主要用于设置HTML页面的文本内容(字体、大小、形状等)、图片的外形以及版面布局和外观显示样式。
CSS的最大价值: 由HTML去做页面的结构呈现,CSS去做样式的优化。即结构(HTML)和样式(CSS)相分离。
2、CSS的语法规范
CSS规则由两个主要的部分构成:选择器以及一条或多条声明。
二、CSS的基础选择器
1、选择器的分类
选择器分为基础选择器和复合选择器两大类,我们先看基础选择器。
基础选择器是由单个选择器组成的;
基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器。
2、标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中的某一标签指定统一的CSS样式。
语法:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
......
}
作用: 标签选择器可以把某一类标签全部选择出来,比如所有的 < p > 标签。
优点: 能快速为页面中的同类型标签统一样式设置。
缺点: 不能做差异化设计,只能选择全部的当前标签。
3、类(class)选择器
如果想要差异化选择不同的标签,单独选择一个或几个标签,可以使用类选择器。
语法:
.类名 {
属性: 属性值;
......
}
注意:
● 类选择器使用" ."(英文点号)进行标识,后面紧跟着自定义类名。
● 自定义类名不能使用标签的名称。
● 一个标签可以使用多个类名 中间使用空格隔开。
4、id选择器
● id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
● HTML 以 id 属性来设置 id 选择器,CSS 中 id 选择器以 " # " 来定义。
● id 选择器和类选择器的不同住处就在于类选择器就好比人的名字,可以重名,id 选择器就相当于身份证号,每个人的都是唯一且不同的。
语法:
#id名 {
属性: 属性值;
......
}
5、通配符选择器
在 CSS 中,通配符选择器需要使用 “*” 定义,它表示选取当前页面中的所有标签。
通配符选择器不需要调用,它自动就给所有的元素使用样式。
语法:
* {
属性:属性值
......
}
基础选择器总结:
基础选择器 | 作用 | 特点 | 用法 |
---|---|---|---|
标签选择器 | 可以选出所有相同的标签,比如 p | 不能差异化选择 | p { color:red; } |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | .box { color:red; } |
id选择器 | 一次只能给一个标签调用 | id属性只能在每个HTML文档中出现一次 | #first { color:red; } |
通配符选择器 | 选择所有的标签 | 选择的太多,部分不需要 | * { color:red;} |
三、CSS高级选择器
1、层次选择器
1.1、后代选择器
后代选择器(descendant selector)又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。
举例来说,如果希望只对 h1 元素中的 span元素应用样式,可以这样写:
h1 span {
color:red;
}
1.2、子选择器
和后代选择器不同,子选择器只能选择某元素的子元素作为元素。
语法:
父元素 > 子元素 {
属性:...
}
例如:
h3 > p {
color: red;
font-family: 隶书;
font-size: 55px;
}
<h3>
<p>
子选择器只能选择父级元素的子元素作为元素
</p>
</h3>
1.3、相邻兄弟选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
比如你要选择h3下的第2个p,就可以使用相邻兄弟选择器,使用相邻兄弟选择器后,就意味着和它同辈的下一个元素被选中,就像下面这个例子,使用相邻兄弟选择器选中的就是第二个p标签second。
.active+p {
background: red;
font-family: 隶书;
font-size: 30px;
}
<h3>
<p class="active">first</p>
<p>second</p>
<p>third</p>
<p>last</p>
</h3>
1.4、通用兄弟选择器
通用兄弟选择器选择的是同级元素后面的所有的兄弟元素。
例如下面这个例子,你要选择 class 为 active 的 p 标签后面的所有的 p 标签,就可以使用通用兄弟选择器。.
.active~p {
background: #5f5eff;
font-family: 楷体;
}
<h3>
<p class="active">first</p>
<p>second</p>
<p>third</p>
<p>last</p>
</h3>
运行结果:
2、结构伪类选择器
用法:
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul li:first-child {
background: blue;
font-size: 20px;
font-weight: bolder;
}
h3 p:last-child {
background: red;
font-weight: lighter;
font-size: 25px;
}
ul li:first-of-type {
background: #34fff5;
}
h3 p:nth-of-type(2) {
background: #922d3a;
}
</style>
</head>
<body>
<ul>
<li>1张三</li>
<li>2李四</li>
<li>3王五</li>
<li>4赵倩</li>
<li>5李云飞</li>
</ul>
<h3>
<p>p1第一段</p>
<p>p2第二段</p>
<p>p3第三段</p>
<p>p4第四段</p>
</h3>
</body>
</html>
执行结果:
四、美化网页元素
1、美化网页的必要性
1、有效的传递页面信息;
2、使页面变得好看,吸引用户;
3、凸显网页的主题;
4、为用户提供更好地体验;
2、网页的字体样式
<style>
body {
font-family: 楷体;
font-size: large;
font-weight: bolder;
color: #0000FF;
}
</style>
3、文本样式
<!DOCTYPE html>