2018/7
1.语法：
选择题：{属性：值}
- 值为若干单词则加上双引号
- 多个申明分号分割
2.属性：
- font-family 字体
- font-style
3.派生选择器
将某元素属性单独设置即可
1
2
3
4
li strong {
font-style: italic;
font-weight: normal;
}
4.id选择器
#red {color:red;}
用于建立派生选择器：
1
2
3
4
5
#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
5.类Class选择器
.center {text-align: center}
6.属性选择器
1
2
3
4
[title]
{
color:red;
}
7.样式表
-
外部样式表
1 2 3
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
-
内部样式表
1 2 3 4 5 6 7
<head> <style type="text/css"> hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");} </style> </head> -
内联样式
1 2 3
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
8.背景
- background-color: gray; 背景颜色
- background-image: url(/i/xx.gif); 背景图片
- background-repeat: repeat-x/y; 横向/纵向平铺
- background-position: top/bottom/left/right/center/50% 50%/50px 50px; 背景位置
- background-attachment:fixed 背景在可视区固定
9.文本
- 缩进文本(首行缩进)：
p {text-indent: 5em/20%;} 百分比是相对于父元素的宽度而言 - 水平对齐：
text-align: left/right/center(只影响文本)/<CENTER>(还影响元素居中)/justify -
字间隔/字母间隔： word-spacing/letter-spacing
1 2 3
p.tight {word-spacing: -0.5em;} h1 {letter-spacing: -0.5em} em:是网页浏览器的基础文本尺寸的高度 - 字符转换：
text-transform:none/uppercase/lowercase/capitalize - 文本装饰：text-decoration:none\underline\overline\line-through\blink
- 空白符：
p {white-space: normal;}
10.字体
font-family:
- 五种通用字体：
Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
font-style:
- 三个值：
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
- 字体变形：
font-variant: - 字体加粗：
font-weight:normal(400)/bold/900(100~900) - 字体大小：
font-size:px/em/%
11.链接
- 4种状态
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
1
2
3
4
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
12.列表
- 列表类型
ul {list-style-type: square} - 列表项图像
ul li {list-style-image: url(xxx.gif)} - 列表标志位置
list-style-position: - 简写列表样式
li {list-style : url(example.gif) square inside}
13.表格
html补充：tr一行、td一项
-
表格边框
table, th, td { border: 1px solid blue; }
-
折叠边框：多边框或单边框
1 2 3 4 5 6 7 8 9
table { border-collapse:collapse; } table,th, td { border: 1px solid black; } - 表格文本对齐
text-align/vertical-align:水平/垂直对齐 - 表格内边距
padding:15px;
14.轮廓
outline-color/style/width
15.调试
通过Chrome的控制台设置CSS进行调试方便查看CSS变化。
2019/1
CSS Position: static/absolute/relative/fixed/sticky
- static(default): The static postioned element will not be affected by the top, bottom, left, right properties.
- relative: base on the normal position.
- fixed: It is positioned relative to the viewport. It will stay in the same place while the page is scrolled.
- absolute: It is positioned relative to the nearest ancestor. If it has no ancestor, it will take document body as an ancesotr.
- sticky: It combines the relative and fixed.