CSS颜色表示
RGB/RGBA
- R，Red
- G，Green
- B，Blue
- A，Alpha，控制透明度
h1 { color: rgb(255,255,255); }
h2 { color: rgb(100%,0%,0%); }
/* 半透明 */
h3 { color: rgba(255,255,255,0.5); }
HEX/HEXA
- HEX，十六进制
- A，Alpha，控制透明度
h1 { color: #FFFFFF; }
/* 简写 #AABBCC -> #ABC */
h2 { color: #ABC; }
/* 半透明 */
h3 { color: #FFFFFF88; }
HSL/HSLA
- H，Hue，色相
- S，Saturation，饱和度
- L，Lightness，亮度
- A，Alpha，控制透明度
/* 360 degree */
h1 { color: hsl(360deg, 100%, 50%); }
/* 半透明 */
h1 { color: hsla(360deg, 100%, 50%, 50%); }
CSS字体属性
p {
/* 字体大小 */
font-size: 16px;
/* 字体族：使用微软雅黑或其他非衬线字体 */
font-family: "微软雅黑,sans-serif";
/* 字体风格：normal italic（字体斜体） oblique（强制斜体） */
font-style: normal;
/* 字体粗细：lighter normal bold bolder [100,1000] */
font-weight: lighter;
/* 字体复合属性：按 字体族>字体大小 的倒序 */
font: bold italic 16px sans-serif;
}
CSS文本属性
p {
/* 文本颜色 */
color: red;
/* 文本间距：字符间距 */
letter-spacing: 5px;
/* 文本间距：单词间距 */
word-spacing: 10px;
/* 文本修饰：overline(上划线) dotted(虚线) 红色 */
text-decoration: overline dotted red;
/* 文本修饰：underline(下划线) wavy(波浪形) 红色 */
text-decoration: underline wavy red;
/* 文本修饰：line-through(删除线) 红色 */
text-decoration: underline red;
/* 文本修饰：none(无修饰) */
text-decoration: none;
/* 文本缩进 */
text-indent: 16px;
/* 文本对齐：left center right */
text-align: center;
}
CSS字体基线
字体设计时有一条基准线，基准线以小写字母x的最下端画一条水平线，就是基准线
CSS文本行高
在浏览器中选中字体，字体所呈现的背景色高度就是行高；
line-height不建议小于font-size
/* 像素行高 */
p {
line-height: 100px;
}
/* 倍数行高 */
p {
line-height: 1.5;
}
CSS文本垂直排版
middle指的元素的中心与父元素的基线上的x的中心对齐（基线 + (x高度/2)）
p {
/* top baseline middle bottom */
vertical-align: middle;
}
CSS列表相关属性
ul {
/* 列表符号样式 */
list-style-type: none;
/* 列表符号样式位置：inside outside */
list-style-position: inside;
/* 自定义图像符号 */
list-style-image: url("");
/* 复合属性 */
list-style: decimal inside url("")
}
CSS边框相关属性
table,td,th {
border-width: 1px;
border-color: black;
/* solid（实线） dotted（点线） dashed（虚线） */
border-style: solid;
}
/* 简写 */
table {
border: 1px black solid;
}
CSS表格特有属性
table {
/* 列宽：auto（自适应宽度） fixed（固定统一宽度） */
table-layout: auto;
/* 控制单元格间距 */
border-spacing: 0px;
/* 合并相邻单元格 separate(分开) collapse(坍缩) */
border-collapse: collapse;
/* 控制表格标题（caption）位置: top bottom */
caption-size: top;
}
CSS背景相关属性
div {
backgroud-color: white;
backgroud-image: url("");
/* 背景图的重复方式：repeat no-repeat repeat-x repeat-y */
backgroud-repeat: repeat;
/* 背景图片位置：left center right top center bottom */
background-position: center center;
/* 背景图片位置(坐标表示) */
background-position: 10px 10px;
/* 复合属性 */
backgourd: white url("") no-repeat 10px 10px;
}
CSS鼠标相关属性
div {
/* 光标样式：pointer move wait help */
cursor: pointer;
/* 自定义鼠标样式 */
cursor: url(""),pointer;
}
CSS常用长度单位
/* px */
div {
width: 200px;
height: 200px;
font-size: 20px;
}
/* em (元素中 font-size 的倍数) */
div {
width: 10em;
height: 10em;
font-size: 20px;
}
/* rem (根元素 html 中 font-size 的倍数) */
div {
width: 10em;
height: 10em;
}
/* 百分比（相对于父元素的百分比） */
p {
width: 50%;
height: 50%;
font-size: 100%;
}
CSS元素的显示模式（块、行内、行内块）
块元素，block
- 独占一行
- 默认宽度：铺满整个父元素
- 默认高度：由内容决定
- 可以通过 CSS 控制宽高
<html></html>
<body></body>
<h1></h1>
<div></div>
<p></p>
<ul></ul>
<ol></ol>
<li></li>
<table></table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<form></form>
<option></option>
行内元素，inline
- 不独占一行
- 默认宽度：由内容决定
- 默认高度：由内容决定
- 无法通过 CSS 控制宽高
<br>
<em></em>
<strong></strong>
<span></span>
<label></label>
<a></a>
行内块元素，inline-block
- 不独占一行
- 默认宽度：由内容决定
- 默认高度：由内容决定
- 可以通过 CSS 控制宽高
<img>
<th></th>
<td></td>
<input>
<select></select>
<button></button>
<iframe></iframe>
修改元素显示模式
div {
/* block inline inline-block none */
display: inline-block;
}
