CSS美化⽹页（span和div，字体样式，⽂本样式，⽂本阴影，超链接伪类，列
表样式，⽹页。。。
为什么使⽤CSS：
有效的传递页⾯信息
使⽤CSS美化过的页⾯⽂本 ， 漂亮 ， 美观 ， 可以吸引⽤户
可以很好的突出页⾯的主题内容 ， 使⽤户第⼀眼可以看到页⾯主要内容
具有良好的⽤户体验
span 和 div
span标签的作⽤：
能让某⼏个⽂字或者某个词语凸显出来
⾏内元素
div标签
块级元素
字体样式
html网页设计css
属性名含义举例
font-family设置字体类型“⾪书”
font-size设置字体⼤⼩font-size:12px;
font-style设置字体风格font-style:italic;
font-weight设置字体的粗细font-weight:bold;
font在⼀个声明中设置所有字体font:italic bold 36px “宋体”;
⽂本样式:
属性含义举例
color设置⽂本颜⾊color:#00C;
text-align设置元素⽔平对齐⽅式text-align:right;
text-indent设置⾸⾏⽂本的缩进text-indent:20px;
line-height设置⽂本的⾏⾼line-height:25px;
text-decoration设置⽂本的装饰text-decoration:underline;
vertical-align设置⽂本对齐vertical-align ： middle
⽂本阴影
text-shadow属性在CSS2.0中出现，但迟迟未被各⼤浏览器所⽀持，因此在
CSS2.1中被废弃，如今在CSS3中得到了各⼤浏览器的⽀持
text-shadow : color x-offset y-offset blur-radius;
color: 阴影颜⾊
x-offset: X轴位移，⽤来指定阴影⽔平位移量
y-offset: Y轴位移，⽤来指定阴影垂直位移量
biur-radius: 阴影模糊半径，代表阴影向外模糊的
超链接伪类
伪类名称含义⽰例
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
list-style-image
list-style-position
list-style
⽹页背景
背景颜⾊: background-color
背景图⽚: background-image
背景定位: background-position属性
背景重复⽅式: background-repeat
简写: background
background:#C00 url(../image/kuangshen.jpg) 205px 10px no-repeat;
背景尺⼨
背景尺⼨ ： background-size
属性值描述
auto默认值，使⽤背景图⽚保持原样
percentage当使⽤百分值时，不是相对于背景的尺⼨⼤⼩来计算的，⽽是相对于元素宽度来计算的
cover 整个背景图⽚放⼤填充了整个元素contain 让背景图⽚保持本⾝的宽⾼⽐例，将背景图⽚缩放到西部开源-秦疆版权所有 宽度或者⾼度
正好适应所定义背景的区域
CSS3渐变
线性渐变: 颜⾊沿着⼀条直线过渡 ： 从左到右、从右到左、从上到下等
径向渐变: 圆形或椭圆形渐变 ， 颜⾊不再沿着⼀条直线变化， ⽽是从⼀个起点朝所有⽅向混合
浏览器兼容性:
属 性 名IE Firefox Chrome Opera Safari Gradient10+19.0+26.0+12.1+  5.1+ CSS3渐变兼容
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-

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