css语法
Selector Dcclaration
Selector {Property: Value;}
CSS注释
CSS Selector(选择器)
id & class
id #id
class .class
插入样式表
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="*****.css">
</head>
内部样式表
<head>
<style>
Selector {Property: Value;}
</style>
</head>
内联样式表
<p style="Property: Value;">这是一个段落。</p>
CSS Background背景
简写属性时，属性值的顺序为：
background-color 背景色
background-image 背景图片
background-repeat 背景图方向重复
background-attachment 是否随页面滚动
background-position 位置定位
CSS Text 文本
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
CSS Fonts字体属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
CSS 链接
这四个链接状态是：
- a:link - 正常，未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
CSS ul列表属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
CSS Table 表格
border 指定CSS表格边框
border-collapse 折叠边框,设置表格的边框是否被折叠成一个单一的边框或隔开
Width height 定义表格的宽度和高度。
text-align 设置水平对齐方式，像左，右，或中心：
CSS 盒子模型
- Margin（外边距） - 清除边框区域。Margin没有背景颜色，它是完全透明
- Border（边框） - 边框周围的填充和内容。边框是受到盒子的背景颜色影响
- Padding（内边距） - 清除内容周围的区域。会受到框中填充的背景颜色影响
- Content（内容） - 盒子的内容，显示文本和图像
CSS Display - 块和内联元素
块元素是一个元素，占用了全部宽度，在前后都是换行符。
块元素的例子：
<h1>
<p>
<div>
内联元素只需要必要的宽度，不强制换行。
内联元素的例子：
<span>
<a>
CSS Positioning(定位)
CSS Float (浮动)
- CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
CSS 水平对齐(Horizontal Align)
- 中心对齐,使用margin属性,块元素可以把左，右页边距设置为"自动"对齐。
- 使用position属性设置左，右对齐,元素对齐的方法之一是使用绝对定位：
- 使用float属性设置左，右对齐
- 使用Padding设置垂直居中对齐
CSS伪类/元素
选择器 示例 示例说明
:link a:link 选择所有未访问链接
:visited a:visited 选择所有访问过的链接
:active a:active 选择正在活动链接
:hover a:hover 把鼠标放在链接上的状态
:focus input:focus 选择元素输入后具有焦点
:first-letter p:first-letter 选择每个<p> 元素的第一个字母
:first-line p:first-line 选择每个<p> 元素的第一行
:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 <]p> 元素
:before p:before 在每个<p>元素之前插入内容
:after p:after 在每个<p>元素之后插入内容
:lang(language) p:lang(it) 为<p>元素的lang属性选择一个开始值
CSS 导航条www.w3school.com.cn
CSS 图片库www.w3school.com.cn
