微信扫一扫打赏支持

css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）

css3-5  css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）

一、总结

一句话总结：css标签中文字有关的样式会被继承。由常用样式记起。

 

1、鼠标常用样式有哪些？

cursor:pointer;

 

2、列表常用样式有哪些？

list-style-type:none

list-style-type:decimal

list-style-type:square

 

 

3、css标签中文字有关的样式会被继承，其它样式会怎样？

也会被继承，但是一般无法生效，分情况，反正快标签的宽高行标签继承了也没用。

 

4、如何设置一个标签的最小宽度？

minwidth属性

12         ul{
13             width:100%;
14             min-width:1200px;

 

5、如何去掉textarea的大小可变？

将resize属性设置为none

11         textarea{
12             width:500px;
13             height:100px;
14             resize:none;
15         }

 

 

二、css3鼠标、列表和尺寸样式怎么用

1、相关知识

鼠标:
cursor:crosshair;
cursor:crosshair;
cursor:pointer;
cursor:wait;
cursor:text;
cursor:default;
cursor:help;

列表(list-style-type):
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha

尺寸:
width:1200px;
height:500px;

 

2、代码

样式继承

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         p{
 8             font-size: 20px;
 9             font-family: 微软雅黑;    
10             color:#f00;
11             font-weight:bold;
12             font-style:italic;
13             word-spacing:15px;
14         }
15 
16     </style>
17 </head>
18 <body>
19     <div>
20         <p><span>linux php linux</span></p>
21         <p><span>linux linux php linux</span></p>
22         <p><span>linux linux php linux</span></p>
23         <p><span>linux linux php linux</span></p>
24     </div>    
25 </body>
26 </html>

textarea文本域

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;    
 9         }
10         
11         textarea{
12             width:500px;
13             height:100px;
14             resize:none;
15         }    
16     </style>
17 </head>
18 <body>
19     <form action="">
20         <p>用户名:</p>
21         <p>
22             <input type="text" name='username'>
23         </p>
24 
25         <p>留言:</p>
26         <p>
27             <textarea name="mess"></textarea>
28         </p>
29     </form>    
30 </body>
31 </html>

min-width最小宽度

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>index</title>
 6     <style>
 7         *{
 8             font-family: 微软雅黑;    
 9             margin:0px;
10         }
11         
12         ul{
13             width:100%;
14             min-width:1200px;
15             background: #272822;
16             list-style-type:none;
17             padding-left:0px;
18             line-height:40px;
19             height:40px;
20         }    
21 
22         ul li{
23             float:left;
24             margin-left:15px;
25         }
26 
27         ul a{
28             color:#fff;
29             text-decoration:none;
30         }
31     </style>
32 </head>
33 <body>
34     <ul>
35         <li><a href="">百度</a></li>
36         <li><a href="">新浪</a></li>
37         <li><a href="">网易</a></li>
38         <li><a href="">腾讯</a></li>
39         <li><a href="">淘宝</a></li>
40         <li><a href="">淘宝</a></li>
41         <li><a href="">淘宝</a></li>
42         <li><a href="">淘宝</a></li>
43         <li><a href="">淘宝</a></li>
44         <li><a href="">淘宝</a></li>
45         <li><a href="">淘宝</a></li>
46         <li><a href="">淘宝</a></li>
47         <li><a href="">淘宝</a></li>
48         <li><a href="">淘宝</a></li>
49         <li><a href="">淘宝</a></li>
50         <li><a href="">淘宝</a></li>
51         <li><a href="">淘宝</a></li>
52         <li><a href="">淘宝</a></li>
53         <li><a href="">淘宝</a></li>
54         <li><a href="">淘宝</a></li>
55         <li><a href="">淘宝</a></li>
56         <li><a href="">淘宝</a></li>
57         <li><a href="">淘宝</a></li>
58         <li><a href="">淘宝</a></li>
59         <li><a href="">淘宝</a></li>
60         <div style='clear:both'></div>
61     </ul>
62 </body>
63 </html>

 

 

 

 

 

 

 

 

 

 

 
posted @ 2018-06-25 18:22  范仁义  阅读(456)  评论(0)  编辑  收藏  举报