CSS2 基础
background 背景
css 背景
- background-color 元素的背景颜色
- background-image 元素的背景图像
- background-repeat 页面的水平或者垂直方向平铺
- background-position 设置定位与不平铺
- background-attachment 设置定位与不平铺
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
背景简写 (简写顺序)
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {background:#ffffff url('img_tree.png') no-repeat right top;}
文本格式
文本颜色
- color: #ccc
- 十六进制 如: ＃FF0000
- RGB值 如: RGB(255,0,0)
- 代号 如: red
文本对齐方式
text-align: center
- center 居中
- right 右
- left 左
- justify 每一行宽度相等
文本修饰
text-decoration 设置或者擅长文本的装饰
- overline上划线
- line-through 中间线
- underline 下划线
a {text-decoration:none;}
文本缩进
text-index 用于指定文本的第一行缩进
p {text-indent:50px;}
文本转换
text-transform
- uppercase 首字母大写
- lowercase 首字母小写
- capitalize 每个单词的首字母大写
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
字体
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
p.ex2
{
font:italic bold 12px/30px Georgia, serif;
}
字体系列
font-family 属性设置文本的字体系列。
p{font-family:"Times New Roman", Times, serif;}
字体样式
ont-style 主要是用于指定斜体文字的字体样式属性。
- 正常 - 正常显示文本
- 斜体 - 以斜体字显示的文字
- 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
字体大小
font-size 属性设置文本的大小。
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
文本的粗细
font-weight 属性设置文本的粗细
- normal
- bold
- bolder
- lighter
- 0-900
链接
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
链接状态
- a:link 正常
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
列表
不同的列表项标记
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
作为列表项标记的图像
ul
{
list-style-image: url('sqpurple.gif');
}
移除默认设置
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
表格
使用 CSS 可以使 HTML 表格更美观。
表格边框
指定CSS表格边框，使用border属性。
table, th, td
{
border: 1px solid black;
}
折叠边框
border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
表格宽度和高度
Width和height属性定义表格的宽度和高度。
table
{
width:100%;
}
th
{
height:50px;
}
表格文字对齐
td
{
text-align:right;
}
/**垂直对齐属性设置垂直对齐，比如顶部，底部或中间：**/
td
{
height:50px;
vertical-align:bottom;
}
表格填充
如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
td
{
padding:15px;
}
表格颜色
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
盒子模型
CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
元素的宽度和高度
重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
边框
CSS 边框属性
CSS边框属性允许你指定一个元素边框的样式和颜色。
边框样式
border-style 值:
- none: 默认无边框
- dotted: 定义一个点线边框
- dashed: 定义一个虚线边框
- solid: 定义实线边框
- double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
- groove: 定义3D沟槽边框。效果取决于边框的颜色值
- ridge: 定义3D脊边框。效果取决于边框的颜色值
- inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
- outset: 定义一个3D突出边框。 效果取决于边框的颜色值
边框宽度
您可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
边框颜色
border-color属性用于设置边框的颜色。可以设置的颜色：
- name - 指定颜色的名称，如 "red"
- RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
- Hex - 指定16进制值, 如 "#ff0000"
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
边框-单独设置各边
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
边框-简写属性
- border-width
- border-style (required)
- border-color
轮廓属性
外边距
CSS margin(外边距)属性定义元素周围的空间。
margin
margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
可能的值
| 值 | 说明 |
|---|---|
| auto | 设置浏览边距 |
| length | 定义一个固定的margin |
| % | 定义一个使用百分比的边距 |
Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
margin:100px 50px;
顺序
上右下左