一、选择器：
- 标签选择器：
h1
{
color:red;
text-align:center;
}
- id选择器，id唯一
# para1
{
text-align:center;
color:red;
}
- class选择器，class可以为一组元素
. center
{
text-align:center;
}
- 不同选择器之间可以嵌套：
p. center
{
color:red;
#a {
text-align:center;
}
}
二、样式表三种插入方式：
- 外部样式表(External style sheet)
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
mystyle.css：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}
- 内部样式表(Internal style sheet)
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 内联样式(Inline style)
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
优先规则：内联样式 > id 选择器 > 类选择器 > 标签选择器
三、通用标签
| 属性 |
含义 |
| height |
设置元素的高度 |
| width |
设置元素的宽度 |
| line-height |
设置行高 |
| max-height |
设置元素的最大高度 |
| max-width |
设置元素的最大宽度 |
| min-height |
设置元素的最小高度 |
| min-width |
设置元素的最小宽度 |
四、背景属性
| 属性 |
含义 |
| background |
简写属性，作用是将背景属性设置在一个声明中 |
| background-attachment |
背景图像是否固定或者随着页面的其余部分滚动 |
| background-color |
设置元素的背景颜色 |
| background-image |
把图像设置为背景 |
| background-position |
设置背景图像的起始位置 |
| background-repeat |
设置背景图像是否及如何重复 |
简写：body {background:#ffffff url('img_tree.png') no-repeat right top;}
颜色定义：
- 十六进制 - 如："#ff0000"
- RGB - 如："rgb(255,0,0)"
- 颜色名称 - 如："red"
五、文本样式
| 属性 |
含义 |
| color |
设置文本颜色 |
| direction |
设置文本方向 |
| letter-spacing |
设置字符间距 |
| line-height |
设置行高 |
| text-align |
对齐元素中的文本 |
| text-decoration |
向文本添加修饰 |
| text-indent |
缩进元素中文本的首行 |
| text-shadow |
设置文本阴影 |
| text-transform |
控制元素中的字母 |
| unicode-bidi |
设置或返回文本是否被重写 |
| vertical-align |
设置元素的垂直对齐 |
| white-space |
设置元素中空白的处理方式 |
| word-spacing |
设置字间距 |
六、字体样式
| 属性 |
含义 |
| font |
在一个声明中设置所有的字体属性 |
| font-family |
指定文本的字体系列 |
| font-size |
指定文本的字体大小 |
| font-style |
指定文本的字体样式 |
| font-variant |
以小型大写字体或者正常字体显示文本 |
| font-weight |
指定字体的粗细 |
七、链接
| 属性 |
含义 |
| a:link{color:#000000;} |
未访问链接 |
| a:visited{color:#00FF00;} |
已访问链接 |
| a:hover{color:#FF00FF;} |
鼠标移动到链接上 |
| a:active{color:#0000FF;} |
鼠标点击时 |
八、列表
无序列表ul
有序列表ol
| 属性 |
含义 |
| list-style |
简写属性。用于把所有用于列表的属性设置于一个声明中 |
| list-style-image |
将图像设置为列表项标志 |
| list-style-position |
设置列表中列表项标志的位置 |
| list-style-type |
设置列表项标志的类型 |
九、盒子
| 属性 |
含义 |
| list-style |
外边距 |
| list-style-image |
边框 |
| list-style-position |
内边距 |
| list-style-type |
内容 |
十、显示
Display（显示），不占用空间
Visibility（可见性），影响布局
- 块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
- 内联元素(inline)特性：
和相邻的内联元素在同一行
display:block -- 显示为块级元素
display:inline -- 显示为内联元素
十一、定位
| 属性 |
含义 |
| static |
不受top, bottom, left, right影响 |
| relative |
相对其正常位置的偏移 |
| fixed |
元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动 |
| absolute |
绝对定位的元素的位置相对于最近的已定位父元素 |
| sticky |
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;它会固定在目标位置。 |
十二、Overflow
| 属性 |
含义 |
| visible |
默认值。内容不会被修剪，会呈现在元素框之外 |
| hidden |
内容会被修剪，并且其余内容是不可见的 |
| scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 |
| auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
| inherit |
规定应该从父元素继承 overflow 属性的值 |
overflow 属性只工作于指定高度的块元素上
在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)
十三、Float
- CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
- Float（浮动），往往是用于图像，但它在布局时一样非常有用。
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
网友评论