更新至第三章 css样式 【完】
css样式
1 2 3 4 5 6 7 8
| p{ font-size: 12px; color: blue; font-weight: bold; }
|
css添加方法
优先级:行内>内嵌>链接>浏览器默认
行内
1 2 3
| <p style = "color:red"> balabala </p>
|
内嵌
1 2 3 4 5 6 7 8
| <head> <style type="text/css"> p{ color: red; } </style> </head>
|
文件
1 2 3 4
| <head> <link rel="stylesheet" href="css/style.css" />
</head>
|
css选择器
标签选择器
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| <style type="text/css"> body{ background-color: #ccc; text-align: center; font-size: 12px; font: "黑体"; color: red; } hr{ width: 200px; } </style>
|
类别选择器
1 2 3 4 5
| <style type="text/css"> p{font-size:12px;} .one{font-size:18px;} .two{font-size:24px} </style>
|
1 2 3
| <p> bala </p> <p class="one">bala</p> <p class="two">bala</p>
|
ID选择器
1 2 3 4
| <style type="text/css"> #one{font-size:12px;} #two{font-size:24px;} </style>
|
1 2
| <p id="one">bala</p> <p id="two">bala</p>
|
ID选择器与类别选择器的区别: * 类别选择器可以多次引用、混用。混用以空格分开 * ID选择器在当前页面是“唯一的引用一次”,可以与class混用,但是不可以多个同时使用
1
| <div id="id1" class="class1 class2">
|
嵌套声明
1 2 3 4 5
| <style type="text/css"> p span{ color: red; } </style>
|
1
| <p><span>bala</span></p>
|
集体声明
1 2 3 4 5
| <style type="text/css"> h1,p{ text-align:center; } </style>
|
1 2
| <h1>bala</h1> <p>bala</p>
|
全局声明
1 2 3 4 5
| <style type="text/css"> * { text-align:center; } </style>
|
css的文字样式
单位与颜色
层次:
html —> head/body —> div —> h1/p
red |
颜色名 |
rgb(255,0,0) |
RGB值 0,0,0为黑 |
rgb(100%,0%,0%) |
RGB百分比值 |
rgba(255,0,0,1.0) |
RGB值和透明度 0透明,1完全不透明 |
#ff0000 |
十六进制数 去掉重复位#f00 |
文本
color |
文本颜色 |
red #f00 rgb(255,0,0) |
letter-spacing |
字符间距 |
2px -3px |
line-height |
行高 |
14px 1.5em 120% |
text-align |
对齐 |
center left right justify |
text-decoration |
装饰线 |
none overline underline line-though |
text-incent |
首行缩进 |
2em |
当line-height==height时,文字垂直居中
font |
所有字体属性一块设置 |
font:italic bond 18px/1.5em '幼圆' |
font-family |
字体系列 |
第一个没有就加载第二个... |
font-size |
字号 |
14px 120% |
font-style |
斜体 |
italic |
font-weight |
粗体 |
bold |
1 2
| font:italic bond 18px/1.5em '幼圆'; // 斜体 粗体 字号/行高 字体
|
css的背景与超链接
background |
background: #00FF00 url(bgimage.gif) no-repeat fixed top; |
background-color |
|
background-image |
background-image: url("../../media/examples/lizard.png"); |
background-repeat |
repeat 棋盘状填充 repeat-x/y 横/纵向填充一排/列 no-repeat 就一个 |
1 2 3 4 5
| div{ height:30px; width:600px; background: url("images/bg1.gif") repeat-x; }
|
a |
所有链接 |
a:link |
普通、未被访问的链接 |
a:visited |
用户已访问的链接 |
a:hover |
鼠标指针位于链接上方悬停 |
a:active |
链接被点击的时刻 |
: 伪类选择器
顺序:
a:link/visited -> a:hover -> a:active
列表与表格
css列表
list-style |
所有列表属性 |
list-style-image |
为列表项标志设置图像 |
list-style-position |
标志的位置 |
list-style-type |
标志的类型 |
none |
无 |
disc |
默认,空心圆 |
circle |
空心圆 |
square |
实心方块 |
decimal |
数字 |
lower-roman |
小写罗马数字 |
upper-roman |
大写罗马数字 |
lower-alpha |
小写英文字母 |
upper-alpha |
大写英文字母 |
lower-Greek |
小写希腊字母 |
lower-latin |
小写拉丁字母 |
upper-latin |
大写拉丁字母 |
inside |
列表项标号在文字里 |
outside |
列表项标号在文字外 |
3mpaqA.jpg
css表格
设置表格的宽和高 1 2 3 4 5 6
| table{ width: 500px; height: 200px; }
|
设置表格的框 1 2 3 4
| table,td,th{ border: 1px solid #eee }
|
表格框合并 1 2 3 4
| table{ border-collapse:collapse;
}
|
奇偶选择器 tr:nth-child(odd):奇数 tr:nth-child(even):偶数
1 2 3 4
| tr:nth-child(odd){ background: #EAF2D3 }
|