Skip to content
碎碎念
常用工具
CSS

CSS

约 10 分钟阅读 · 4808 字 · 次浏览

语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是需要改变样式的 HTML 元素,每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS 声明总是以分号 ; 结束，声明总以大括号 {} 括起来。
样式：选择器 {属性:值; 属性:值;}
示例：h1 {color:blue; font-size:12px;}

id 和 class

设置 CSS 样式需要在元素中设置"id" 和 “class"选择器。

在 HTML 和 CSS 中可以使用 id 选择器来给特定的 HTML 元素设置样式。HTML 里用 id="..." 来标记一个元素；而在 CSS 里，用 #id 名的方式来给这个元素设置样式。
示例：

#para1 {
  text-align: center;
  color: red;
}

class 选择器用来给一组 HTML 元素统一设置样式的。和 id 不同，同一个 class 可以用在多个元素上。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 号显示。
示例：.center{text-align:center;}

也可以指定特定的 HTML 元素使用 class。
示例（所有的 p 元素使用 class=“center” 让该元素的文本居中）：p.center{text-align:center;}

创建

类型写在哪里？示例
行内样式（Inline）写在 HTML 标签内部<p style="color:red">内容</p>
内部样式表（Internal）写在 HTML 文件 <style> 标签中放在 <head> 里
外部样式表（External）写在一个独立的 .css 文件里用 <link> 引入

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部。
示例：

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

其中rel表示这个链接的是一个“样式表”文件（stylesheet），type表示这个文件是 CSS 类型（可以省略，不强制），herf指定要加载的 CSS 文件路径，比如 mystyle.css 是同目录下的文件。
样式表文件的示例：

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url;}

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。
示例：

<head>
  <style>
    hr {
      color: sienna;
    }
    p {
      margin-left: 20px;
    }
    body {
      background-image: url;
    }
  </style>
</head>

内联样式

在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
示例：<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

优先级：内联样式 > 内部样式 > 外部样式。

背景

背景颜色

background-color 属性定义了元素的背景颜色。页面的背景颜色使用在 body 的选择器中。
示例：body {background-color:#b0c4de;}

颜色值定义：

  • 十六进制，如#ff0000
  • rgb，如rgb(255,0,0)
  • 颜色名称，如"red"

背景图像

background-image 属性描述了元素的背景图像。默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
示例：body {background-image:url('paper.gif');}

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
background-repeat 可以设置平铺的方向（参数为 repeat-x，repeat-y 和 no-repeat）。
示例：

body {
  background-image: url;
  background-repeat: repeat-x;
}

background-position 属性可以改变图像在背景中的位置。参数：left center right；top bottom；和两者的组合。
示例：...background-position:right top;...

背景属性简写

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中。背景颜色的简写属性为 “background”。
属性值顺序：

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

示例：body {background:#ffffff url('img_tree.png') no-repeat right top;}

文本

属性作用常用取值/参数
color设置文本颜色颜色名（red）、十六进制（#ff0000）、RGB（rgb(255,0,0)）等
direction设置文本方向（从左到右或从右到左）ltr（从左到右）、rtl（从右到左）
letter-spacing设置字符之间的间距正数增加间距：2px，负数减少间距：-1px，normal（默认）
line-height设置文本的行高比例值：1.5，长度：20px，百分比：150%，normal（默认）
text-align设置文本的水平对齐left、right、center、justify（两端对齐）
text-decoration添加文本修饰线（如下划线、删除线）none、underline（下划线）、line-through（删除线）、overline（上划线）
text-indent设置首行缩进像素（20px）、百分比（5%）
text-shadow设置文本阴影例：2px 2px 5px gray（右下方向，模糊 5px，灰色）
text-transform控制字母大小写none（无变化）、capitalize（每个单词首字母大写）、uppercase（全大写）、lowercase（全小写）
unicode-bidi控制双向文本（与 direction 配合使用）normal、embed、bidi-override
vertical-align设置元素的垂直对齐baseline、middle、top、bottom、sub、super、px 值等
white-space设置空白字符（空格、换行）的处理方式normal（默认）、nowrap、pre、pre-wrap、pre-line
word-spacing设置单词之间的间距像素：10px，normal（默认）
p {
  color: #333;
  text-align: justify;
  line-height: 1.6;
  text-indent: 2em;
  letter-spacing: 1px;
  word-spacing: 3px;
  text-shadow: 1px 1px 2px gray;
}

字体

属性作用说明常用取值示例 / 说明
font-family设置字体系列"Times New Roman"、Arial、"宋体"，多个用逗号分隔，最后常加 serif（衬线字体）、sans-serif（无衬线）、monospace（等宽）作为回退字体
font-style控制字体是否为斜体normal（正常）、italic（斜体）、oblique（倾斜，兼容性较差）
font-size设置字体大小15px、1.2em、120%、1rem 等；百分比或 em 通常相对于父元素字体大小
font-weight设置字体粗细normal、bold、lighter、bolder，或具体数字如 400、700
font-variant控制小型大写字母（small-caps）显示normal、small-caps
line-height设置行高normal、具体数值：1.5、20px、150%
font（简写）简写所有字体属性（顺序：style → variant → weight → size/line-height → family）例如：font: italic small-caps bold 16px/1.5 Arial, sans-serif;

链接

链接状态：

  • a:link：正常，未访问过的链接
  • a:visited：用户已访问过的链接
  • a:hover：当用户鼠标放在链接上时
  • a:active：链接被点击的那一刻

示例：

a:link {
  color: #000000;
}
a:visited {
  color: #00ff00;
}
a:hover {
  color: #ff00ff;
}
a:active {
  color: #0000ff;
}

顺序规则：

  • a:hover 必须跟在 a:link 和 a:visited 后
  • a:active 必须跟在 a:hover 后

background-color指定链接的背景色
示例：a:link {background-color:#B2FF99;}

列表

html 中的列表：

  1. 无序列表ul
  2. 有序列表ol

list-style-type属性指定列表项标记的类型。
示例：

ul.a {
  list-style-type: circle;
}
ol.d {
  list-style-type: lower-alpha;
}

具体参数：

  • 无序列表的 list-style-type：dics（实心圆），circle（空心圆），square（实心方块），none（无标记）。
  • 有序列表的 list-style-type：decimal（1，2……），demical-leading-zero（01，02……），lower-alpha，upper-alpha，lower-roman，upper-roman，none。
  • 图像：直接用 url。
  • margin：设置内边距
  • padding：设置外边距

示例：

ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}
ul li {
  background-image: url(sqpurple.gif);
  background-repeat: no-repeat;
  background-position: 0px 5px;
  padding-left: 14px;
}

表格

  • table：表格的外层容器
  • tr：Table Row 表格行
  • th：Table Header 表格单元头
  • td：Table Data 数据单元格

border设置边框。
示例：table, th, td {border:1px solid black;}

border-collapse设置边框是否被折叠成一条线。
示例：table {border-collapse:collapse;}

width和height设置表格的宽度和高度。
示例（表格宽度 100%，表头高度 50 像素）：

table {
  width: 100%;
}
th {
  height: 50px;
}

text-align设置水平对齐方式（left，right，center，justfy），vertical-align设置垂直对齐方式（top，middle，bottom……）。
示例：

td {
  text-align: left;
  vertical-align: bottom;
}

设置颜色：
边框颜色在 border 的第三个参数设置，文本文字在 color 设置，背景颜色在 background-color 设置。

盒子模型

从外到内：margin -> border -> padding -> content
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

示例：

div {
  width: 220px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

边框

border-style用于指定要显示的边框类型。

取值含义说明
none无边框默认，无边框显示
hidden隐藏边框与 none 类似，主要用于冲突处理
dotted点状边框由点组成的边框
dashed虚线边框由短线段组成的边框
solid实线边框连续的实线
double双线边框两条实线，宽度与 border-width 相同
groove3D 沟槽边框根据 border-color 显示沟槽效果
ridge3D 脊状边框根据 border-color 显示脊状效果
inset3D 嵌入边框根据 border-color 显示嵌入效果
outset3D 突出边框根据 border-color 显示突出效果

border-width设置边框宽度。
参数：thick，medium，thin，或用 px 设置。
示例：

p.one {
  border-style: solid;
  border-width: 5px;
}

border-color设置边框颜色。
border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式。
颜色可设置为 transparent。
示例：

p.one {
  border-style: solid;
  border-color: red;
}

border-top-style，border-right-style，border-bottom-style，border-left-style 可以给不同侧面设置不同边框。
示例：

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

上面四个可以合并成 border-style 一个属性。

  • 4 个参数：上，右，下，左
  • 3 个参数：上，左右，下
  • 2 个参数：上下，左右
  • 1 个参数：四周

border是 border-width，border-style，border-color 的简写

轮廓

属性名说明常用值（示例）CSS 版本
outline在一条声明中设置所有轮廓属性组合 outline-color、outline-style、outline-width 等CSS2
outline-color设置轮廓颜色颜色名称（red）、十六进制（#ff0000）、RGB（rgb(255,0,0)）、invert、inheritCSS2
outline-style设置轮廓样式none、dotted、dashed、solid、double、groove、ridge、inset、outset、inheritCSS2
outline-width设置轮廓宽度关键词：thin、medium、thick；长度单位（如 2px）；inheritCSS2

外边距

属性说明取值/示例
margin简写属性，一次性设置四个方向的外边距margin: 25px 50px 75px 100px; （上 右 下 左）
margin-top设置元素的上外边距100px, 2em, 10%, auto
margin-right设置元素的右外边距同上
margin-bottom设置元素的下外边距同上
margin-left设置元素的左外边距同上
取值说明
auto由浏览器决定边距大小，常用于水平居中
<length>固定长度，如像素（px）、点（pt）、em、cm 等
%百分比值，相对于包含块宽度
负值（如 -10px）允许使用负值，实现内容重叠

简写属性 margin 的用法示例：

写法含义描述
margin: 25px;上、右、下、左边距均为 25px
margin: 25px 50px;上下 25px，左右 50px
margin: 25px 50px 75px;上 25px，左右 50px，下 75px
margin: 25px 50px 75px 100px;上 25px，右 50px，下 75px，左 100px

填充

属性名说明示例
padding简写属性，设置四个方向的内边距padding: 10px 20px 30px 40px
padding-top设置元素顶部的内边距padding-top: 10px
padding-right设置元素右侧的内边距padding-right: 20px
padding-bottom设置元素底部的内边距padding-bottom: 30px
padding-left设置元素左侧的内边距padding-left: 40px
写法示例含义说明
padding: 25px四个方向全部为 25px
padding: 25px 50px上下为 25px，左右为 50px
padding: 25px 50px 75px上为 25px，左右为 50px，下为 75px
padding: 25px 50px 75px 100px上为 25px，右为 50px，下为 75px，左为 100px

padding 支持的单位：

单位示例说明
pxpadding: 20px像素
empadding: 2em相对于当前字体大小
%padding: 10%相对于父元素的宽度
rempadding: 1rem相对于根元素的字体大小
ptpadding: 10pt点（在网页中较少用）

padding 特性：

  • padding 不影响内容大小，但会增大元素总尺寸（除非使用 box-sizing: border-box）。
  • padding 填充的区域会被背景颜色覆盖。
  • padding 是内边距，不同于 margin（外边距）。

分组和嵌套选择器

分组选择器：将多个选择器合并在一起，用逗号分隔。
示例：

h1, h2, p {
  color:green;
}

嵌套选择器：适用于选择器内部的选择器的样式。
在下面的例子设置了四个样式：

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class=“marked” 的元素指定一个样式。
  • .marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
MkDocstmux