20180205文本`边框`背景`超链接（css伪类）`列表样式，div标签

文本样式：

而文本样式主要涉及多个文字的排版效果，即整个段落的排版效果。字体样式注重个体，文本样式注重整体。使用了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- 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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangnatian/p/8417786.html