CSS3美化网页元素

一.<span>标签:

可以对<p>标签中的部分文字添加样式,切不改变文字的显示方向,它不是块元素,不独占一个矩形区域

例如:

<p 享受<span class="show">北大式</span>教育服务</p>;

二.字体样式:

font-family  

常用字体属性,含义及用法
属性名含义

举例

font-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可以设置多种字体,字体之间用逗号隔开,有些字体如Times Now Roman字体,名称会出现空格,这时需要加双引号,使浏览器知道这是一种字体的名称;

三.排版网页文本:

常用的文本属性,含义及方法
属性含义举例
color设置文本颜色color:#00C
   text-align设置元素水平对齐方式text-align:right;
text-indent设置首行文本的缩进text-index:20px;
line-height设置文本的行高line-height:25px;
text-decoration设置文本的装饰text-decoration:underline

1.关于颜色属性:

a.         颜色采用RGB格式,如”#FFFFFF",前两位表示白色分量,中间两位表示绿色分量,最后两位表示蓝色分量

b.        RGB还有另一种方法表示:

        rgb(r,g,b)

以上r,g,b,3个参数,正整数取值为0~255,百分比为0%~100%,3个参数都不能为负;

RGBA在rgb基础上增加了控制透明度的参数,透明度取值为0~1,如果为0,表示完全透明,如果为1,表示完全不透明,取值不能为负;

例如:rgba(0,0,255,0.5)

2.水平方式对齐:

text-align常用值
left默认值,把文本排列到左边
right排到右边
center中间
justify实现两段对齐文本效果
  

3.line-height值可以是像素值(px),也可以直接写数字,不带单位,代表倍数,这时是字体大小的倍数

4.text-indent的单位有em和px,2em表示缩进2个字符;em是相对单位,其表示的长度相当于本行中字符的倍数;

5.    text-decration常用值

说明
none默认值,无装饰
underline设置文本下划线
overline设置上画线
line-through设置文本删除线

6.垂直对齐方式,不常用;通常使用vertical-align属性设置文本与图片的居中对齐,例如:vertical-align:middle;

7.文本阴影:

text-shadow:color x轴位移(x-offset) y轴位移 模糊半径(blur-radius);

模糊半径只能取正值,如果为0,表示不具有模糊效果;x,y可以取正或负值;

四.超链接伪类:

超链接伪类
伪类名称含义示例
a:link单机访问前的超链接样式a:link{color:red}
a:visited单机访问后的样式a:visited{color:#333}
a:hover鼠标悬浮其上的样式 

a:active

单击未释放的样式 

注意:在对超链接设置样式时,必须遵循顺序:a:link,a:visited,a:hover,a:active;

五.列表样式:

list-style-type:用来设置无序列表<li>标签前面是否有小圆点,常用值有none,disc(实心圆,默认类型),circle(空心圆),

square(实心正方形),decimal(数字);

list-style-image:使用图像替换列表前的标记

list-style-postion:设置在何处放置列表项的标记;

list-style;按照list-style-type,position,image,顺序设置属性值;

六.背景样式:

1.<div>标签;

2.背景属性有背景颜色(background-color)和背景图像(background-image);

背景颜色与color一样采取rgb方式赋值,而且他还有一个特殊值:transparent:透明,是background-color的默认值;

3.背景图像:

设置background-image属性方式:

    例:background-image:url("image/1.jpg);

4.背景重复方式:

background-repeat属性值:

repeat:沿水平和垂直两个方向平铺;

no-repeat:不平铺,即背景图像只显示一次;

repeat-x:只沿水平方向平铺;

repeat-y:只沿垂直方向平铺;

例如:background=repeat:no-repeat;

5.背景定位:

背景图像默认从被修饰的网页元素的左上角开始显示图像,

可以使用具体数值百分比关键值3种方式表示水平和垂直方向的偏移量;

例:background-position:205px 10px;

6.类似于font属性一样,背景可以一次性将多个属性一起声明

background:#C00 url(imge/arrow.gif) 205px 10px no-repeat;

7.背景尺寸:

background-size:

取auto值时,使背景图片保持原样,是默认值;

也可以设置为固定的像素值,例如: background-size:120px 60px;

也可以使用百分数,但它是相对于元素宽度来计算的;

取cover值时,整个背景将填充整个div,

取contain值时,可以让背景图片保持本身的宽高比例,将背景图片缩放到宽度或者高度正好适应所定义背景的区域;

七,CSS渐变:

1.线性渐变:

   background:linear-gradient(position, color1,color2,.....);

为了兼容浏览器,不同浏览器需要在前面加不同的前缀;

例如:-webkit-linear-gradient(position,color1,color2);

2.渐变方向:

to top,to left,to right,to top left,to top right, to buttom left,to buttom right,

3.除了线性渐变,css还提供了径向渐变radial-gradient;径向渐变是圆形或椭圆渐变,颜色不再沿着一条直线渐变;


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页