杨家瑞的博客

# 前端基础

# CSS 样式表

# 优先级

优先级规则： 行内样式> 内部样式> 外部样式

1.内部样式外部样式，这二者的优先级相同，且：后面的会覆盖见面的（"后来者居上"）

2.同一个样式表中 优先级也和编写顺序有关，且：后面的会覆盖见面的（"后来者居上"）

分类 优点 缺点 使用频率 作用范围
行内样式 优先级最高 1.结构与样式未分离
2.代码结构混乱
3.样式不能复用
 很低 当前标签
内部样式 1.样式可复用
2.代码结构清晰		 1.结构与样式不能彻底分离
2.样式不能多页面复用		 一般 当前页面
外部样式 1.样式可多页面复用
2.代码结构清晰
3.可触发浏览器的缓存机制
4.结构与样式彻底分离		 需要引用才能使用 最高 多个页面

# 样式表语法

语法分两部分组成

选择器 找到要添加的样式元素

声明块 设置具体样式 （声明块是由一个或多个声明组成的）声明的格式为 属性名：属性值；

h1 {color: green; }
1

# 样式表 代码风格

展开风格

开发时推荐 便于维护和调试

h1{
   color:red;
}
1
2
3

紧凑风格

项目上线时推荐 可减小文件面积

项目上线时，我们会通过工具将展开风格的代码变成紧凑风格 这样可以减小文件面积 节约 网络流量 同时也能让用户打开网页时速度更快

h1{color:red;}
1

# CSS基本选择器

  1. 通配选择器
  2. 元素选择器
  3. 类选择器
  4. id 选择器
基本选择器 特点 用法
通配选择器 选中所有标签，一般用于清楚样式 *{属性名：属性值}
元素选择器 选择所有同种样式 但是不能有差异化选择 标签名{属性名：属性值}
类选择器 选中所有特定类名 （class 值）的元素 - - 使用频率很高 .speak {color:red}
ID选择器 选中特定id值的那个元素 #turn-earthy{color:blue; }

# 通配选择器

作用：可选中所有HTML元素

*{属性名：属性值}
1

# 元素选择器

作为页面中某种元素统一设置样式1

标签名{属性名：属性值}
1

# 类选择器

给样式起名 所有使用这个样式名称的都拥有此样式

class 名称 自定义但是不能使用数字开头 尽量使用英文与数字组合 且有语义

一个标签 想有多个class 属性 可用空格分隔

 .speak {color:red}
 .answer {color:green}
 <p class="speak">我对你说：清理临时文件。</p>
 <p class="answer">你对我说：Tomcat和jettey是HTTP服务器和Servlet容器，</p>
1
2
3
4

# id 选择器

根据标签id 加样式

 #earthy{ color: red;}
 #turn-earthy{color:blue; }
 <h2 id="earthy">土味情话</h2>
 <h2 id="turn-earthy">反杀土味情话</h2>
1
2
3
4

# 交集选择器

作用：选中同时符合多个条件的元素

有标签名 标签名必须写前面

交集选择器不可能出现两个元素选择器因为一个元素不可能既是p元素又是span元素

   h1.earthy{
            color:green;
        }
<h1 class="earthy">土味情话</h1>
 <h2 class="earthy">土味情话2</h2>
1
2
3
4
5

# 并集选择器

作用： 选中多个选择器对应的元素，又称：分组选择器

并集 就是 或者 交集选择器不能选择多个元素 时采用这个方案

可以用来 抽象公共样式

1.并集选择器一般竖着写

2.任何形式的选择器都可以作为并集选择器的一部分

3.并集选择器 通常集体声明

 .earthy,
 .turnearthy{
            background-color: aqua;
            width: 20px;
        }
1
2
3
4
5

# 后代选择器

作用： 选中指定元素中 符合要求的后代元素

语法：选择器 1 选择器 2 {} (先写祖先再写后代)

后代选择器最终选择的是后代 不选择祖先

儿子 孙子 重孙子 都算是后代

结构一定要符合HTML 嵌套要求

  <style>
        ul li{
            color:green;
           
        }
        ol li{
            color: red;
        }
    </style>
<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>
<hr>
<ol>
    <li>0</li>
    <li>1</li>
    <li>2</li>
</ol>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 兄弟选择器

相邻选择器

选中指定元素后，符合 条件的相邻兄弟元素

所谓相邻 就是紧挨着他的下一个 简记：睡在我下铺的兄弟

语法：选择器1+选择器2{}

  h1~p{
            color:green;
           
        }
1
2
3
4

通用兄弟选择器

选中指定元素后，符合条件的所有兄弟元素

语法： 选择器1 ~ 选择权器2 {}

 h1~p{
            color:green;
           
        }
1
2
3
4

← .NET基础 →