CSS - 1
CSS - 1
- 层叠样式表
层叠：一层一层
样式：名值对 (: 连接)
行内样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
</head>
<body>
<h1 style="color: red; font-size: 60px;">welcome</h1>
</body>
</html>
内部样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
<style>
h1{
color: red;
font-size: 60px;
}
h2{
color:green;
font-size: 70px;
}
img{
width: 200px;
}
</style>
</head>
<body>
<h1>welcome</h1>
<p>to</p>
</body>
</html>
- 样式可以复用，结构清晰
- 没有实现结构和样式的完全分离
- 多个 html 页面无法复用样式
外部样式
- 样式可以复用，结构清晰
- 实现了样式和结构的完全分离
- 浏览器会缓存外部样式表，首次加载后访问其他页面时会更快
h1 {
color: red;
font-size: 60px;
}
h2 {
color: green;
font-size: 70px;
}
img {
width: 200px;
}
使用 link 链接 css 文件
rel 引入的文档和当前文档之间的关系
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>行内样式</title>
<link rel="stylesheet" href="./xx.css">
</head>
<body>
<h1>welcome</h1>
<p>to</p>
</body>
</html>
样式表优先级
不同样式表的优先级
行内样式 > 内部样式 = 外部样式 (后写的覆盖先写的)
同一个样式表的优先级
后写的覆盖先写的
CSS语法规范
选择器 {
/* 注释 */
声明;
声明;
}
选择器 - 基本选择器
通配选择器
* {
color: red;
}
元素选择器
h2 {
color: chocolate;
}
类选择器
.speak {
color: green;
}
.big {
font-size: 60px;
}
<p class="speak big">hello</p>
class 命名规范：不使用纯数字和中文
id选择器
#turn-earthy {
color: green;
}
<h2 id="turn-earthy"></h2>
id命名规范：不使用数字开头，区分大小写，不包含空格
选择器 - 复合选择器
交集选择器
.rich {
color: gold;
}
.beauty {
color: red;
}
p.beauty#wa {
color: pink;
}
.rich.beauty{
color: orange;
}
<p class="beauty" id="wa"></p>
并集选择器
.rich {
color: gold;
}
.beauty {
color: red;
}
.rich,
.beauty,
#wxr,
p {
font-size: 40px;
}
后代选择器
ul li {
}
ol li a {
/* 选择所有在有序列表 (<ol>) 中的列表项 (<li>) 内的超链接 (<a>) 元素 */
}
.subject #front-end {
/* 选择所有类名为 subject 的元素内的， ID 为 front-end 的元素 */
}
.subject .front-end {
}
子代选择器
div>a {
/* 选择 div 的直接子元素中的 a 元素 */
}
div>p>a {
/* 选择所有位于 div 元素内部的 直接子元素 p 中的直接子元素 a */
}
.foot>a {
}
兄弟选择器
相邻兄弟选择器
/* 选择 紧跟在 div 元素后的第一个 p 元素 */
div+p {
color: red;
}
<div></div>
<p></p> <!-- 只变这个 -->
<p></p>
注意：只往下找紧紧相邻的
通用兄弟选择器
/* 选择所有位于同一父元素下、位于某个 div 元素之后的所有 p 元素 */
div~p{
color: red;
}
li+li {
color: blue;
}
<div></div>
<p></p> <!-- 变 -->
<p></p> <!-- 变 -->
<ul>
<li></li>
<li></li> <!-- 变 -->
<li></li> <!-- 变 -->
</ul>
注意：是往下找
选择器 - 属性选择器
[title] {
}
[title="wxr"] {
}
[title^="w"] { /* w开头的属性值 */
}
[title$="r"] { /* r结尾的属性值 */
}
[title*="r"] { /* 有r的属性值 */
}
<div title="wxr">
wajiezhe
</div>
选择器 - 伪类选择器
很像类，但不是类，是类的特殊状态
动态伪类
a:link { /* 没有访问过的a */
}
a:visited {
}
/* 所有标签都有 */
a:hover {
}
a:active { /* 点了没松手的a */
}
link -> link hover -> link hover active
/* 获取焦点（只有表单类元素才有用） */
input:focus {
}
结构伪类
div>p:first-child {
/* div的第一个儿子元素且是p */
}
div p:first-child {
/* div的后代p，p的父亲无所谓，但一定要是第一儿子 */
}
p: first-child {
/* p元素，p的父亲无所谓，但一定要是第一儿子 */
}
其它
p:last-child {}
p:nth-child(3) {
/* 第三个儿子 */
}
p:nth-child(2n){
/* 偶数 */
}
p:nth-child(2n+1){
/* 奇数 */
}
p:nth-child(-n+5){
/* 前五个 an+b的形式 */
}
/* ======= */
div>p:first-of-type {
/* 第一个p (同类型第一个) */
}
div>p:last-of-type {}
div>p:nth-of-type(5) {}
/* ======= */
div>p:nth-last-of-type(3) {} /* 倒数第三个同类型的子元素 */
/* ======= */
span:only-child{}
span:only-of-type{
/* 选中的是没有同类型兄弟的span元素 */
}
/* 选中html根元素 */
:root {
background-color: gray;
}
/* 选中没有内容的div */
div:empty {
width: 10px;
height: 10px;
background-color: red;
}
否定伪类
/* 选中div的儿子p元素，但要排除类名为fail的 */
dic>p:not(.fail) {
color: red;
}
UI伪类
/* 选中勾选的 */
input:checked {
}
/* 选中被禁用的 */
input:disabled {
}
目标伪类
/* 选中锚点所指向的元素 */
div:target {
}
语言伪类
div:lang(en) {
}
:lang(zh-CN) {
}
选择器 - 伪元素选择器
很像元素，但不是元素，是元素中的一些特殊位置
div::first-letter{
}
div::first-line {
}
/* 选中div中被鼠标选择的文字 */
div::selection {
background-color: green;
color: orange;
}
/* 选中input中的提示文字 */
input::placeholder {
color: skyblue;
}
/* 选中p元素最开始的位置，随后创建一个子元素 */
p::before {
content:"$"
}
p::after {
content:"after"
}
选择器优先级
通过不同的选择器，选中相同的元素，并且为相同的样式名设置不同的值时，就发生了样式的冲突
简单描述优先级：
行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器
内部样式和外部样式都是看权重
详细优先级：
权重计算
格式：(a,b,c)
a: ID选择器的个数
b: 类、伪类、属性 选择器的个数
c: 元素、伪元素 选择器的个数
.container span.solgan { /* (0,2,1) */
}
div>p>span:nth-child(1){ /* (0,1,3) */
}
/* 0=0; 2>1 */
有权重看权重，权重一样看顺序（后来居上）
.slogan {
color: purple !important; /* 最大权重 */
}
浙公网安备 33010602011771号