第14 章CSS 文字与文本
1.CSS 中长度与颜色
2.CSS 中的文字属性
3.CSS 中的文本属性
14.1 CSS 中长度与颜色
长度单位说明
in 英寸
cm 公分
mm 公里
cm 以目前字体高度为单位
ex 以小写字母高度为单位（大部分不支持）
pt 1pt/72英寸
pc 1pc/12pt
px 像素（推荐使用）
颜色单位： 说明
十六进制如：color:#ff0000
颜色名称如：color:red
三原色单位如：rgb(255,0,0)
一般最常用的是十六进制，三原色单位的原理【红（r）,绿（g）,蓝(b)】混合而成。。 每个值域在0－255之间
14.2 CSS 中的文字属性
属性名称属性值说明
font-style normal 正常显示
italic 斜体
font-variant normal 正常显示
small-caps 将英文大小写字母写调为同宽
font-weight normal 正常显示
bold 粗体
font-size 像素字体大小
百分比字体大小
font-family 字体名称设置字体名称
font属性简化的使用方法：
font:是否斜体是否同宽是否粗体大小字体名称
例如:font:italic bold 200 隶书；
14.3 CSS中的文本属性
属性名称属性值说明
color 十六进制颜色
英文名称颜色
三原色单位颜色
letter-spacing normal 正常显示
长度文本间隔
word-spacing normal 正常显示
数字单词间距
white-space normal 文本自动处理换行
pre 换行和空白受保护
nowrap 强制在同一行显示
text-align left 文字靠左
right 文字靠右
center 文字靠中
text-decoration none 正常显示
underline 加上下划线
overline 加顶线
line-through 加删除线
text-indent 长度首行缩进
百分比同上
line-height 像素行高
数字/百分比行高
主讲：李炎恢
第3页共3页PHP100 视频教程
text-transform none 正常显示可以包含大，小字符 capitalize 字符串第一个字符大写
uppercase 设置大写字符
lowercase 设置小写字符
vertical-align sub 设置文字为下标。
super 设置文字为上标。
top 元件往上端靠齐。
middle 设置文字是在中线位置。
bottom 元件往下端靠齐。
第15 章CSS 背景与列表
1.CSS 中背景的使用
2.CSS 中列表的使用
15.1 CSS 中背景的使用
属性名称属性值说明
background-attachment scroll 设置背景图像会随视窗滚动 条的移动而移动。
fixed 设置背景图像不会随视窗滚动条
的移动而移动。
background-color 十六进制background-color:#ff0000; 英文名称background-color:red;
三原色background-color:rgb(255,0,0)
transparent background-color:transparent;透明
background-image URL background-image:url("bg.jpg") 背景图片
none 不设置背景图片
background-position top left 设置背景图案出现在上左方。 top center 设置背景图案出现在上方中间。
top right 设置背景图案出现在上右方。
center left 设置背景图案出现在中间左方。
center center 设置背景图案出现在IE中间。
center right 设置背景图案出现中间右方。
bottom left 设置背景图案出现在下左方。
bottom 设置背景图案出现在正下方。
bottom right 设置背景图案出现在下右方。
background-repeat repeat 将背景图案填满整个背景。
repeat-x 将背景图案在水平方向添满。
repeat-y 将背景图案在垂直方向添满。
no-repeat 图案只出现一次。
背景图案简化方案：
background:颜色背景图片repeat attachment position 15.2 CSS中列表的使用
属性名称属性值说明
list-style-type none 无符号
disc 实体的小圆点。
circle 空心的小圆点。
square 实心的小方块。
decimal 1,2,3...
lower-roman i,ii,iii...
upper-roman I,II,III...
lower-alpha a,b,c,d,e...
upper-alpha A,B,C,D,E...
list-style-position inside 清单项目较往右移。 outside 清单项目正常显示。
list-style-image URL list-style-image:url(lmk.gif) none 不会显示任何图象
清单的简化设置：
list-style:circle inside url("bullet.gif")
第16 章CSS 边框与边界
1.CSS 中边框的使用
2.CSS 中边界的使用
16.1 CSS 中边框的使用
属性名称属性值说明
border-color 十六进制可依序设置上，右，下，左线颜色 英文名称border-color:red(四边均为红色)
三原色border-color:red green
(上下为红色，左右为绿色)
border-color:red green blue
(上为红色、左右为绿色、下为蓝色)
border-color:red green blue yellow
(上右下左分别为红绿蓝黄)
border-style none 不显示边线
dotted 点线
dashed 虚线
solid 实线
double 双线
border-width 长度border-width:0.2cm 0.3cm 0.4cm 0.5cm; border-width:1 2 3 4;
简化方案：border:形态长度颜色
例如border:1px solid black;
16.2 CSS 中边界的使用
padding 属性介绍
属性名称属性值说明
padding-bottom 长度/百分比元件下端边线的空隙
padding-left 长度/百分比元件左端边线的空隙
主讲：李炎恢
第2页共3页PHP100 视频教程
padding-right 长度/百分比元件右端边线的空隙
padding-top 长度/百分比元件上端边线的空隙
简易写法：padding:10px
padding:2px 4px
padding:2px 6px 10px
padding:1px 2px 3px 4px
margin 系列属性介绍
属性名称属性值说明
margin-bottom auto 自动调整空隙
长度/百分比设置下端空隙
margin-left auto 自动调整空隙
长度/百分比设置左端空隙
margin-right auto 自动调整空隙
长度/百分比设置右端空隙
margin-top auto 自动调整空隙
长度/百分比设置上端空隙
简化方案：margin:2px 4px
margin:2px 6px 10px
margin:1px 2px 3px 4px
常用网页顶格设置：margin:0;
第17 章CSS 区块、浮动、定位、溢出、滚动条
1.CSS 中区块的使用
2.CSS 中浮动的使用
3.CSS 中定位的使用
4.CSS 中溢出的使用
5.CSS 中滚动条的使用
17.1 CSS 中区块的使用
属性名称属性值说明
width 像素/百分比区块的宽度
auto
height 像素/百分比区块的高度
auto
min-height 像素像素/百分比区块最小高度
auto
max-height 像素像素/百分比区块最大高度
auto
min-width 像素像素/百分比区块最小宽度
auto
max-width 像素像素/百分比区块最大宽度
auto
17.2 CSS 中浮动的使用
属性名称属性值说明
float none 正常显示
left 左浮动
right 右浮动
clear none 允许两边浮动
left 不允许左边浮动
主讲：李炎恢
第2页共3页PHP100 视频教程
right 不允许右边浮动
both 不允许两边浮动
17.3 CSS 中定位的使用
属性名称属性值说明
position relative 设置区块基准点为左上角
absolute 设置网页的为基准点左上角
static 无设置
left auto 以基准点定位在左边
像素/百分比定位在左边
top auto 以基准点定位在上边
像素/百分比定位在上边
right auto 以基准点定位在右边
像素/百分比定位在右边
bottom auto 以基准点定位在下边
像素/百分比定位在下边
z-index auto 自动调整高度
数字数字越大越往上层
17.4 CSS 中溢出的使用
属性名称属性值说明
overflow visible 不剪切内容也不添加滚动条
auto 在必需时对象内容才会被
裁切或显示滚动条
hidden 不显示超过对象尺寸的内容
scroll 总是显示滚动条
overflow-x (同上)
overflow-y (同上)
17.5 CSS 中滚动条的使用
属性名称属性值说明
scrollbar-3dlight-color 颜色/十六进制滚动条亮边框
scrollbar-highlight-color 颜色/十六进制滚动条3D 界面亮边 scrollbar-face-color 颜色/十六进制滚动条3D 表面 scrollbar-arrow-color 颜色/十六进制滚动条方向箭头 scrollbar-shadow-color 颜色/十六进制滚动条3D 暗边 scrollbar-darkshadow-color 颜色/十六进制滚动条暗边框 scrollbar-base-color 颜色/十六进制滚动条基准颜色 scrollbar-track-color 颜色/十六进制滚动条的拖动区域 主讲：李炎恢
第3页共3页PHP100 视频教程
第18 章CSS 链接、光标、DHTML、缩放
1.CSS 中链接的使用
2.CSS 中光标的使用
3.CSS 中DHTML 的使用
4.CSS 中缩放的使用
18.1 CSS 中链接的使用
超链接伪类属性
a:link 表示该超链接文字尚未被点选
a:visited 表示该超链接文字已被点选过
a:active 表示该超链接文字正被点选,但未被放开
a:hover 表示当鼠标停留在文字上
18.2 CSS 中光标的使用
属性名称属性值说明
cursor auto 光标是手指
crosshair 光标是十子形
default 光标是箭头
hand/pointer 光标是手形
move 光标是移动的符号
text 输入文字的符号
wait 漏斗
help 帮助
18.2 CSS 中DHTML 的使用
属性名称属性值说明
behavior url DHTML 文件
主讲：李炎恢
第2页共2页PHP100 视频教程
18.3 CSS 中缩放的使用
属性名称属性值说明
zoom normal 使用对象的实际尺寸
百分数/浮点实数放大缩小
主讲：李炎恢
第1页共3页PHP100 视频教程
第19 章CSS 滤镜
1.Filter 属性介绍
2.Alpha 滤镜的使用
3.Blur 滤镜的使用
4.Filph、Filpv 滤镜
5.DropShadow 滤镜
6.Glow 滤镜
7.Gray ,Invert,Xray 滤镜
8.Shadow 滤镜
19.1 Filter 属性介绍
设置或检索对象所应用的滤镜或滤镜集合。此属性仅作用于有布局的对象，如块对象。 内联要素要使用该属性，必须先设定对象的height 或width 属性，或者设定position 属 性为absolute，或者设定display 属性为block。请参阅对象的hasLayout 属性。若要在 img 对象上应用shadow 滤镜，可以在该对象img 对象的父容器上应用。滤镜的机制是可扩 展的。通过利用Microsoft?DirectX?Media SDK，你可以使用C++开发和使用第三方滤镜。 该属性在MAC 平台上不可用。对应的脚本特性为filter。
19.2 Alpha 滤镜的使用
属性值说明
opacity 0-100 对象的亮度
style 1,2,3 滤镜的样式
19.2 Blur 滤镜的使用
属性值说明
add true/false 是否印象派
direction 0-360 角度
strength 数字模糊度
19.3 Fliph、Flipv 滤镜
属性值说明
主讲：李炎恢
第2页共3页PHP100 视频教程
无
19.4 DropShadow 滤镜
属性值说明
color 颜色阴影颜色
offx 数字x 坐标偏移
offy 数字y 坐标偏移
positive true/false 是否建立透明
19.5 Glow 滤镜
属性值说明
color 颜色发光颜色
strength 数字发光厚度
19.6 Gray ,Invert,Xray 滤镜
属性值说明
无
19.7 Shadow 滤镜
属性值说明
color 颜色阴影颜色
direction 0-360 阴影方向
主讲：李炎恢
第1页共7页PHP100 视频教程
第20 章CSS 定义选择器
1. ID 与类
2. 层叠
3. 分组
4. 继承
5. 上下文选择器
6. 子类选择器
7. 其他选择器
8. 结构与注释
20.1 ID与类
选择器是用于控制页面设计的样式.即ID 选择器何类选择器.
一直以来,许多开发人员经常将ID 与类混淆,或者不能正确的使用这两种选择器,或者简 单的认为是一个代替另一个.这种认知是及其错误的.
(1).应用ID
每个ID 在一个页面中只能使用一次,作为某个元素的唯一标识符.一般情况下,ID 只 用于页面的唯一元素,如页眉,主导航条,布局区块等.
示例:<p id=”hightlight”>This paragraph has red text.</p>
相应的CSS 代码:
#hightlight{
color:#FFFFFF;
}
(2).将ID与选择器结合
/*适合所有h2 标题*/
h2{
color:# 333;
font-size:16px;
}
/*只适合title 的h2 标题*/
h2#title {
color:# eee;
}
相应的XHTML 代码:<h2>Title Of My Article</h2>
<h2 id=”title”>Title Of My Article</h2>
(3).ID的使用场合
对于每个ID,每个页面只能有一个元素使用该样式,因此ID 应该为每个页面唯一存 在并仅使用一次的元素不保留,
(4).避免使用ID的场合
当一个以上的地方需要使用同一CSS 规则时,不应该使用ID.
(5).应用类
类可以无限次的使用,因此它是应用CSS 的非常灵活的方法.
<p class=”hightlight”>his paragraph has red text.</p>
相关CSS 代码:
.hightlight {
color:FFFFFF;
}
(6).结合多个类和ID
范例:
<ul id=”drinks”>
<li class=”mix”>Beer</li>
<li class=”mix”>Spirtis</li>
<li class=”hot”>Cola</li>
<li class=”hot”>Lemonade</li>
</ul>
相应的CSS 代码:
ul#drinks {
color:FF6600;
}
.mix {
Color:# 999999;
}
.hot {
Color:# 333333;
}
(7).利用类改写基本样式:
p{
Color:#ff6600;
}
.bleached {
Color:#ccc;
}
主讲：李炎恢
第3页共7页PHP100 视频教程
相应的XHTML 代码:
<p>This paragraph has red text.</p>
<p class=”bleached”>This paragraph has red text.</p>
(8).直接将类链接到元素上
p.bleached {
color:red;
}
相应的XHTML 代码:
<p class=”bleached”>This paragraph has red text.</p>
(9).避免,适合
对于class,如果多次重复使用或者使用子类选择器，那么就选择class，如果是定义 唯一性的标记，比如布局，那么用id。
20.2 层叠
(1).外部链接实现层叠
<link rel=”stylesheet” type=”text/css” href=”css/one.css”> <link rel=”stylesheet” type=”text/css” href=”css/two.css”> <link rel=”stylesheet” type=”text/css” href=”css/three.css”>
(2).导入样式实现层叠
@import url(“one.css”)
@import url(“two.css”)
@import url(“three.css”)
注意点:必须牢记一个规则,越晚给的规则越重要.
20.3 分组
h1{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:# 333;
}
h2{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:# 333;
}
h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:# 333;
主讲：李炎恢
第4页共7页PHP100 视频教程
}
/*分组后*/
h1,h2.h3{
Font-family:隶书,宋体,楷体;
Line-height: 140%;
Color:# 333;
}
/*分组例外*/
h1{
Font-style:italic;
}
20.4 继承
h1 {
Color:# 333;
}
<h1>This is the greatest heading <i>in the world</i></h1> 从BODY 继承
Body {
Margin:10px;
Font-family:隶书;
Background:#000;
Color:#fff;
}
20.5 上下文选择器
h1{
Color: #ccc;
}
i {
Color:# 000;
}
/*使用上下文选择器*/
h1 I {
Color:# 000;
}
20.6 子类选择器
.box {
color:red;
}
.box1 {
主讲：李炎恢
第5页共7页PHP100 视频教程
font-weight:bold;
}
.box2 {
font-style:italic;
}
<div class="box">Box</div>
<div class="box box1">Box1</d iv>
<div class="box box2">Box2</d iv>
20.7 其他选择器
(1).类型选择器
p{color:black;}
a{text-decoration:underline;}
h1{font-weight:bold;}
(2).后代选择器
h2 i{
color:red;
}
li a{
text-decoration:none;
}
#main h1{
Color:red;
}
(3).伪类
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).通用选择器
*{
Padding:0;
Margin:0;
}
(5).高级选择器
高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避 免使用这些高级选择器.
1.子选择器和相邻同胞选择器
子选择器
#nav > li {background:url(bg.gif) no-repeat left top;}
<ul id="nav">
主讲：李炎恢
第6页共7页PHP100 视频教程
<li>Home</li>
<li>Server
<ul>
<li>Development</li>
<li>Consultancy</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
相邻同胞选择器:
h1+p{font-weight:bold;}
<h1>Main Heading</h1>
<p>First Paragraph</p>
<p>Second Paragraph</p>
2.属性选择器
<strong title=”Cascading Style Sheets”>CSS</strong>
strong[title] {border-bottom: 1px dotted #999;}
strong[title]:hover {cursor:help;background:#ccc}
20.8 代码注释与结构
/*body styles*/
body {
Font-size:67.5%;
}
1.添加结构性注释
/*---------------------------------------------------
Version: 1.1
Author: andy budd
Email:info@andybudd.com
Website:http:
-----------------------------------------------------*/
2.自我提示
/*
Use the star selector hack to give IE a different font size
http://www.info.co.ph
*/
布局结构：使用有意义的标记。
表格成了一种布局工具而不是显示数据的方式,人们使用块引用(blockquote)来添加 空白而不是表示引用.Web 很快就失去了意义,成了字体和表格标签的大杂烩.而现在我 们可以使用DIV+CSS 来控制布局.
主讲：李炎恢 第1页共4页PHP100 视频教程
第22 章CSS 构造颜色、背景与图像
1. 设定颜色
2. 背景使用
3. 图像使用
1.设定颜色
红色的几种合法定义;
#f00;
#ff0000;
Red;
Rgb(255,0,0);
Rgb(100%,0%,0%);
2.十六进制三元组
第一个字节:红色的值;
第二个字节:绿色的值;
第三个字节:蓝色的值;
简化写法:#cccccc 可写成#ccc, #ff6633 可以写成#f63
3.使用17 种具名颜色
黑色(black) 000000
藏蓝色(navy) 000080
绿色(green) 008000
海蓝色(teal) 008080
银色(silver) 0c0c0c
蓝色(blue) 0000ff
酸橙色(lime) 00ff00
浅绿色(aqua) 00ffff
绛紫色(maroon) 800000
紫色(purple) 800080
橄榄绿(olive) 808000
灰色(gray) 808080
主讲：李炎恢
第2页共4页PHP100 视频教程
红色(red) ff0000
紫红色(fuchsia) ff00ff
黄色(yellow) ffff00
橙色(orange) ffa500
白色(white) ffffff
4.使用span 更好的控制文本中局部区域的文本
<span>文本内容</span>
5.使用display 属性提供区块转换
inline,block,none
6.背景图象渐变的制作
Body {
Background: #ccc url(bg.gif) rpeat-x;
}
7.给一个区块加上一个背景
#branding {
Width: 700px;
Height: 200px;
Background: url(branding.gif) no-repeat;
}
8.给标题加上一个小图标
H1 {
Padding-left: 20px;
Background: url (bullet.gif) no-repeat left center; }
如果希望使用百分比而不使用关键字,则0 50%这样就实现了垂直居中
9.圆顶角
<div class=”box”>
<h2>Headline</h2>
<p>Content</p>
</div>
.box {
Width: 418px;
Background: #ccc url(bottom.gif) no-repeat left bottom;
}
.box h2 {
主讲：李炎恢
第3页共4页PHP100 视频教程
Background:url(top.gif) no-repeat left top;
}
如果不希望碰到边界,加上填充.
.box h2 {
Padding:10px 20px 0 20px;
}
.box p {
Padding:0 20px 10px 20px;
}
10.简单的CSS 阴影效果
<div class="img-wrapper">
<img src="images/dunstan.jpg" width="300" height="300" alt="Dunstan Orchard" /> </div>
.img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
margin: 10px 0 0 10px;
}
.img-wrapper img {
display: block; /*这个属性到列表再进行解释*/
margin: -5px 5px 5px -5px;
position: relative; }
第23 章CSS 构造列表与导航
1. 列表图片
2. 背景列表
3. 翻转列表
4. 水平导航
主讲教师：李炎恢
官方网站：
1. 内边距与外边距
Ul {
Margin: 0;
Padding: 0;
}
2. 使用图片作为列表图标
Ul {
Margin: 0;
Padding:0;
Width: 200px;
List-style-image:url(images/list.gif);
Line-height: 150%;
}
3. 以背景图片作为项目列表图标
Ul {
List-style-type:none;
}
Li {
Background: url(images/list.gif) no-repeat left center; Padding: 0 0 0 25px;
}
4. 内联列表
Ul {
List-style-type:disc;
主讲：李炎恢
第2页共4页PHP100 视频教程
}
Li {
Display: inline;
}
这里的display 属性是块级值的设置,定义是否要成为块. Inline 是是内联,block 是区块.
5. 背景图片和内联列表
Ul {
List-style-type: none;
}
Li {
Display:inline;
Background url(images/list.gif) no-repeat left center; Margin: 0 0 0 10px;
Padding: 0 0 0 15px;
}
6.垂直导航栏
<div>
<ul>
<li><a href="#">Drubjs Menu</a></li>
<li><a href="#">Beer</a></li>
<li><a href="#">Spirits</a></li>
<li><a href="#">Cola</a></li>
<li><a href="#">Lemonade</a></li>
<li><a href="#">Tea</a></li>
<li><a href="#">Coffee</a></li>
</ul>
</div>
Ul {
List-style-type:none;
Margin:5px;
Padding:2px
Width: 160px;
Font-size: 12px;
}
Li {
Background: #ddd;
Margin: 0;
Padding: 2px 10px;
Border-left: 1px solid #fff;
主讲：李炎恢
第3页共4页PHP100 视频教程
Border-top: 1px solid #fff;
Border-right: 1px solid #666;
Border-bottom: 1px solid #aaa;
}
7.创建垂直翻转的列表
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
Ul a{
Display: block;
Width: 200px;
Height: 40px; /*39px*/
Line-height: 40px; /*39px*/
Color:# 000;
Text-decoration: none;
Background: #94b8E9 url(images/pixy-rollover.gif) no-repeat left center; /*left bottom*/
Text-indent: 50px;
}
a:hover {
background-position: right bottom;
}
8.创建水平导航条
ul {
Margin: 0;
Padding: 0 2em;
List-style: none;
line-height: 2.1em;
Width: 720px;
Background: #faa819 url(images/mainNavBg.gif) repeat-x;
}
ul li {
float: left;
}
ul a {
color:#fff;
padding: 0 10px;
主讲：李炎恢
第4页共4页PHP100 视频教程
background: url(images/divider.gif) repeat-y left top; text-decoration: none;
}
第24 章CSS 构造超链接
1. 超链接边框
2. 派生超链接
3. 属性选择器超链接
4. 动态超链接
5. 图像翻转超链接
6. CSS 工具提示
1.给链接加上边框
A:link {
Color: #f00;
Text-decoration: none;
Border-bottom: 1px dashed #333;
Line-height: 150%;
}
2.在文章段落中加上超级链接
A:link {
Color: #f00;
Text-decoration: none;
Border: 1px solid #333;
Background: #ccc;
Padding: 2px;
Line-height: 150%;
}
3. 用背景图象添加记号
A:link {
Color:#f00;
Padding: 0 15px 0 0;
Background:url(images/arrow.gif) no-repeat right center; }
主讲：李炎恢
第2页共5页PHP100 视频教程
A:visited {
Color:# 999;
Padding: 0 15px 0 0;
Background:url(images/checkmark.gif) no-repeat right center; }
4.利用派生来影响链接
P a:link, p a:visited, p a:hover, p a:active {
Color:#f00;
}
Ul a {
Color:# 000;
}
5.利用图片作为下划线
A:link, a:visited {
Color: #666;
Text-decoration:none;
Background: url(images/underline1.gif) repeat-x left bottom; }
A:hover, a:active {
Background:url(images/underline1-hover.gif);
}
6.突出显示不同类型的链接
.external {
Background:url(images/externalLink.gif) no-repeat right top; Padding-right: 10px;
}
7.使用属性选择器来做链接
a[href^="http:"] {
background:url(images/externalLink.gif) no-repeat right top; padding-right: 10px;
}
a[href^="mailto:"] {
background:url(images/email.png) no-repeat right top; padding-right: 13px;
}
8.创建按钮和翻转
a {
Display: block;
主讲：李炎恢
第3页共5页PHP100 视频教程
Width: 6em;
Padding: 02.em;
Line-height: 1.4;
Background-color: #94b8e9;
Border: 1px solid black;
Color: #000;
Text-decoration: none;
Text-align: center;
}
a:hover {
background-color: #369;
color:#fff;
}
9.具有图象的翻转
a {
Display: block;
Width: 200px;
Height: 40px;
Line-height: 40px;
Background-color: #94b8e9;
Color: #000;
Text-decoration: none;
Text-indent:50px;
Background: #94b8ea url(images/button.gif) no-repeat left top;
}
A:hover {
Background: #369 url(images/button_over.gif) no-repeat left top;
Color: #fff;
}
9.以访问链接样式
<ul>
<li><a href="/">Andy Budd's Blogography</a></li>
<li><a href="http://www.stuffandnonsense.co.uk/">Stuff and Nonsense</a></li> <li><a href="http://www.hicksdesign.co.uk/journal/">Hicks Design</a></li> <li><a href="/">Clagnut</a></li>
<li><a href="/">HTML Dog</a></li>
<li><a href="http://adactio.com/journal/">Adactio</a></li>
<li><a href="/">All In The Head</a></li>
<li><a href="http://www.markboulton.co.uk/journal/">Mark Boulton</a></li> <li><a href="/">Ian Lloyd</a></li>
</ul>
主讲：李炎恢
第4页共5页PHP100 视频教程
ul {
list-style:none;
}
li {
margin: 5px 0;
}
li a {
display: block;
width: 300px;
height: 30px;
line-height: 30px;
color: #000;
text-decoration: none;
background: #94B8E9 url(images/visited.gif) no-repeat left top;
text-indent: 10px;
}
li a:visited {
background-position: right top;
}
10.纯css 工具提示
<p>
<a href="/" class="tooltip">Andy Budd<span> (This website rocks) </span></a> is a web developer based in Brighton England.
</p>
a.tooltip {
position: relative;
}
a.tooltip span {
display: none;
}
a.tooltip:hover {
font-size: 100%; /* Fixes bug in IE5.x/Win */
}
a.tooltip:hover span {
display:block;
position:absolute;
top:1em;
left:2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
主讲：李炎恢
第5页共5页PHP100 视频教程
background-color:#FFFF66;
color:# 000;
}
第25 章CSS 构造表格
table {
width:auto;
border-collapse:collapse;
margin-left:20px;
border:1px solid black;
}
td,th {
width:50px;
border:1px solid black;
padding:5px;
background:gold;
text-align:center;
vertical-align:middle;
text-indent:5px;
}
<table>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> </table>
<table>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
2. 行组和列组
table.example1 thead {
background:orange;
color:black;
}
table.example1 tbody {
background:gold;
color:black;
}
table.example1 tfoot {
background:firebrick;
color:white;
}
*.col1 {
background:wheat;
}
*.col2 {
background:gold;
}
*.col3 {
background:orange;
}
*.col4 {
background:tomato;
}
*.col5 {
background:firebrick;
}
*.col6 {
background:black;
color:white;
}
<table class="example1">
<thead>
<tr><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr> </thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> </tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr> </tfoot>
</table>
<table>
<colgroup>
<col class="col1" />
<col class="col2" />
<col class="col3" />
<col class="col4" />
<col class="col5" />
<col class="col6" />
</colgroup>
<tr><th rowspan="2">1</th><th colspan="2">2</th></tr>
<tr><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</table>
3. 表格选择符
<table class="example1">
<thead>
<tr>
<th class="t1">1</th>
<th class="t2">2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
</tr>
</thead>
<tbody>
<tr><th>7</th><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr> </tbody>
<tfoot>
<tr><th>13</th><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td></tr> </tfoot>
</table>
4. 分隔的边框
table {
border-collapse:separate;
}
主讲：李炎恢
第4页共7页PHP100 视频教程
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr> <tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="5">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr> <tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="5"> <tr><td rowspan="2">1</td><td colspan="2">2-3</tr> <tr><td>7</td><td>8</td><td> </td><td> </td><td class="x">11</td></tr>
</table>
主讲：李炎恢
第5页共7页PHP100 视频教程
5. 重复的边框
table {
border-collapse:collapse;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
}
.boxed-table {
border:1px solid black;
}
.boxed-cells td {
border:1px solid black;
}
.boxed-cells td.x {
border:none;
}
<h2>封装的表格</h2>
<table class="boxed-table" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
<h2>封装的单元格</h2>
<table class="boxed-cells" cellspacing="0">
<tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
主讲：李炎恢
第6页共7页PHP100 视频教程
<h2>封装的单元格和表格</h2>
<table class="boxed-table boxed-cells" cellspacing="0"> <tr><td rowspan="2">1</td><td colspan="2">2-3</tr>
<tr><td>7</td><td>8</td><td> </td><td> </td><td
class="x">11</td></tr>
</table>
6. 隐藏和删除单元格、行、列
table {
border-collapse:separate;
}
td,th {
width:50px;
padding:5px;
text-align:center;
vertical-align:middle;
background:gold;
text-indent:5px;
border:1px solid black;
}
.hidden {
visibility:hidden;
}
.delete {
display:none;
}
<table>
<colgroup>
<col class="hidden delete" />
</colgroup>
<tr><td class="delete">1</td><td>2</td><td>3</td><td>4</td></tr> <tr>
<td class="hidden">5</td>
<td class="hidden">6</td>
<td>7</td>
<td>8</td>
主讲：李炎恢
第7页共7页PHP100 视频教程 </tr>
</table>
7. 垂直对齐数据 .x {
vertical-align:middle; }