css学习代码-文本、链接、边框
2013-08-09 21:44
183 查看
文本居中：
<html>
<head>
<title>css文本</title>
<style type="text/css">
table{
text-align:center ;
}
</style>
</head>
<body>
<table border="1" width="80%">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
下划线：
<html>
<head>
<title>css文本</title>
<style type="text/css">
p{
text-decoration:underline ;
}
</style>
</head>
<body>
<p>
下划线
</p>
</body>
</html>
伪类 链接：
<html>
<head>
<title>css文本</title>
<style type="text/css">
/*
link:将从未访问过的链接设置红色
visited:将已经访问过的链接设置绿色
active:将当前得到焦点的链接设置为黄色
hover:当鼠标悬停在链接上设置为橘黄色，斜体，字大小30px，间距20px
*/
a:link{
color:red ;
}
a:visited{
color:green ;
}
a:active{
color:yellow ;
}
a:hover{
color:orange ;
font-style:italic ;
font-size:30px ;
letter-spacing:20px ;
}
</style>
</head>
<body>
<a href="#">link</a><p>
<a href="#">visited</a><p>
<a href="#">active</a><p>
<a href="#">hover</a><p>
</body>
</html>
去除下划线
<html>
<head>
<title>css文本</title>
<style type="text/css">
/*
link:将从未访问过的链接设置红色
visited:将已经访问过的链接设置绿色
active:将当前得到焦点的链接设置为黄色
hover:当鼠标悬停在链接上设置为橘黄色，斜体，字大小30px，间距20px
去除下划线
*/
a{
text-decoration:none ;
}
a:link{
color:red ;
}
a:visited{
color:green ;
}
a:active{
color:yellow ;
}
a:hover{
color:orange ;
font-style:italic ;
font-size:30px ;
letter-spacing:20px ;
}
</style>
</head>
<body>
<a href="#">link</a><p>
<a href="#">visited</a><p>
<a href="#">active</a><p>
<a href="#">hover</a><p>
</body>
</html>
边框：
<html>
<head>
<title>css文本</title>
<style type="text/css">
table{
border:1px solid black ;
border-collapse:collapse ;
}
td{
border:1px solid black ;
border-collapse:collapse ;
}
</style>
</head>
<body>
<table border="1" width="80%">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title>css文本</title>
<style type="text/css">
table{
text-align:center ;
}
</style>
</head>
<body>
<table border="1" width="80%">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
下划线：
<html>
<head>
<title>css文本</title>
<style type="text/css">
p{
text-decoration:underline ;
}
</style>
</head>
<body>
<p>
下划线
</p>
</body>
</html>
伪类 链接：
<html>
<head>
<title>css文本</title>
<style type="text/css">
/*
link:将从未访问过的链接设置红色
visited:将已经访问过的链接设置绿色
active:将当前得到焦点的链接设置为黄色
hover:当鼠标悬停在链接上设置为橘黄色，斜体，字大小30px，间距20px
*/
a:link{
color:red ;
}
a:visited{
color:green ;
}
a:active{
color:yellow ;
}
a:hover{
color:orange ;
font-style:italic ;
font-size:30px ;
letter-spacing:20px ;
}
</style>
</head>
<body>
<a href="#">link</a><p>
<a href="#">visited</a><p>
<a href="#">active</a><p>
<a href="#">hover</a><p>
</body>
</html>
去除下划线
<html>
<head>
<title>css文本</title>
<style type="text/css">
/*
link:将从未访问过的链接设置红色
visited:将已经访问过的链接设置绿色
active:将当前得到焦点的链接设置为黄色
hover:当鼠标悬停在链接上设置为橘黄色，斜体，字大小30px，间距20px
去除下划线
*/
a{
text-decoration:none ;
}
a:link{
color:red ;
}
a:visited{
color:green ;
}
a:active{
color:yellow ;
}
a:hover{
color:orange ;
font-style:italic ;
font-size:30px ;
letter-spacing:20px ;
}
</style>
</head>
<body>
<a href="#">link</a><p>
<a href="#">visited</a><p>
<a href="#">active</a><p>
<a href="#">hover</a><p>
</body>
</html>
边框：
<html>
<head>
<title>css文本</title>
<style type="text/css">
table{
border:1px solid black ;
border-collapse:collapse ;
}
td{
border:1px solid black ;
border-collapse:collapse ;
}
</style>
</head>
<body>
<table border="1" width="80%">
<tr>
<td>学号</td>
<td>姓名</td>
</tr>
<tr>
<td>007</td>
<td>张三</td>
</tr>
<tr>
<td>008</td>
<td>李四</td>
</tr>
</table>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 一些自己学习的html代码（锚，动态改变文本和链接，有序无序列表等）
- CSS学习:文本排版,颜色,背景,边框,边距
- css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）
- Css基础学习一：字体，文本，颜色，背景，边框，边距
- css 链接变颜色 （加边框设置样式）
- Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
- CSS学习笔记：溢出文本省略（text-overflow）
- 同一html页面中不同链接的不同样式的css代码
- Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
- 用CSS实现文本左右对齐且首行缩进的代码
- [cnblogs镜像]页面定制CSS代码初探（一）：页面变宽 文本自动换行 图片按比缩放
- CSS基础知识二（段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接）
- CSS学习笔记（1）CSS基础语法/字体/文本
- css学习笔记 --初学 css代码风格、布局误区
- DIV+CSS基础代码学习
- 【CSS学习】CSS 边框
- css 链接变颜色 （加边框设置样式）
- CSS去除firefox点击链接时的虚线边框
- CSS中背景图片，文本，列表与盒子模型的边框与边距
- HTML、CSS学习-node.js三句代码挂载静态网站