CSS-美化网页元素

目录

 

CSS元素 

1、使用CSS的意义

2、字体样式

3、文本样式

4、文本阴影

5、超链接伪类

6、列表样式

7、背景样式

8、CSS渐变样式

9、小结


CSS元素 

1、使用CSS的意义

  • 有效的传递页面信息
  • 使用CSS美化过的页面文本,使页面漂亮、美观,吸引用户
  • 可以很好的突出页面的主题内容,使用户第一眼可以看到页面主要内容
  • 具有良好的用户体验

< span>标签:能让某几个文字或者某个词语凸显出来,从而添加对应的样式!

<p>好好学习,<span>天天向上</span></p>

2、字体样式

字体类型 font-family

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}

字体大小 font-size

  • px(像素)
  • em、rem、cm、mm、pt、pc
     
h1{font-size:24px;}
h2{font-size:16px;}
h3{font-size:2em;}
span{font-size:12pt;}
strong{font-size:13pc;}

字体风格 font-style
normal、italic和oblique

字体的粗细 font-weight

字体属性 font

字体属性的顺序:字体风格→字体粗细→字体大小→字体类型

p span{
font:oblique bold 12px "楷体";
}

3、文本样式

文本颜色color

  • RGB:十六进制方法表示颜色:前两位表示红色分量,中间两位表示绿色分量,最后两位表示蓝色分量rgb(r,g,b) : 正整数的取值为0~255
  • RGBA:在RGB基础上增加了控制alpha透明度的参数,其中这个透明通道值为0~1
color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);
color:rgba(0,0,255,0.5);

排版文本段落

水平对齐方式:text-align属性

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

文本修饰和垂直对齐

文本装饰:text-decoration属性

垂直对齐方式:vertical-align属性:middle、top、bottom

4、文本阴影

text-shadow属性在CSS2.0中出现,但迟迟未被各大浏览器所支持,因此在CSS2.1中被废弃,如今在CSS3中得到了各大浏览器的支持!

5、超链接伪类

 

通常只设置两种状态,一是a{color:#333;},一是a:hover { color:#B46210;}

6、列表样式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style

li{
    list-style:none;
}

去除列表前面的小黑点

7、背景样式

背景图像:background-image
背景颜色:background-color

设置背景图像

  • background-image属性
  • background-repeat属性

背景定位:background-position属性

设置背景

背景属性:background属性

.title {
font-size:18px;
font-weight:bold;
color:#FFF;
text-indent:1em;
line-height:35px;
background:#C00 url(../image/arrow-down.gif) 205px 10px no-repeat;
}
background: 背景颜色 背景图像 背景定位 背景不重复显示

背景尺寸 background-size
 

8、CSS渐变样式

推荐一个网站:http://color.oulu.me/

线性渐变
颜色沿着一条直线过渡:从左到右、从右到左、从上到下等
径向渐变
圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向混合

CSS3渐变兼容

  • IE浏览器是Trident内核,加前缀:-ms-
  • Chrome浏览器是Webkit内核,加前缀:-webkit-
  • Safari浏览器是Webkit内核,加前缀:-webkit-
  • Opera浏览器是Blink内核,加前缀:-o-
  • Firefox浏览器是Mozilla内核,加前缀:-moz-

兼容Webkit内核的浏览器

-webkit-linear-gradient ( position, 1 color1, color2,…)

 

9、小结

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

寇大大

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值