CSS-常见属性

北城以北 提交于 2019-11-26 17:21:26

1.颜色属性

color属性定义文本的颜色,有4种格式:

(1)color:green

(2)color:#ff6600  简写式:color:#f60

(3)color:rgb(255,255,255)

  红(R),绿(G),蓝(B)每个取值范围都是0~255

(4)color:rgba(255,255,255,1)

  RGBA是代表Red、Green、Blue和Alpha(色彩空间)透明度

 

代码示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>CSS常见属性</title>
 6         <style type="text/css">
 7             /*
 8             p{color:red}
 9 
10 
11             p{color:#177199}
12             p{color:#ff(红) 66(绿) 00(蓝)}
13             p{color:#f(红) 6(绿) 0(蓝)}
14             p{color:#f60}
15 
16 
17             p{color:rgb红(r),绿(g),蓝(b)} 0-255的取值范围
18             p{color:rgb(255,0,0)} 红色
19             p{color:rgb(0,255,0)} 蓝色
20             p{color:rgb(0,0,255)} 绿色
21 
22             
23             */
24             .ha{color:rgb(255,0,0,1)}
25             .hb{color:rgb(255,0,0,0.8)}
26             .hc{color:rgb(255,0,0,0.6)}
27             .hd{color:rgb(255,0,0,0.4)}
28             .he{color:rgb(255,0,0,0.2)}
29             .hf{color:rgb(255,0,0,0)}
30         </style>
31     </head>
32     <body>
33         <p>
34         <h1 class="ha">台风要来了!</h1>
35         <h1 class="hb">台风要来了!</h1>
36         <h1 class="hc">台风要来了!</h1>
37         <h1 class="hd">台风要来了!</h1>
38         <h1 class="he">台风要来了!</h1>
39         <h1 class="hf">台风要来了!</h1>
40         </p>
41     </body>
42 </html>
View Code

 

2.字体属性

(1)font-size字体大小

px 设置一个固定的值
% 父元素的百分比
smaller 比父元素更小
larger 比父元素更大
inherit 继承父元素的大小

 

(2)font-family定义字体

font-family:Microsoft YaHei,serif;

可以使用","隔开,以确保当字体不存在时直接选择下一个。

字体可以上网搜一下其英文,比如微软雅黑--Microsoft YaHei

 

(3)font-weight字体加粗

normal(默认值)、bold(粗)、bolder(更粗)、lighter(更细)

400=normal,而700=bold,取值必须是100-900的整百数

 

(4)font-style字体样式

normal 正常(标准)
italic 斜体
oblique 倾斜
inherit 继承

 

(5)font-variant小型大写字母显示文本

normal 标准
small-caps 小型大写字母显示文本
inherit 继承

 

3.背景属性

(1)背景颜色 background-color

 

(2)背景图片 background-image

background-image:url(图片路径)
background-image:none

 

(3)背景重复 background-repeat

repeat 重复平铺满
repeat-x 向x轴重复
repeat-y 向y轴重复
no-repeat 不重复

 

(4)背景位置background-position

横向(left,center,right)

纵向(top,center,bottom)

用数值表示

 

简写方式:

代码示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>背景相关属性</title>
 6         <style type="text/css">
 7             body{
 8                 background:#f2f2f2 url(car.jpg) no-repeat 20px 20px
 9             }
10         </style>
11     </head>
12     <body>
13 
14     </body>
15 </html>
View Code

 

显示效果:

 


 

代码示例:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>背景相关属性</title>
 6         <style type="text/css">
 7             div{
 8                 width: 600px;
 9                 height:400px;
10                 background: #f2f2f2 url(car.jpg) no-repeat 20px 20px;
11             }
12         </style>
13     </head>
14     <body>
15         <div></div>
16     </body>
17 </html>
View Code

 

显示效果:

 


 

4.文本属性

(1)text-align  横向排列

值:left、center、right

(2)line-height  文本行高

% 基于字体大小的百分比行高
数值 基于像素设置固定值

(3)text-indent  首行缩进

% 父元素的百分比
px 固定值,默认0
inherit 继承

(4)letter-spacing  字符间距

normal 默认
length 设置具体的数值(可以是负值)
inherit 继承

 

(5)word-spacing  单词间距

normal 标准间距
px 固定值
inherit 继承

(6)direction  文本方向

rtl 从左到右,默认值
ltr 从右到左
inherit

继承

(7)text-transform  文本大小写

none 默认
capitalize 每个单词首字母大写
uppercase 每个单词全部大写
lowercase 每个单词全部小写
inherit 继承

 

代码示例:

 1 <!DOCTYPE html>
 2     <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>文本属性</title>
 6         <style type="text/css">
 7             div{
 8                 width: 900px;
 9                 height: 300px;
10             }
11             p{
12                 text-align:left;
13                 font-size:20px;
14                 line-height: 40px;
15                 text-indent: 40px;
16                 letter-spacing:20px;
17                 word-spacing: normal;
18                 direction:ltr;
19                 text-transform: capitalize;
20             }
21         </style>
22     </head>
23     <body>
24         <div>
25             <p>南京邮电大学南京邮电大学南京邮电大学南京邮电大学</p>
26             <p>nan jing you dian da xue</p>
27         </div>
28     </body>
29 </html>
View Code

 

5.边框属性

(1)边框风格  border-style

  • border-style  统一风格(简写风格)
  • 单独定义某一方向的边框样式:
border-bottom-style 下边框样式
border-top-style 上边框样式
border-left-style 左边框样式
border-right-style 右边框样式
  • 边框风格样式的属性值:
none 无边框
solid 直线边框
dashed 虚线边框
dotted 点状边框
double 双线边框
groove 凸槽边框
ridge 垄状边框
inset inset边框
outset outset边框
inherit 继承

 

(2)边框宽度  border-width

  • border-width  统一风格
  • 单独风格:
border-top-width 上边框宽度
border-bottom-width 下边框宽度
border-left-width 左边框宽度
border-right-width 右边框宽度
  • 边框宽度的属性值:
thin 细边框
medium 中等边框
thick 粗边框
px 固定值的边框
inherit 继承

 

(3)边框颜色  border-color

  • border-color  统一风格
  • 单独风格:
border-top-color 上边框颜色
border-bottom-color 下边框颜色
border-left-color 左边框颜色
border-right-color 右边框颜色
  • 属性值:
颜色的名称 red、green
RGB rgb(255,255,0)
RGBA rgba(255,255,0,0.1)
十六进制 #ff0、#ff0000
  • 属性值的四种情况:
一个值 border-color:(上、下、左、右);
两个值 border-color:(上下)(左右);
三个值 border-color:(上)(左、右)(下);
四个值 border-color:(上)(右)(下)(左)

 

(4)简写方式

border:solid 2px #f60

 

代码示例:

 1 <!DOCTYPE html>
 2     <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>边框属性</title>
 6         <style type="text/css">
 7             div{
 8                 width:50px;
 9                 height:50px;
10                 float:left;
11                 margin-right: 10px;
12                 background-color: #f60;
13                 border-width:medium;
14                 border-color:rgb(0,0,255);
15                 border-color:green blue yellow black;
16             }
17             .div0{
18                 border-style:solid;
19                 border-width: 5px;
20             }
21             .div1{
22                 border-top-style: solid;
23             }
24             .div2{
25                 border-bottom-style: dashed;
26             }
27             .div3{
28                 border-left-style: dotted;
29             }
30             .div4{
31                 border-right-style:double;
32             }
33             .div5,.div6,.div7,.div8{
34                 width:80px;
35                 height:30px;
36 
37                 border-width:20px;
38                 background: none;
39                 border-color: #ddd;
40                 
41                 /*
42                 border: solid 2px black
43                 */
44             }
45             .div5{
46                 border-style:groove;
47             }
48             .div6{
49                 border-style:ridge;
50             }
51             .div7{
52                 border-style:inset;
53             }
54             .div8{
55                 border-style:outset;
56             }
57 
58         </style>
59     </head>
60     <body>
61         <div class="div0">div0</div>
62         <div class="div1">solid</div>
63         <div class="div2">dashed</div>
64         <div class="div3">dotted</div>
65         <div class="div4">double</div>
66         <div class="div5">凸槽边框</div>
67         <div class="div6">垄状边框</div>
68         <div class="div7">inset边框</div>
69         <div class="div8">outset边框</div>
70         <div class="div9"></div>
71 
72     </body>
73 </html>
View Code

 

6.列表属性

(1)标记的类型  list-style-type

none 无标记
disc 默认,标记是实心圆
circle 标记是空心圆
square 标记是实心方块
decimal 标记是数字
decimal-leading-zero 0开头的数字标记(01,02,03等)
lower-roman 小写罗马数字(i,ii,iii,iv,v等)
upper-roman 大写罗马数字(I,II,III,IV,V等)
lower-alpha 小写英文字母(a,b,c,d,e等)
upper-alpha 大写英文字母(A,B,C,D,E等)
lower-greek 小写希腊字母(α,β,γ等)
lower-latin 小写拉丁字母(a,b,c,d,e等)
upper-latin 大写拉丁字母(A,B,C,D,E等)
hebrew 传统的希伯来编号方式
armenian 传统的亚美尼亚编号方式
georgian 传统的乔治亚编号方式(an,ban,gan等)
cjk-ideographic 简单的表意数字
hiragana 标记是:a,i,u,e,o,ka,ki等(日文片假名)
katakana 标记是:A,I,U,E,KA,KI等(日文片假名)
hiragana-iroha 标记是:i,ro,ha,ni,ho,he,to等(日文片假名)
katakana-iroha 标记是:I,RO,HA,NI,HO,HE,TO等(日文片假名)

 

(2)标记的位置  list-style-position

inside  列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承list-style-position属性的值.

 

(3)设置图像列表标记  list-style-image

URL 图像的路径
none 默认,无图形被显示
inherit 规定应该从父元素继承list-style-image属性的值

 

(4)简写方式  list-style

list-style:circle outside url(arr.png);

代码示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>列表属性</title>
 6         <style>
 7             /*
 8             ol{
 9                 list-style-type:circle
10             }
11             ul{
12                 list-style-type: disc;
13             }
14 
15             ul.inside{
16                 list-style-position: inside
17             }
18             ul.outside{
19                 list-style-position: outside
20             }
21 
22             ul.gif{
23                 list-style-image: url("arr.gif");
24             }
25             ul.png{
26                 list-style-image: url("arr.png");
27             }
28             */
29             ul{
30                 list-style:circle outside url(arr.png);
31             }
32         </style>
33     </head>
34     <body>
35         <p>无序列表无序列表无序列表无序列表无序列表</p>
36         <ul class="gif">
37             <li>无序列表</li>
38             <li>无序列表</li>
39             <li>无序列表</li>
40             <li>无序列表</li>
41             <li>无序列表
42                     <ul class="png">
43                 <li>无序列表</li>
44                 <li>无序列表</li>
45                 <li>无序列表</li>
46                 <li>无序列表</li>
47                 <li>无序列表</li>
48                     </ul>
49             </li>
50         </ul>
51         <p>无序列表无序列表无序列表无序列表无序列表</p>
52         <ul class="outside">
53             <li>无序列表</li>
54             <li>无序列表</li>
55             <li>无序列表</li>
56             <li>无序列表</li>
57             <li>无序列表</li>
58         </ul>
59 
60         <!--<ol>-->
61             <!--<li>无序列表</li>-->
62             <!--<li>无序列表</li>-->
63             <!--<li>无序列表</li>-->
64             <!--<li>无序列表</li>-->
65             <!--<li>无序列表</li>-->
66         <!--</ol>-->
67 
68     </body>
69 </html>
View Code

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!