CSS杂记
浏览器
组成部分
- shell
- 内核：渲染引擎/JS引擎
常用浏览器
- Google Chrome webkit/blink(内核)
- Safari webkit
- Firefox gecko
- IE trident
- Opera presto
CSS
cascading style sheet 层叠样式表
内联样式
<div style="width:100px;height:100px;">
test
</div>
内部样式表
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.class {
width:100px;
height:100px;
}
</style>
</head>
外部样式表
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<!-- link里的rel是relation的意思 -->
</head>
style.css
.class {
width:100px;
height:100px;
}
权重
也即优先级
内联样式 > 内部样式表 > 外部样式表
选择器
id选择器
id是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
#box {
background: chartreuse;
}
</style>
</head>
<body>
<div id="box">test</div>
</body>
</html>
类选择器
类可以批量使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
.box {
background: chartreuse;
}
</style>
</head>
<body>
<div class="box">test1</div>
<p class="box">test2</p>
<div class="box">test3</div>
</body>
</html>
标签选择器
会作用于所有被指定的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
div {
background: chartreuse;
}
</style>
</head>
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
</body>
</html>
通配符选择器
选择所有的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style type="text/css">
* {
background: chartreuse;
}
</style>
</head>
<body>
<div>test1</div>
<div>test2</div>
<div>test3</div>
</body>
</html>
属性选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> /* [id="box1"] { background: chartreuse; } */ [id] { background: chartreuse; } [href] { background: purple; } </style> </head> <body> <div id="box1">test1</div> <div id="box2">test2</div> <a href="www.baidu.com">test3</a> <a href="www.baidu.com">test4</a> </body></html>
!important
优先权，慎用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> #box1 { background: purple !important; } </style> </head> <body> <div id="box1" style="background: red">test1</div> </body></html>
选择器优先级
!important > id选择器 > 类选择器 | 属性选择器 > 标签选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> #box1 { background: purple; } [href] { background: yellowgreen; } .box2 { background: red; } a { background: turquoise !important; } </style> </head> <body> <a id="box1" class="box2" href="">test1</a> </body></html>
派生选择器
id选择器不能派生id选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> strong .text1 { color: pink; } #content .text3 { color: purple; } strong em { color: turquoise; } /* div span { color: green; } */ div h1 span { color: green; } </style> </head> <body> <strong> <em class="text1">你好</em> </strong> <strong> <em class="text2">你好</em> </strong> <strong id="content"> <em class="text3">你好</em> </strong> <div> <h1><span>test4</span></h1> </div> <div> <span>test5</span> </div> </body></html>
CSS权重
| 选择器 | 权重值 |
|---|---|
| * | 0 |
| 标签，伪元素 | 1 |
| class, 属性, 伪类 | 10 |
| id | 100 |
| 内联样式 | 1000 |
| !important | ∞（正无穷） |
注意
数学上，正无穷 = 正无穷 + 1
计算机上，正无穷 < 正无穷 + 1
例子
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; height: 100px; } #div_id .h1-class { color: pink; } .div-class .h1-class { color: teal; } .div-class #h1_id.h1-class { color: yellowgreen; } </style> </head> <body> <div id="div_id" class="div-class"> <h1 id="h1_id" class="h1-class">test</h1> </div> </body></html>
并列选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> h1.title { color: yellowgreen; } p.title { color: tomato; } </style> </head> <body> <h1 class="title">你好，bew</h1> <p class="title">你好，web</p> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; } .big-box { width: 200px; height: 200px; } .box.box1 { background: tomato; } .box.box2 { background: yellow; } .big-box.box1 { background: gray; } .big-box.box2 { background: palegreen; } </style> </head> <body> <div class="box box1"></div> <div class="box box2"></div> <div class="big-box box1"></div> <div class="big-box box2"></div> </body></html>
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .tip { font-weight: bold; } .tip.tip-success { color: green; } .tip.tip-warning { color: orange; } .tip.tip-danger { color: red; } </style> </head> <body> <!-- 文本提示样式类 所有文本都是粗体 --> <p class="tip tip-success">1. success 成功的提示 green</p> <p class="tip tip-warning">2. warning 警告的提示 orange</p> <p class="tip tip-danger">3. danger 失败的提示 red</p> </body></html>
分组选择器
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> input, textarea { outline: none; /* outline-color: orange; outline-style: dotted; outline-width: 30px; */ } </style> </head> <body> <input type="text" /> <br /> <textarea name="" id="" cols="30" rows="10"></textarea> </body></html>
浏览器对父子选择器的匹配规则
从下至上，从右至左
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .nav header h3 span { color: orangered; } </style> </head> <body> <div class="nav"> <header> <h3><span>234</span></h3> </header> <div> <ul> <li><a href="">123</a></li> </ul> </div> </div> </body></html>
button标签和input(submit)
button标签是一个没有任何修饰的单纯的功能标签
button是内联块级元素
input(submit)标签的功能被限定为了提交表单
button样式类
样式惯例
.btn-success
#btn_success
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .btn { background: olivedrab; border: none; color: white; height: 34px; font-size: 14px; } .btn-success { background: #5cb85c; } .btn-warning { background: #f0ad4e; } .btn-danger { background: #d9534f; } </style> </head> <body> <button class="btn btn-success">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-danger">按钮</button> <input type="submit" value="按钮" /> </body></html>
CSS之宽高属性
- width
- height
- min-width
- min-height
- max-width
- max-height
width默认是100%视口宽度
height默认是100%内容宽度
min-width/max-width
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100%; min-width: 1340px; max-width: 1500px; height: 60px; font-size: 40px; background: green; } </style> </head> <body> <div>1111111111111111111111111111 1111111111111111111111111111</div> </body></html>
min-height/max-height
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; min-height: 300px; max-height: 400px; background: green; } </style> </head> <body> <div> 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! </div> </body></html>
CSS之overflow
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; min-height: 300px; max-height: 400px; background: green; /* overflow: hidden; */ /* overflow: scroll; */ /* 滚动条一般占17px */ overflow: auto; } </style> </head> <body> <div> 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! 你好test! </div> </body></html>
CSS之font
字体
em 和 italic 都表示斜体，不同的地方在于em还多了一层强调的语义，strong和font-weight的bold同理。
CSS的默认字体大小
继承自浏览器字体大小，16px
字体大小指的是字的高度，宽度自动缩放
12px/14px/16px/18px是常用字体大小
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p { font-size: 18px; /* font-weight: lighter; */ /* font-weight: bolder; */ /* font-weight: normal; */ /* font-weight: bold; */ font-weight: 700; /* font-family: Arial, Helvetica, sans-serif; */ /* Arial是windows和mac都会安装的通用字体 */ /* 当Arial不被兼容时，会依次往后回退寻找 */ font-family: "Times New Roman", Times, serif; /* 中文或者字体名字间有空格的，都需要用引号括起来 */ /* color: royalblue; */ /* color: #388275; */ /* color: #0f0; color: #00ff00; color: rgb(0, 255, 0); */ /* color: rgb(0%, 100%, 0%); */ /* color: rgba(0, 255, 0, 0.5); */ color: rgba(0, 260, 0, 0.5); /* 超过255，也会被设置为255，max-number */ } .p1 { font-style: italic; } .p2 { font-style: oblique; /* 强制文字倾斜，如果字体本身不带斜体(italic)的话 */ } h1, h2, h3, h4, h5, h6 { font-weight: normal; } </style> </head> <body> <p class="p1">你好test!</p> <p class="p2">你好test!</p> <p><strong>你好tset!</strong></p> <h1>你好test!</h1> <h2>你好test!</h2> <h3>你好test!</h3> <h4>你好test!</h4> <h5>你好test!</h5> <h6>你好test!</h6> </body></html>
CSS之border
边框
border-width指的是横截面宽度
在border-box模式里，width = content-width + padding + border-width
在content-box模式里，width = content-width
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 0; height: 0; /* height: 200px; */ /* border: 1px solid #000; */ /* border-top: 1px solid red; */ /* border-bottom: 1px solid black; */ /* border-width: 1px 2px 3px 4px; */ border-width: 20px 20px 20px 20px; /* border-color: black; */ border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: orange; /* border-style: dashed; */ border-style: solid; border-color: transparent; border-left-color: orange; /* padding: 1px; */ /* box-sizing: border-box; */ box-sizing: content-box; } </style> </head> <body> <div></div> </body></html>
CSS之text-align
文本对齐
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; height: 100px; border: 1px solid #000; text-align: center; /* text-align: left; */ /* text-align: right; */ } </style> </head> <body> <div>test</div> </body></html>
CSS之line-height
行高，一行所占据的高度
一般来说，行高默认值是22px。
默认地，文字的上下是会有2~3个像素的边距，所以行高就约等于字体大小加上4-6个像素
行高的计算规则如下，
line-height = font-size + 2|3 * 2
说明
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
| 默认值： | normal |
|---|---|
| 继承性： | yes |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.lineHeight=“2” |
可能的值
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
面试题
Q：写出1.2倍行高
A：line-height = 1.2 或者 line-height = 1.2em
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 100px; height: 300px; border: 1px solid #000; font-size: 20px; line-height: 300px; text-align: center; } /* .box1 { line-height: 0px; } .box2 { line-height: 22px; } */ </style> </head> <body> <div class="box1"><span>你好</span></div> <div class="box2"> <span>你好，班主任。你好，班主任。你好，班主任。</span> </div> </body></html>
CSS之text-indent
文本缩进
em ，相对大小单位
2em = 当前元素的字体大小 * 2
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> input { text-indent: 5px; } div { font-size: 20px; width: 200px; height: 500px; border: 1px solid #000; text-indent: 2em; } </style> </head> <body> <input type="text" /> <div class="box"> <p>你好，test!</p> <p>你好，test!</p> </div> </body></html>
CSS之text-decoration
文本装饰
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .text1 { text-decoration: underline; } .text2 { text-decoration: line-through; } .text3 { text-decoration: overline; } a { text-decoration: none; } </style> </head> <body> <a href="">百度一下，你就知道</a> <br /> <br /> <span class="text1">百度一下，你就知道 </span> <br /> <br /> <span class="text2">百度一下，你就知道 </span> <br /> <br /> <span class="text3">百度一下，你就知道 </span> </body></html>
CSS之curor
光标
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .text1 { color: purple; cursor: pointer; text-decoration: underline; } .text2 { color: purple; cursor: help; text-decoration: underline; } .text3 { color: purple; cursor: e-resize; text-decoration: underline; } button, input[type="submit"] { cursor: not-allowed; } </style> </head> <body> <a href="">百度一下，你就知道</a> <br /> <span class="text1">百度一下，你就知道 </span> <br /> <span class="text2">百度一下，你就知道 </span> <br /> <span class="text3">百度一下，你就知道 </span> <br /> <button disabled>提交</button> <input type="submit" disabled /> </body></html>
CSS之单行文本截断和显示省略号的三大件
三大件：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { width: 200px; height: 22px; border: 1px solid #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div> <span>我非常想成为一个成功的WEB前端工程师</span> </div> </body></html>
CSS之nbsp
概念
nbsp(Non-Breaking Space)，中文译作不换行空格。代码格式为
nbsp与普通空格的区别
- nbsp不允许换行
- nbsp不会被当作普通空格合并，例如
会保留两个空格而不合并
使用场景
值和单位之间的空格
nbsp通常应用在文本中需要避免换行的地方，如下例，值和单位之间的空格是不应该换行的
<p id="empList">20 kg</p>
CSS之overflow
overflow属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
| 默认值： | visible |
|---|---|
| 继承性： | no |
| 版本： | CSS2 |
| JavaScript 语法： | object.style.overflow=“scroll” |
可能的值
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
overflow-x and overflow-y
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
带 -ms- 的数字表示使用前缀的首个版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| overflow-x | 4.0 | 9.0 8.0 -ms- | 1.5 | 3.0 | 9.5 |
定义和用法
overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
**提示：**使用 overflow-x 属性来确定对左/右边缘的裁剪。
| 默认值： | visible |
|---|---|
| 继承性： | no |
| 版本： | CSS3 |
| JavaScript 语法： | object.style.overflowY=“scroll” |
语法
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
| 值 | 描述 |
|---|---|
| visible | 不裁剪内容，可能会显示在内容框之外。 |
| hidden | 裁剪内容 - 不提供滚动机制。 |
| scroll | 裁剪内容 - 提供滚动机制。 |
| auto | 如果溢出框，则应该提供滚动机制。 |
| no-display | 如果内容不适合内容框，则删除整个框。 |
| no-content | 如果内容不适合内容框，则隐藏整个内容。 |
CSS之display(inline/inline-block/block)
- inline
- inline-block
- block
inline/inline-block/block三种模式可以互相转换
block模式
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> span { display: block; width: 100px; height: 100px; background-color: brown; } </style> </head> <body> <span></span> <span></span> </body></html>
inline-block模式
注意，当内联或者内联块元素之间存在空格或者换行时，都会产生空隙，原因是空格或者换行符被翻译成了文本分隔符
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> span { display: inline-block; width: 100px; height: 100px; background-color: brown; } </style> </head> <body> <span></span> <span></span> </body></html>
inline模式
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> span { /* display: inline-block; */ width: 100px; height: 100px; background-color: brown; } </style> </head> <body> <span>test1</span> <span>test2</span> </body></html>
CSS之a标签按钮
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .link-btn { display: inline-block; text-decoration: none; border: 1px solid #000; width: 200px; height: 40px; line-height: 40px; text-align: center; background: salmon; color: #fff; } </style> </head> <body> <a .link-btn href="https://www.baidu.com" target="_blank" >百度一下，你就知道</a > </body></html>
CSS之伪类
什么是伪类？
伪类用于定义元素的特殊状态。
例如，它可以用于：
- 设置鼠标悬停在元素上时的样式
- 为已访问和未访问链接设置不同的样式
- 设置元素获得焦点时的样式
语法
伪类的语法：
selector:pseudo-class { property: value;}
锚伪类
链接能够以不同的方式显示：
实例
/* 未访问的链接 */a:link { color: #FF0000;}/* 已访问的链接 */a:visited { color: #00FF00;}/* 鼠标悬停链接 */a:hover { color: #FF00FF;}/* 已选择的链接 */a:active { color: #0000FF;}
**注意：**伪类名称对大小写不敏感。
伪类和 CSS 类
伪类可以与 CSS 类结合使用：
当您将鼠标悬停在例子中的链接上时，它会改变颜色：
实例
a.highlight:hover { color: #ff0000;}
悬停在<div> 上
在 <div> 元素上使用 :hover 伪类的实例：
实例
div:hover { background-color: blue;}
简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：
实例
p { display: none; background-color: yellow; padding: 20px;}div:hover p { display: block;}
CSS - :first-of-type 伪类
:first-of-type 选择器匹配属于其父元素的特定类型的首个子元素(不一定是第一个子元素，只需要是第一次出现的该制定类型的元素)的每个元素。
**提示：**等同于 :nth-of-type(1)。
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p:first-of-type { color: salmon; } </style> </head> <body> <!-- <span>test0</span> --> <p>test1</p> <div> <span>test2</span> <p>test3</p> </div> </body></html>
CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是所有元素的第一个子元素。
匹配首个 <p> 元素，两层含义如下：
- 匹配到的元素是其父元素的第一个子元素（排序上第一，而不是第一次出现）
- 匹配到的元素是 <p> 元素
:last-child伪类与:first-child伪类作用相似，不过是取最后一个子元素
在下面的例子中，选择器匹配作为任何元素的首个 <p> 元素和最后一个<p>元素：
实例
p:first-child { color: salmon;}p:last-child{ color:yellow;}
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p:first-child { color: salmon; } p:last-child { color: yellow; } </style> </head> <body> <span>test0</span> <p>这是一段文本。</p> <p>这是一段文本。</p> <div> <p>test1</p> <p>test2</p> </div> </body></html>
匹配所有 <p> 元素中的首个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：
实例
p i:first-child { color: salmon;}
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p i:first-child { color: salmon; } </style> </head> <body> <p><span>test0</span><i>test1</i><i>test2</i></p> <p><i>test3</i><i>test4</i></p> <div><i>test5</i><i>test6</i></div> </body></html>
匹配所有首个 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配作为所有元素中的首个子元素为 <p> 元素，这个 <p> 元素中的所有 <i> 元素：
实例
p:first-child i { color: salmon;}
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> p:first-child i { color: salmon; } </style> </head> <body> <p><i>test1</i><i>test2</i></p> <p><i>test3</i><i>test4</i></p> <div><i>test5</i><i>test6</i></div> <div> <!-- <p><i>test6</i><i>test7</i></p> --> <i>test5</i> <p><i>test6</i></p> </div> </body></html>
CSS - :nth-child(n)
:nth-child(n) 选择器匹配属于其父元素的第N个子元素，不论元素的类型，但也可以如下限定类型
table tr:nth-child(4) 选择所有table元素下的第四个元素，且该元素的类型为tr。
经测试，在第二个table里的第四行选择用div包裹td而不是tr, 浏览器解析时还是将div解析成了tr。
:nth-child(odd) 选择奇数序号的子元素
:nth-child(even) 选择偶数序号的子元素
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> table { width: 300px; } table tr td { border-bottom: 1px solid #ccc; } table tr:nth-child(4) { background: salmon; } div p:nth-child(odd) { color: salmon; } div p:nth-child(even) { color: gray; } </style> </head> <body> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <tr> <td>10</td> <td>11</td> <td>12</td> </tr> </table> <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> <div> <td>10</td> <td>11</td> <td>12</td> </div> </table> <div> <p>test1</p> <p>test2</p> <p>test3</p> <span>test4</span> <p>test5</p> </div> <div> <p>test1</p> <p>test2</p> <p>test3</p> <p>test4</p> <p>test5</p> </div> </body></html>
CSS - :lang 伪类
:lang 伪类允许您为不同的语言定义特殊的规则。
在下面的例子中，:lang 为属性为 lang=“en” 的 <q> 元素定义引号：
实例
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> q:lang(en) { quotes: "~""~"; } </style> </head> <body> <p>Some text <q lang="zh-CN">A quote in a paragraph</q> Some text.</p> <p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p> <p>在本例中，:lang 为 lang="en" 的 q 元素定义引号：</p> </body></html>
CSS - :disabled 伪类
匹配disabled状态的元素
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> button:disabled { background: salmon; color: #fff; } </style> </head> <body> <button type="text" disabled>按钮</button> </body></html>
CSS - :focus
选择获得焦点的输入字段，并设置其样式：
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> input { outline: none; } input:focus { border: 1px solid salmon; } </style> </head> <body> <input type="text" /> </body></html>
CSS相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .checkbox { width: 40px; height: 40px; border: 2px solid #000; } .checkbox label { display: block; width: 20px; height: 20px; background: #000; margin: 10px; opacity: 0; filter: alpha(opacity=0); } .checkbox input[type="checkbox"] { display: none; } .checkbox input[type="checkbox"]:checked + label { /* + label代表相邻的兄弟元素label */ /* 需要满足以下三个条件 */ /* 1. 同父级 2. 相邻 3. 在其之后 */ opacity: 1; filter: alpha(opacity=100); } </style> </head> <body> <div class="checkbox"> <input type="checkbox" id="checkbox" /> <label for="checkbox"></label> </div> </body></html>
更多实例
-
本例演示如何向超链接添加其他样式。
-
本例演示如何使用 :focus 伪类。
所有 CSS 伪类
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| :active | a:active | 选择活动的链接。 |
| :checked | input:checked | 选择每个被选中的 <input> 元素。 |
| :disabled | input:disabled | 选择每个被禁用的 <input> 元素。 |
| :empty | p:empty | 选择没有子元素的每个 <p> 元素。 |
| :enabled | input:enabled | 选择每个已启用的 <input> 元素。 |
| :first-child | p:first-child | 选择作为其父的首个子元素的每个 <p> 元素。 |
| :first-of-type | p:first-of-type | 选择作为其父的首个 <p> 元素的每个 <p> 元素。 |
| :focus | input:focus | 选择获得焦点的 <input> 元素。 |
| :hover | a:hover | 选择鼠标悬停其上的链接。 |
| :in-range | input:in-range | 选择具有指定范围内的值的 <input> 元素。 |
| :invalid | input:invalid | 选择所有具有无效值的 <input> 元素。 |
| :lang(language) | p:lang(it) | 选择每个 lang 属性值以 “it” 开头的 <p> 元素。 |
| :last-child | p:last-child | 选择作为其父的最后一个子元素的每个 <p> 元素。 |
| :last-of-type | p:last-of-type | 选择作为其父的最后一个 <p> 元素的每个 <p> 元素。 |
| :link | a:link | 选择所有未被访问的链接。 |
| :not(selector) | :not§ | 选择每个非 <p> 元素的元素。 |
| :nth-child(n) | p:nth-child(2) | 选择作为其父的第二个子元素的每个 <p> 元素。 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择作为其父的第二个 <p> 元素的每个 <p> 元素。 |
| :only-of-type | p:only-of-type | 选择作为其父的唯一 <p> 元素的每个 <p> 元素。 |
| :only-child | p:only-child | 选择作为其父的唯一子元素的 <p> 元素。 |
| :optional | input:optional | 选择不带 “required” 属性的 <input> 元素。 |
| :out-of-range | input:out-of-range | 选择值在指定范围之外的 <input> 元素。 |
| :read-only | input:read-only | 选择指定了 “readonly” 属性的 <input> 元素。 |
| :read-write | input:read-write | 选择不带 “readonly” 属性的 <input> 元素。 |
| :required | input:required | 选择指定了 “required” 属性的 <input> 元素。 |
| :root | root | 选择元素的根元素。 |
| :target | #news:target | 选择当前活动的 #news 元素（单击包含该锚名称的 URL）。 |
| :valid | input:valid | 选择所有具有有效值的 <input> 元素。 |
| :visited | a:visited | 选择所有已访问的链接。 |
所有 CSS 伪元素
| 选择器 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每个 <p> 元素之后插入内容。 |
| ::before | p::before | 在每个 <p> 元素之前插入内容。 |
| ::first-letter | p::first-letter | 选择每个 <p> 元素的首字母。 |
| ::first-line | p::first-line | 选择每个 <p> 元素的首行。 |
| ::selection | p::selection | 选择用户选择的元素部分。 |
CSS之visibility/display:none
visibility设置为hidden, 只会视觉上隐藏元素，依旧占据空间
display设置为none, 元素消失，不占据空间
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box1 { width: 100px; height: 100px; background: green; /* visibility: hidden; */ display: none; } .box2 { width: 150px; height: 150px; background: purple; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body></html>
CSS之vertical-align
垂直对齐
vertical-align:top|middle|bottom|像素
解决行内块与行内元素对齐的问题
span对齐到img的中间
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { border: 2px solid #000; } img { width: 150px; border: 1px solid #000; vertical-align: middle; } </style> </head> <body> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" />123 <span>123</span> </body></html><!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { border: 2px solid #000; } img { width: 150px; border: 1px solid #000; vertical-align: middle; } </style> </head> <body> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" />123 <span>123</span> </body></html>
图片放置在父级元素的中部（把图片的中线与父级元素的中线对齐）
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { border: 2px solid #000; } img { width: 150px; border: 1px solid #000; vertical-align: bottom; } </style> </head> <body> <p> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" /> <span>123</span> </p> </body></html>
717
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
