HTML5中CSS3美化⽹页元素重点总结为什么使⽤CSS：
1. 有效的传递页⾯信息
2. 使⽤CSS美化过的页⾯⽂本，使页⾯漂亮，美观，吸引⽤户
3. 可以很好的突出页⾯的主题内容，使⽤户第⼀眼可以看到页⾯主要内容
4. 具有良好的⽤户体验
<span>标签的作⽤：
能让某⼏个⽂字或者某个词语凸显出来⼝
例如：
p .show, .bird span{
font-size: 36px;
font-weight: bold;
color: bule;
}
<p>享受<span class="show">"北⼤式”</span> 教育服务</p>
<p>在北⼤青鸟，有⼀⼈默默⽀持你成就<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>北⼤青鸟</span>，成就你的梦想</p>
字体样式：
属性名含义举例
font-
html5颜代码family
设置字体类型font-family:"⾪书";
font-size设置字体⼤⼩font-size:12px;
font-style设置字体风格font-style:italic;
font-
weight
设置字体的粗细font-weight:bold;
font 在⼀个声明中设置所有字体
属性
font:italic bold 36px "宋
体";
font-family属性：
p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
font-size属性：
单位：px（像素，越⼤字体越⼤）、em（）、rem（）、cm（）、mm（）、pt（）、pc（）
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}
font-style属性：
normal（正常的）、italic（倾斜；调⽤斜体库⾥的斜体）和oblique（斜体；系统⾃⼰把字体变成斜体）
font-weight属性：
值说明
normal默认值，定义标准的字体
bold粗体字体
bolder更粗的字体
lighter更细的字体
100、200、
300、400、500、600、700、800、900定义由细到粗的字体400等同于normal，700等同于bold
font属性：
字体属性的顺序：字体风格→字体粗细→字体⼤⼩→字体类型
p span{font:oblique bold 12px "楷体";}
⽂本属性：
属性含义举例
color设置⽂本颜⾊color:#00C;
text-align设置元素⽔平对齐⽅式text-align:right;
text-indent设置⾸⾏⽂本的缩进text-indent:20px;
line-height设置⽂本的⾏⾼line-height:25px;
text-decoration设置⽂本的装饰text-decoration:underline;
color属性：
RGB：
1. ⼗六进制⽅法表⽰颜⾊：前两位表⽰红⾊分量，中间两位表⽰绿⾊分量，最后两位表⽰蓝⾊分量    #00    00    00
2. rgb(r,g,b) : 正整数的取值为0～255
RGBA：在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);
排版⽂本段落：
⾸⾏缩进：text-indent：em（可变的相对值，相对⽗节点变化，⼀般都⽤这个）或px
⾏⾼：line-height：px
⽔平对齐⽅式：text-align属性
值说明
left把⽂本排列到左边。默认值：由浏览器决定
right把⽂本排列到右边
center把⽂本排列到中间
justify实现两端对齐⽂本效果
垂直对齐⽅式：vertical -align属性
值说明
top把⽂本排列到上⾯。默认值：由浏览器决定
middle把⽂本排列到中间
bottom把⽂本排列到下⾯
justify实现两端对齐⽂本效果
⽂本装饰：text-decoration属性
值说明
none默认值，定义的标准⽂本
underline设置⽂本的下划线
overline设置⽂本的上划线
line-through设置⽂本的删除线
⽂本阴影：
属性IE Firefox Chrome Opera Safari Text-shadow9+  3.5+  2.0+9.6+  4.0+
超链接伪类：
标签名：伪类名{声明;}
例如：
a:hover {
color:#B46210;
text-decoration:underline;
}
使⽤CSS设置超链接：
伪类名称含义⽰例
a:link未单击访问时超链接样式a:link{color:#9ef5f9;}
a:visited单击访问后超链接样式a:visited {color:#333;}
a:hover ⿏标悬浮其上的超链接样
式
a:hover{color:#ff7300;}
a:active ⿏标单击未释放的超链接
样式
a:active {color:#999;}
设置伪类的顺序：a:link->a:visited->a:hover->a:active
列表样式：
list-style-type：
值说明语法⽰例
none⽆标记符号list-style-type:none;
disc实⼼圆，默认类型list-style-type:disc;
circle空⼼圆list-style-type:circle;
square实⼼正⽅形list-style-type:square;
decimal数字list-style-type:decimal list-style-image：
可以放⼩图⽚
list-style-position：
可以改变位置
list-style：
只有⼀个none，⼀般情况下都去掉，应⽤⽐较⼴泛，去掉原点之后⽤背景图⽚代替⽐较好控制li {  list-style:none;  }
背景样式：
常见的背景样式：
1. 背景颜⾊
background-color
背景颜⾊值：⼗六进制⽅法表⽰
transparent：透明⾊
2. 背景图像：background-image属性
background-image:url(图⽚路径);
背景重复⽅式：background-repeat属性
repeat：沿⽔平和垂直两个⽅向平铺
no-repeat：不平铺，即只显⽰⼀次
repeat-x：只沿⽔平⽅向平铺
repeat-y：只沿垂直⽅向平铺
背景定位：background-position属性
值含义
Xpos  Ypos 单位：px，
Xpos表⽰⽔平位置，Ypos表⽰垂直位置
X%  Y%使⽤百分⽐表⽰背景的位置
X、Y⽅向关键词⽔平⽅向的关键词：left、center、right

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。