CSS3美化网页元素
Posted Java语言和前端技术学习
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3美化网页元素相关的知识，希望对你有一定的参考价值。
为什么使用CSS：
①有效的传递页面信息 。
②使用CSS美化过的页面文本，使页面美观、漂亮、吸引用户。
③可以很好的突出页面的主题内容使用户第一眼可以看到页面的主要内容。
④具有良好的用户体验。
<span>标签：能让几个文字或者某个词语凸显出啦。
字体样式：
font-family：设置字体类型
font-size：设置字体大小(px、em...)
font-style：设置字体风格(normal、italic和oblique)
font-weight：设置字体的粗细(normal、bold、bolder、lighter)
注：字体属性的顺序：字体风格->字体粗细->字体大小->字体类型
字体样式：
color：设置文本颜色
text-align：设置元素水平对齐方式
text-indent：设置首行文本缩进
line-height：设置文本的行高
text-decoration：设置文本的装饰
文本阴影：
text-shadow：color x-offset y-offset blur-radius。
x-offset：x轴位移，用来指定阴影水平位移量。
y-offset ：y轴位移，用来指定阴影垂直位移量。
blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。
使用CSS设置超链接(伪类)：
a:link---未单击访问时超链接样式
a:visited--单击访问后超链接样式
a:hover--鼠标悬浮其上的超链接样式
a:active--鼠标单击未释放的超链接样式
注：设置伪类的顺序：a:link-->a:visited-->a:hover-->a:active
列表样式：
①list-style-type：值
②list-style-image：值
③list-style-position：值
④list-style：值
值：none-->无标记符号；disc-->实心圆，默认类型；circle-->空心圆
square-->实心正方形；decimal-->数字。
网页背景：
背景颜色：background-color
背景图像：background-image
背景重复方式：background-repeat：属性
属性：repeat-->沿水平和垂直两个方向平铺；repeat-x-->只沿水平方向平铺
no-repeat-->不平铺，即只显示一次；repeat-y-->只沿垂直方向平铺。
设置背景尺寸：
background-size：值
值：auto--默认值，使用背景图片保持原样；pencentage--当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素的宽度来计算的；cover--整个背景图片放大填充了整个元素；contain--让背景图片保持本身的宽高比例，将背景图片缩放到宽度或高度正好适应所定义背景的区域。
CSS3渐变兼容：
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核：加前缀：-moz-
线性渐变：
linear-gradient(position[渐变方向],color1,color2)。
以上是关于CSS3美化网页元素的主要内容，如果未能解决你的问题，请参考以下文章