20180205文本`边框`背景`超链接(css伪类)`列表样式,div标签
2018-02-05 15:26 王那天 阅读(431) 评论(0) 编辑 收藏 举报
文本样式:
而文本样式主要涉及多个文字的排版效果,即整个段落的排版效果。字体样式注重个体,文本样式注重整体。使用了font前缀和text前缀来区分两类不同。
属性 |
说明 |
text-decoration |
下划线、删除线、顶划线 |
text-transform |
文本大小写 |
text-indent |
段落首行缩进 |
text-align |
文本水平对齐方式 |
line-height |
行高 |
(1)text-decoration属性
none |
默认值,可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 |
underline |
下划线 |
line-through |
删除线 |
overline |
顶划线 |
边框图示:
要定义一个元素的边框必须要设置以下三个方面。
(1)边框的宽度
(2)边框的外观(实线,或者虚线)
(3)边框的颜色
属性 |
说明 |
border-width |
边框的宽度 |
border-style |
边框的外观 |
border-color |
边框的颜色 |
(1)border-width
在CSS入门学习中,我们都是建议采用像素做单位。
(2)border-style
属性值 |
说明 |
none |
无样式 |
hidden |
与"none"相同。不过应用于表除外。对于表,hidden用于解决边框冲突 |
solid |
实线 |
dashed |
虚线 |
dotted |
点线 |
double |
双线,双线的宽度等于border-width值 |
(3)border-color
属性用来定义边框的颜色。
(4)简洁写法
border-width: 1px;
border-style: solid;
border-color: red;
可以简写为:border:1px solid red;
(5)局部边框样式
border-top: ;
border-bottom: ;
border-left: ;
border-right:
背景样式:
属性 |
说明 |
background-color |
背景颜色 |
background-image |
定义背景图像的路径,这样图片才能显示 |
background-repeat |
显示方式,例如纵向平铺、横向平铺 |
background-attachment |
是否随内容而滚动(了解) |
background-repeat属性取值
属性值 |
说明 |
no-repeat |
表示不平铺 |
repeat |
同时平铺 |
repeat-x |
水平方向(x轴)平铺 |
repeat-y |
垂直方向(y轴)平铺 |
超链接样式:
不同时期不同样式
属性 |
说明 |
a:link |
定义a元素未访问时的样式 |
a:visited |
定义a元素访问后的样式 |
a:hover |
定义鼠标经过显示的样式 |
a:active |
定义鼠标单击激活时的样式 |
定义这4个伪类,必须按照(link、visited、hover、active)LVHA的顺序进行,不然浏览器可能无法正常显示这4种样式。请记住,这4种样式定义顺序不能改变!
列表样式:
列表项符号list-style-type
1.有序列表
语法:
<ol type="">
<li>有序列表项</1i>
<1i>有序列表项</1i>
<1i>有序列表项</1i>
</ol>
属性值 |
序号类型 |
1 |
数字1、2、3 |
a |
小写英文字母a、b、.. |
A |
大写英文字母A、B、.. |
i |
小写罗马数字i、ii、 |
I |
大写罗马数字I、I I、… |
2.无序列表
语法:
<ul type="">
<li>有序列表项</1i>
<1i>有序列表项</1i>
<1i>有序列表项</1i>
</ul>
属性值 |
序号类型 |
disc |
实心圆● |
circle |
空心圆○ |
square |
实心方块■ |
我们用css样式:
list-style-type属性取值
属性值 |
序号类型 |
decimal |
数字1、2、3 |
lower-alpha |
小写英文字母a、b、.. |
upper-alpha |
大写英文字母A、B、.. |
lower-roman |
小写罗马数字i、ii、 |
upper-roman |
大写罗马数字I、I I、… |
属性值 |
序号类型 |
disc |
实心圆● |
circle |
空心圆○ |
square |
实心方块■ |
none |
取出符号 |
边框 ·背景样式练习:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>边框</title> 6 <style> 7 #p1{ 8 border-width: 10px; 9 border-style: dashed; 10 border-color: red; 11 background-color: #B13335 12 } 13 #p2{ 14 border: 1px solid blue; 15 background-color: #B72D30 16 } 17 #p3{ 18 border-bottom: 1px dashed #967777; 19 border-left: 1px solid #238A82; 20 border-right: 1px double #D06F71; 21 border-top: 1px dotted #4C8F5C; 22 background-image:url(img/logo3.jpg); 23 background-repeat:repeat; 24 background-attachment: fixed; 25 26 } 27 body{ 28 background-image: url(logo3.jpg); 29 background-repeat:no-repeat; 30 background-attachment: fixed; 31 } 32 </style> 33 </head> 34 35 <body> 36 <p id="p1">离离原上草,一岁一枯荣</p><br> 37 38 <p id="p2">野火烧不尽,春风吹又生</p><br> 39 40 <p id="p3">床前明月光,疑是地上霜</p> 41 <br> 42 <br> 43 <br> 44 <br> 45 <br> 46 <br> 47 <br> 48 <br> 49 <br> 50 <br> 51 <br> 52 <br> 53 <br> 54 <br> 55 <br> 56 <br> 57 <br> 58 <br> 59 <br> 60 <br> 61 <br> 62 <br> 63 <br> 64 <br> 65 <br> 66 <br> 67 <br> 68 <br> 69 <br> 70 <br> 71 <br> 72 <br> 73 <br> 74 <br> 75 <br><br> 76 <br> 77 <br> 78 <br> 79 <br> 80 <br> 81 <br> 82 <br> 83 <br> 84 <br> 85 <br> 86 <br> 87 <br> 88 <br> 89 <br> 90 <br><br> 91 <br> 92 <br> 93 <br> 94 <br> 95 <br> 96 <br> 97 <br> 98 <br> 99 <br> 100 <br> 101 <br> 102 <br> 103 <br> 104 <br> 105 <br><br> 106 <br> 107 <br> 108 <br> 109 <br> 110 <br> 111 <br> 112 <br> 113 <br> 114 <br> 115 <br> 116 <br> 117 <br> 118 <br> 119 <br> 120 <br> 121 <br> 122 123 </body> 124 </html>
背景样式-练习(网易)1:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <link rel="stylesheet" href="style5.css"> 7 8 <style> 9 10 #username{ 11 background-image: url(bg_v3.png); 12 background-position: -148px -63px; 13 } 14 #pwd{background-image: url(bg_v3.png); 15 background-position: -170px -63px; 16 } 17 #login{background-image: url(bg_v3.png); 18 background-position: -306px -214px; 19 } 20 #regist{background-image: url(bg_v3.png); 21 background-position: -125px -217px; 22 } 23 24 25 26 </style> 27 </head> 28 29 <body> 30 <form action=""> 31 用户名:<input type="text" id="username"><br> 32 密码:<input type="text" id="pwd"><br> 33 <input type="button" value="登录" id="login"> 34 <input type="button" value="去注册" id="regist"> 35 </form> 36 </body> 37 </html> 38 39 div标签-练习: 40 41 <!doctype html> 42 <html> 43 <head> 44 <meta charset="utf-8"> 45 <title>div</title> 46 <link rel="stylesheet" href="divstyle.css"> 47 48 <style> 49 50 @charset "utf-8"; 51 /* CSS Document */ 52 53 #d1{ 54 width: 250px; 55 height: 40px; 56 border: 1px solid #8A7F7F; 57 58 } 59 #d2{ 60 width: 20px; 61 height: 35px; 62 background: url(bg_v3.png)-151px -52px; 63 64 float: left 65 66 } 67 #d3{width: 100px; 68 height: 35px; 69 float: left; 70 71 72 } 73 #username{ 74 height: 30px; 75 border-style: none; 76 } 77 #d10{ 78 width: 80px; 79 height: 35px; 80 background: url(bg_v3.png) -6px -108px ; 81 82 float: right 83 84 85 } 86 87 #d4{ 88 width: 250px; 89 height: 40px; 90 border: 1px solid #8A7F7F; 91 92 } 93 #d5{ 94 width: 20px; 95 height: 35px; 96 97 background-image: url(bg_v3.png); 98 background-position: -175px -52px; 99 float: left 100 101 } 102 #d6{width: 100px; 103 height: 35px; 104 float: left 105 } 106 #username1{ 107 height: 30px; 108 border-style: none; 109 } 110 #d7{width: 10px; 111 height: 10px; 112 } 113 #d8{background-image: url(bg_v3.png); 114 background-position: -306px -214px; 115 } 116 #d9{background-image: url(bg_v3.png); 117 background-position: -125px -217px; 118 } 119 #d11{border-style: none; 120 width: 80px; 121 122 } 123 124 125 126 127 128 </style> 129 130 131 </head> 132 133 <body> 134 <form action=""> 135 <div id="d1"> 136 <div id="d2"></div> 137 <div id="d3"><input type="text" id="username" placeholder="邮箱账号或手机号"></div> 138 <div id="d10"></div> 139 </div> 140 <div id="d4"> 141 <div id="d5"></div> 142 <div id="d6"><input type="password" id="username1" placeholder="密码"></div> 143 </div> 144 <input type="radio" id="d7">十天内免登录 忘记密码?<br> 145 146 <input type="button" value="登录" id="d8"> 147 <input type="button" value="去注册" id="d9"><br> 148 149 <span>版本:</span><select name="" id="d11"> 150 <option selected value="">默认版本</option> 151 <option value="">网易邮箱6.0版</option> 152 <option value="">网易邮箱6.0简约版</option> 153 </select> 154 <input type="radio">全程ssl 155 156 157 </form> 158 </body> 159 </html>
超链接样式-练习:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <link rel="stylesheet" href="style6.css"> 7 8 <style> 9 10 #a1:link{ 11 color: #C5BEBF; 12 text-decoration: none; 13 } 14 /*鼠标悬停的样式*/ 15 #a1:hover{ 16 color: red; 17 } 18 /*鼠标点击时的样式*/ 19 #a1:active{ 20 color: blue; 21 } 22 /*鼠标松开(访问过的样式)*/ 23 #a1:visited{ 24 color: pink; 25 } 26 #p1:hover{ 27 color: pink; 28 } 29 30 </style> 31 </head> 32 33 <body> 34 <a href="#" id="a1">超链接1</a> 35 <a href="#" id="a2">超链接2</a> 36 <a href="#" id="a3">超链接3</a> 37 <p id="p1">p标签</p> 38 </body> 39 </html> 40 41 列表样式-练习: 42 43 <!doctype html> 44 <html> 45 <head> 46 <meta charset="utf-8"> 47 <title>无标题文档</title> 48 <link rel="stylesheet" href="style7.css"> 49 50 <style> 51 52 #o1{list-style-type: none; 53 list-style-image: url(img/sp.png) 54 } 55 56 57 58 </style> 59 </head> 60 61 <body> 62 <ol id="o1"> 63 <li>数学</li> 64 <li>语文</li> 65 <li>英语</li> 66 </ol> 67 </body> 68 </html>