🧠 STUDY
CSS 学习笔记
CSS 语法
CSS 规则
选择器 {属性:值; 属性:值;}
增强可读性的方法
p
{
color:red;
text-align:center;
}
CSS 注释
- 以 /* 开始, 以 */ 结束
/*这是个注释*/
p
{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
Id 和 Class 选择器
id 选择器
- 可以为标有特定 id 的 HTML 元素指定特定的样式
- HTML 元素以 id 属性来设置 id 选择器
- CSS 中 id 选择器以「#」来定义
#para1
{
text-align:center;
color:red;
}
class 选择器
- 有别于 id 选择器,class 可以在多个元素中使用
- 在 HTML 中以 class 属性表示
- 在 CSS 中,类选择器以一个 . 显示
.center {text-align:center;}
- 你也可以指定特定的 HTML 元素使用 class
p.center {text-align:center;}
- 在 HTML 中,多个 class 选择器可以使用空格分开
<p class="center color">段落居中,颜色为红色。</p>
CSS 创建
外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
多重样式优先级
- Inline style > Internal style sheet > External style sheet > default
- 如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式
CSS 背景
- 用于定义 HTML 元素的背景
background-color | 背景颜色 |
background-image | 背景图像 |
background-repeat | 值为 repeat-x、repeat-y、no-repeat |
background-attachment | 背景图像是否固定 |
background-position | 改变图像在背景中的位置 |
body {background:#ffffff url('img_tree.png') no-repeat right top;}
CSS Text
文本颜色
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
对齐方式
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align: justify ;}
文本修饰
a {text-decoration:none;}
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration: underline ;}
文本转换
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform: capitalize ;}
文本缩进
p {text-indent:50px;}
CSS Fonts
字体系列(font family)
- 如果浏览器不支持第一种字体,将尝试下一种字体
p{font-family:"Times New Roman", Times, serif;}
字体样式(font style)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小(font size)
用像素来设置大小
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
用 em 来设置大小
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
用百分比和 em 组合来设置大小
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
CSS Link
链接状态
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
文本修饰
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
背景颜色
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
CSS 列表
不同的列表项标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作为列表项标记的图像
ul
{
list-style-image: url('sqpurple.gif');
}
简写属性
ul
{
list-style: square url("sqpurple.gif");
}
移除默认设置
ul {
margin: 0;
padding: 0;
}
CSS 表格
表格边框
table, th, td
{
border: 1px solid black;
}
折叠边框
table
{
border-collapse: collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
水平对齐
td
{
text-align:right;
}
垂直对齐
td
{
height:50px;
vertical-align:bottom;
}
表格填充
td
{
padding :15px;
}
表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
CSS 盒子模型(Box Model)
组成部分

Margin(外边距) | 清除边框外的区域,外边距是透明的 |
Border(边框) | 围绕在内边距和内容外的边框 |
Padding(内边距) | 清除内容周围的区域,内边距是透明的 |
Content(内容) | 盒子的内容,显示文本和图像 |
元素的宽度和高度
- 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度
CSS 边框
border-style 的值
none | 无边框 |
hidden | 隐藏边框 |
dotted | 点线边框 |
dashed | 虚线边框 |
solid | 实线边框 |
double | 双线边框 |
groove | 3D沟槽边框(凸起效果) |
ridge | 3D脊边框(凸起效果) |
inset | 3D嵌入边框(凹陷效果) |
outset | 3D突出边框(凸起效果) |
border-width 的值
- 直接指定宽度
- 关键词:thick, medium, thin
border-color 的值
- name
- RGB
- Hex
单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
简写属性
border:5px solid red;
CSS 轮廓(Outline)

- 位于边框边缘的外围,可起到突出元素的作用
- 属性 outline, outline-color, outline-style, outline-width
CSS 外边距(Margin)

- 定义元素周围的空间
- 可单独改变元素的上、下、左、右边距(margin-top/bottom/right/left)
- 也可一次改变所有的属性(上 右 下 左、上 左右 下、上下 左右、上下左右)
auto | 这样做的结果会依赖于浏览器 |
length | 定义一个固定的 margin |
% | 定义一个使用百分比的边距 |
CSS 填充(Padding)
- 定义元素边框与元素内容之间的空间
- 可单独改变元素的上、下、左、右边距(padding-top/bottom/right/left)
- 也可一次改变所有的属性(上 右 下 左、上 左右 下、上下 左右、上下左右)
length | 定义一个固定的 margin |
% | 定义一个使用百分比的边距 |
CSS 分组和嵌套选择器
分组选择器
- 每个选择器用逗号分隔
h1,h2,p
{
color:green;
}
嵌套选择器
选择器 | 作用 | 示例 |
p{ } | 为所有 p 元素指定一个样式 | p { color: blue; } |
.marked{ } | 为所有 class="marked" 的元素指定一个样式 | .marked { background-color: yellow; } |
.marked p{ } | 为所有 class="marked" 元素内的 p 元素指定一个样式 | .marked p { font-weight: bold; } |
p.marked{ } | 为所有 class="marked" 的 p 元素指定一个样式 | p.marked { color: red; } |
CSS 尺寸(Dimension)
属性 | 描述 |
height | 设置元素的高度 |
line-height | 设置行高 |
max-height | 设置元素的最大高度 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |
CSS 显示(Display)和可见性(Visibility)
隐藏元素
属性 | 是否占据空间 |
display | 否 |
visibility | 是 |
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
块元素和内联元素
- 块元素是一个元素,占用了全部宽度,在前后都是换行符
- 内联元素只需要必要的宽度,不强制换行
块和内联间的转换
li {display:inline;}
span {display:block;}
CSS 定位(Position)
position 的值
定位值 | 作用 |
static | 默认值,元素在文档流中正常排列。 |
fixed | 固定定位,元素相对于浏览器窗口进行定位,不会随滚动条滚动而改变位置,可以通过 top 、right 、bottom 、left 属性调整定位。 |
relative | 相对定位,元素相对于其正常位置进行定位,可以通过 top 、right 、bottom 、left 属性调整定位。 |
absolute | 绝对定位,元素相对于其最近的已定位祖先元素进行定位,如果没有已定位的祖先元素,则相对于 <html> 元素进行定位,可以通过 top 、right 、bottom 、left 属性调整定位。 |
sticky | 粘性定位,元素在跨越特定阈值前为相对定位,之后为固定定位,可以通过 top 、right 、bottom 、left 属性调整定位。 |
重叠的元素
- z-index 属性指定了元素的堆叠顺序
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
CSS 溢出(Overflow)
值 | 描述 |
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit | 规定应该从父元素继承 overflow 属性的值。 |
CSS 浮动(Float)
属性 | 描述 | 值 |
clear | 指定不允许元素周围有浮动元素 | left, right, both, none, inherit |
float | 指定一个盒子是否可以浮动 | left, right, none, inherit |
CSS 水平&垂直对齐
元素居中对齐
- 可以使用 margin: auto
- 如果没有设置 width 属性,居中对齐将不起作用
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
文本居中对齐
- 可以使用 text-align: center
.center {
text-align: center;
border: 3px solid green;
}
图片居中对齐
- 可以使用 margin: auto
- 要将图片放到 块 元素中
img {
display: block;
margin: auto;
width: 40%;
}
左右对齐
position: absolute
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
float
.right {
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
垂直居中
.center {
padding: 70px 0;
border: 3px solid green;
}
CSS 组合选择符
组合选择符 | 描述 | 示例 |
后代选择器 | 选择所有符合条件的后代元素 | div p 选中所有 <p> 元素,其父元素是 <div> 的元素 |
子选择器 | 选择所有符合条件的直接子元素 | div > p 选中所有直接子元素是 <p> 的 <div> 元素 |
相邻兄弟选择器 | 选择所有符合条件的相邻兄弟元素 | h1 + p 选中紧接在 <h1> 元素后的第一个 <p> 元素 |
后续兄弟选择器 | 选择所有符合条件的兄弟元素(不一定是相邻的) | h1 ~ p 选中所有在 <h1> 元素后的 <p> 元素(不包括紧接在 <h1> 后面的第一个 <p> 元素) |
CSS 伪类(Pseudo-classes)
语法
- 伪类用来添加一些选择器的特殊效果
selector:pseudo-class {property:value;}
selector.class:pseudo-class {property:value;}
anchor 伪类
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
伪类和 CSS 类
a.red:visited {color:#FF0000;}
<a class="red" href="css-syntax.html">CSS 语法</a>
CSS 伪元素
语法
- 伪元素用来添加一些选择器的特殊效果
selector:pseudo-element {property:value;}
selector.class:pseudo-element {property:value;}
伪元素和 CSS 类
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
伪元素 | 描述 |
::after | 在元素内容的最后面插入一个伪元素 |
::before | 在元素内容的最前面插入一个伪元素 |
::first-line | 选择元素的第一行 |
::first-letter | 选择元素的第一个字母 |
::selection | 选择用户选择的文本部分,例如在使用鼠标拖拽选择文本时的效果 |
::placeholder | 选择输入框中的占位符文本 |
::marker | 选择列表项的标记部分 |
::backdrop | 在一个弹出式元素(例如对话框)的后面添加一个半透明的背景 |
伪元素以两个冒号开始,但为了最佳实践,推荐使用两个冒号的写法
CSS 导航栏
导航栏 = 链接列表
导航条基本上是一个链接列表,所以使用 <ul> 和 <li> 元素非常有意义:
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
再删除边距和填充:
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
上面的例子中的代码是垂直和水平导航栏使用的标准代码。
垂直导航栏
在以上代码的基础上,加入垂直导航栏的样式:
a
{
display:block;
width:60px;
}
全屏高度的固定导航条
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* 全屏高度 */
position: fixed;
overflow: auto; /* 如果导航栏选项多,允许滚动 */
}
水平导航栏
方法一:内联列表项
li
{
display:inline;
}
方法二:浮动列表项
li
{
float:left;
}
a
{
display:block;
width:60px;
}
固定导航条
ul {
position: fixed;
top: 0;
width: 100%;
}
CSS 下拉菜单
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>鼠标移动到我这</span>
<div class="dropdown-content">
<p>marlin</p>
<p>www.marlin.red</p>
</div>
</div>
CSS 提示工具(Tooltip)
基础提示框
<style>
/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 悬停元素上显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">鼠标移动到这
<span class="tooltiptext">提示文本</span>
</div>
定位提示框
显示在右侧
.tooltip .tooltiptext {
top: -5px;
left: 105%;
}
显示在左侧
.tooltip .tooltiptext {
top: -5px;
right: 105%;
}
显示在头部
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
显示在底部
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left: 50%;
margin-left: -60px; /* 使用一半宽度 (120/2 = 60) 来居中提示工具 */
}
CSS 画廊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo1.jpg">
<img src="http://static.runoob.com/images/demo/demo1.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo2.jpg">
<img src="http://static.runoob.com/images/demo/demo2.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo3.jpg">
<img src="http://static.runoob.com/images/demo/demo3.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="http://static.runoob.com/images/demo/demo4.jpg">
<img src="http://static.runoob.com/images/demo/demo4.jpg" alt="图片文本描述" width="300" height="200">
</a>
<div class="desc">这里添加图片文本描述</div>
</div>
</div>
</body>
</html>
CSS 图像透明
img
{
opacity:0.4;
}