CSS3美化网页元素

原创 2018年04月15日 21:04:21

一.<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;径向渐变是圆形或椭圆渐变,颜色不再沿着一条直线渐变;


谁能撼动微软

谁能撼动微软 蓝森林 http://www.lslnet.com 2000年3月23日 10:03作 者: Siva此文为酒醉之言,可当戏言尔 Microsoft 有很多人喜欢这样写M$,足见微软在人...
  • Virtual
  • Virtual
  • 2001-01-12 11:51:00
  • 1003

使用HTML语言和CSS开发商业站点_CSS3美化网页元素

第5章 CSS3美化网页元素 一.编辑网页文本 1.文本在网页中的意义 (1).有效地传递页面信息。 (2).使用CSS样式美化过的页面文本,使页面漂亮,美观,吸引客户。 (3).可以很好地...
  • hacker_A
  • hacker_A
  • 2017-09-11 13:20:47
  • 384

使用CSS3美化复选框checkbox

方法一 :使用图片 .checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-im...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016-06-02 18:30:43
  • 1935

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是...
  • u010571913
  • u010571913
  • 2015-07-20 15:48:54
  • 2786

css3 select 美化

主要针对右边的箭头进行优化,因为不同的浏览器默认的右边的箭头不一样,但是ie9不支持 appearance:none;,所以ie9以及以下版本就用js写一下,不优化,使用默认的样式 html页面代码...
  • u013018357
  • u013018357
  • 2017-02-04 10:11:05
  • 1005

前端案例--纯CSS3美化复选框

技巧:将input按钮和美化内容都放在label标签内,再通过定位将input按钮溢出隐藏!使用CSS3中的E:checked伪类选择器触发美化表单!纯CSS3美化复选框效果图:HTML:...
  • macanfa
  • macanfa
  • 2016-07-06 00:41:28
  • 1507

css美化网页元素

《span》标签 语法:内容 然后在head里面的style标签中调用span{  } 《既可以在类选择器和ID选择器、标签选择器中使用》 字体样式: 1. font-f...
  • tj857172
  • tj857172
  • 2017-09-28 15:13:06
  • 146

html5和css3表单样式美化插件

这是一款使用html5新的type属性制作的表单,并用纯css3来对表单进行美化的html5和css3表单样式美化插件。该表单美化插件美观大方,易于集成,十分实用。 在线演示...
  • natalie86
  • natalie86
  • 2015-01-29 13:26:10
  • 1464

font艺术字体

  • 2013年06月06日 15:10
  • 2.29MB
  • 下载

第五章 CSS美化网页元素

练习1: 无标题文档 p{ color: #000; font-weight: bolder; font-size: 24px; } h3 strong{ color: #F00;...
  • qq_36074150
  • qq_36074150
  • 2016-10-16 17:02:12
  • 1781
收藏助手
不良信息举报
您举报文章:CSS3美化网页元素
举报原因:
原因补充:

(最多只允许输入30个字)