码迷,mamicode.com
首页 > Web开发 > 详细

css3美化网页元素

时间:2017-09-04 09:48:13      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:图片   otto   水平对齐   字体   一个   关键词   nta   路径   从右到左   

<span>标签 </span>
属性名   含义     举例
font-family  设置字体类型   font-family:"隶书"
font-size  设置字体大小   font-size:12px;
font-style  设置字体的风格   font-style:italic;
font-weight  设置字体粗细   font-weight:bold;
font   在一个声明设置所有字体属性 font:italicbold36px"宋体 "

font-style属性
normal    正常
italic   倾斜(用的多)
oblique   斜体


font-weight属性
值    说明
normal   默认值定义标准字体
bold   粗体字体
bolder   更粗字体
lighter   更细字体
100....900  定义由粗到细的字体400等同于normal,700等同于bold

font属性
字体属性的顺序:字体风格---字体粗细--字体大小---字体类型
p span{
font:obiqer bold 12px"楷体"
}

文本属性 
属性      含义       举例
color    设置文本颜色   color#ooc;
text-align   设置元素水平对齐方式  text-align:right; 
text-indent   设置首行文本缩进   text-indent:20px;
line-height   设置文本行高   line-height:25px;
text-ddecoration  蛇者文本装饰   text-decoration:underline;

值    说明
left   把文本排列到左边。默认值:由浏览器决定
right   把文本排类到右边
center   把文本排类到中间
justify   实现两端对齐文本效果

首行缩进
text-indent:em或px
行高
line-height:px

文本装饰
text-decortion属性

none   默认值,定义标准文本
underline  设置文本下划线
overline  设置文本上划线
line-through  设置文本删除线

垂直对齐方式
vertical属性:middle、top、bottom 。
文本阴影
text-shadow:color x-offset y-offset blur-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

none  无标记符号

disc  实心圆


circle  空心圆   list-style-type:none;


square  实心正方形


decimal  数字

 

list-style-image

list-sytle-position

list-style(记住)


背景颜色
background-color
transparent 透明色
背景图像
background-image:url(图片路径)
背景重复方式
background-repeat属性
repeat:沿水平和垂直两个方向平铺
no-repeat:不平铺,即只显示一次
repeat-x:只沿水平方向平铺
repeat-y:只沿垂直方向平铺

背景定位
background-position属性
值   含义
xpos   单位:px,Xpos表示水平位置,Ypos表示垂直位置
X% Y%   使用百分比表示背景位置
X  Y方向关键字  水平方向关键字:left center right
   垂直方向关键词:top center bottom


背景尺寸 background-size
属性值  描述
auto  默认值,使用背景图片保持原样
percentage 当使用百分值时,不是相对于背景的尺寸大小来计算的而相对元素宽度来计算的
cover  整个背景图片放大填充了整个元素
contain  让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适合所定义背景的区域


线性渐变
颜色沿着一条直线过渡;从左到右、从右到左、从上到下
语法
liner-gradient{position(渐变方向)color1,color2,...)
 
经向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,从而从一个起点朝所有方向混合

 

css3美化网页元素

标签:图片   otto   水平对齐   字体   一个   关键词   nta   路径   从右到左   

原文地址:http://www.cnblogs.com/wh1520577322/p/7472082.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!