这是原笔记和参考文档的合并转写。 —— 2019.12.7

CSS 用于给 HTML 添加样式。

插入样式

外部、内部、内联样式表,优先级依次递增:

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

<style type="text/css">
	...
</style>

<p style="color:#111;">
</head>

基础语法

标签 / 属性 / id / 类 / 派生 / 子元素 / 相邻兄弟选择器以及声明:

body,
[title=xxx],
#body,
.body,
.body *,
.body > strong,
.body + p {
	font-family: serif;
	text-align: center;
	line-height: 1.7;
	background-color: #111;
}

基本样式

背景:

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;

background-color
background-image
background-repeat
background-attachment
background-position

文本:

text-align
text-decoration

text-indent
text-transform

word-spacing
letter-spacing
white-space
direction

字体:

font-family: Georgia, 'New York', serif;

font-size
font-style
font-weight

font-variant

链接:

a:link
a:visited
a:hover
a:active

列表:

list-style: url(example.gif) square inside

list-style-image
list-style-type
list-style-position

表格:

border: 1px solid blue;
border-collapse: collapse;

border-spacing
vertical-align

轮廓:

outline: #00ff00 dotted 3px;

outline-color
outline-style
outline-width

盒模型

这是现在标准的盒模型,在此之前,IE 的 widthheight 是包括到边框的。

  • 相邻、包含元素间的 margin 会彼此重合
  • 元素方向顺序:上右下左

1_盒模型.gif

width
height

margin
padding

border
border-width
border-style
border-color

定位

首先明确一下元素类型:

  • 行内元素:占用一行,从左到右
  • 行内块级元素:占用一块,从左到右
  • 块级元素:占用一块,从上到下
display: inline;
display: inline-block;
display: block;

然后进行定位:

position: static; /* 默认值 */
position: relative; /* 相对元素原有位置偏移,其仍然占据原本的空间 */
position: absolute; /* 绝对定位:脱离文档流,相对页面边缘定位 */
position: fixed; /* 绝对定位:脱离文档流,相对浏览器窗口定位 */

top
right
bottom
left

z-index

关于浮动:

浮动最初只是用于制作包围文本的图片,现在常用来布局。
一旦元素被浮动,它就脱离文档流,相同父元素的元素们可以浮动到同一流中。

float: right;

伪类和伪元素

伪类和伪元素用于向某些选择器设置特殊效果:

p:first-child; /* 匹配第一个 <p> 元素 */
q:lang(no); /* 匹配语言为 no 的 <q> */

p:first-line; /* 匹配 <p> 自动换行后的第一行 */
p:first-letter; /* 匹配 <p> 文本的首字母 */

/* 在 h1 前后插入图像 logo.gif */

h1:before,
h1:after {
	content: url(logo.gif);
}

常用单位

  • px:像素值
  • em:相对浏览器设定的标准尺寸
  • rem:相对 HTML 根元素的尺寸
  • 50%:相对父元素的百分比

更进一步

块级元素布局:

/* 水平居中 */

width: 70%;
margin: auto;

/* 绝对定位右对齐 */

position: absolute;
right: 0px;

/* 浮动对齐 */

float:right;

尺寸:

max-height
max-width

min-height
min-width

line-height

特殊效果:

display: none; /* 隐藏元素 */
cursor /* 绘制不同光标 */

水平导航栏效果:

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

a {
	display: block;
	width: 60px;
}

li {
	display: inline;
	float: left;
}

即去除浏览器默认样式后,行内化 <li>,并进行浮动成为一行。
实际上 <ul><li> 常被应用来做各种嵌套的单元项目。

图片透明度:

opacity: 0.4;
filter: alpha(opacity=40); /* 针对 IE8 以及更早的版本 */

媒介类型:

@media screen {}
@media print {}
@media screen, print {}

@media screen {} 在之后常被用来制作响应式网页。

一些好习惯

  • 勤换行
  • 在每条规则后都加上分号
  • 将 id 留给脚本,全面使用类选择器

附:CSS 参考手册