前端网页学习2（css简介和选择器）

CSS

CSS介绍

Css：
层叠样式表/级联表
样式风格：
展开式，小写，选择器与大括号，冒号和键值，有空格
结构：
选择器+一条多条声明

选择器

选择器：单选择器和复合选择器

单选择器

单选择器：标签选择器，类选择器，id选择器，通配符选择器

1. 标签选择器
定义标签选择器:

 p {
    
    
            color: blue;
        }

调用选择器：自动调用

1. 定义方式：标签名{}
2. 特点：选择某类标签。可快速全局设置样式。但不能差异化设置

2. 类选择器

定义类选择器:

.red {
    
    
            color: red;
        }

调用选择器:
单类名调用：

<p class="red">gaoyang</p>

多类名调用：

<p class="red font">gaoyang</p>

1. 定义方式： .类名字
2. 类名字不能用标签名字
3. 可以用段横线分割长名字
4. 不能用纯数字和中文
5. 多类目之间用空格隔开
   作用：能差异化设置

3. id选择器
定义id选择器:

#gaoyang {
    
    
            color: black;
            font-size: 30px;
            background-color: blanchedalmond;
            width: 150px;
        }

调用选择器:

<div id="gaoyang">gaoyang</div>

1. 定义方式：#定义
2. 用id调用
3. 调用是一次性的
4. 通常和js一起使用

4. 通配符选择器
定义通配符选择器:

* {
    
    
            color: darkmagenta;
            font-size: 10px;
        }

调用选择器：自动调用
定义适用于所有的标签元素

复合选择器

复合选择器：后代选择器，子选择器，并集选择器，伪类选择器
1. 后代选择器（包含选择器）：
通过空格 选择后代，可以是任意选择器，可跳跃选择
定义后代选择器:

ol li {
    
    
            color: red;
        }
.nav li a {
    
    
            color: gold;
        }

2. 子选择器：
通过>选择亲儿子。而非后代
定义子选择器:

.d1>a {
    
    
            color: indianred;
        }

3. 并集选择器：
 选择多组标签，定义相同样式，统一声明。
 可嵌套使用后代选择器，子选择器。
 不同标签间用，隔开。
 通常竖着写。

		a,
        li {
    
    
            font-size: 30px;
        }

4. 伪类选择器：
 向某些选择器添加效果
 链接伪类/结构伪类
 用：进行分割
链接伪类：

	a:link 所有未选过的链接
	a:visited 选择所有已访问的链接
	a:hover 位于其上的链接
	a:active 活动链接（鼠标按下未弹起的链接）

 按顺序声明才可生效
 先写一个a{}
focus伪类：
 选择表单元素

Input:focus