Backgrouds:
background-color
background-image
Background-repeat:repeat repeat-x repeat-y no-repeat inherit
Background-attachment: fixed scroll local initial inherit
Background-position
Text
Color
Text-align:文本排列属性。 Center right left. justify(每一行被展开为宽度相等,左右外边距是对齐的
text-decoration:文本修饰
text-transform:文本转换 uppercase lowercase capitalize(将每个单词的首字母大写)
text-indent:文本缩进
text-sahdow:设置文本阴影
Vertical-align:设置元素的垂直对齐
white-space:设置元素中空白的处理方式
word-spacing:设置字间距 (想设置英文单词之间的间距,可以使用 word-spacing 来实现。)
letter-spacing:设置字符间距。(letter-spacing 这个样式使用在英文单词时,是设置字母与字母之间的间距。)
字体
Font-family:字体
font-size:大小
font-style:字体样式
font-weight:字体的粗细
链接
link
a:link
a:visited 已经访问过的
a:hover 当鼠标放在链接上
a:active 链接被点击的那一刻
ul 无序列表
ol 有序列表
List-style
List-style-image
List-style-position
List-style-type 列表样式
table
Table Tr行 Td 列 Th表头
盒子模型
width=content 是标准模式
width =content +border+ padding 是ie模式
content border padding margin
边框属性
- Border-style 属性
none
dotted:点线边框
dashed:定义虚线边框
solid:定义实线边框
double:定义两个边框
border:border-width border-style border-color
Css margin
Margin:auto 设置浏览器边距
margin-bottom left right top
css padding
bottom left right top
嵌套选择器
p{}:为所有p元素指定一个样式 .yyy{}:所有class为yyy的元素指定一个样式 .yyy p{}:为所有class是yyy的元素内的p元素指定一个样式 p.yyy{}:为所有class是yyy的p元素指定一个样式
Line-height 设置行高
display
display:none 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
visibility:hidden 可以隐藏某个元素 但隐藏的元素仍需占用与未隐藏元素之前一样的空间
Display:inline 显示为内联元素
display:block 显示为块级元素
display:inline-block 显示为内联块元素
Position定位
普通流 浮动 绝对定位
static
relative
fixed
absolute
sticky
Css 选择器
元素选择器
类选择器 class .
ID选择器 id # 与类不同 在同一个html文档中id选择器会使用一次
属性选择器
后代选择器
子元素选择器 >
相邻兄弟选择器 +
伪类选择器:
- :active
- :focus
- :hover
- :link 向未被访问的链接添加样式
- :visited 向已被访问的链接添加样式
- :first-child 向元素的第一个子元素添加样式
伪元素: 不属于文档 js无法操作它 无法审查元素 不利于调试
- first-line: 用于向文本的首行设置特殊样式 只能用于块级元素
- first-letter:向文本的首字母设置特殊样式
- before 在元素的内容的前面插入新内容
- :after
css 分类属性
clear
Cursor:规定当指向某元素之上时显示的指针类型
透明度
opacity