CSS3美化网页元素

1.div和span标签

<div>标签是块元素,独占一行,能够指定宽高的一个区域。可以用来布局网页。

<span>标签是指组合文档中的行内元素。可以为某一块范围加span标签!

2.字体样式:

  • font-style:设置字体风格
  • font-weight:设置字体粗细
  • font-size:设置字体大小
  • font-family:设置字体类型
p{
    font-family:verdana ,"楷体";
}

注释:设置字体类型,优先写英文字体,中文写其后面。

p{

    font-size:12px;
}

注释:设置字体大小为12px(像素)

p{
    
    font-style:normal;  

}

注释:normal是标准字体,italic是斜体,oblique是倾斜字体。一般常用是italic。

p{

    font-weight:bold;
}

注释:bold是粗体,normal是标准(默认),bolder是更粗的字体,lighter是更细的字体。
bold是700,normal是400.

注意使用顺序:字体风格> 字体粗细 > 字体大小 > 字体类型

3、网页文本排版

  • color:设置文本颜色
  • text-align:设置水平线对齐
  • text-indent:文本缩进     常用单位 px 或者 em 
  • line- height:文本行高
  • text-decoration:文本装饰

4、水平对齐方式、垂直对齐

水平对齐   text-align:

  • left    文本排列到左边,默认值
  • right   文本排列到右边
  • center   文本排列到中间,居中显示
  • justify   两端对齐
  • 垂直对齐   vertical - align
  • middle  中间对齐
  • top    上对齐
  • bottom 下对齐

5、文本装饰

  • text- decoration
  • none     默认值,标准文本
  • underline     设置文本下划线
  • overline      设置文本上划线、
  • line -through    删除线,在文本中间

6、文本阴影

text- shadow :color  x位置  y位置   模糊半径

注释:color 是文本颜色  x是水平位置  y是垂直位置   模糊半径是范围

7、超文本链接

a:hover {

   color:red;

}

超链接伪类:
a:link      单击访问前  
 
a:visited   单击访问后

a:hover     鼠标悬浮其上的链接样式

a:active    鼠标单击为释放的样式

注意:写超链接伪类一定要按照上面的顺序写,不可颠倒!!!

8、列表样式

list-style-type/list-style:

none     无标记符号,

disc     实心圆,默认类型

circk    空心圆

square   实心正方形 

decimal   数字

注意:一般用的较多是list-style,表示在一个声明设置所有的列表属性

9、背景属性

背景颜色:

  • background - color
  • transparent 可以设置透明色

背景图像:

  • background -  image :url("图片路径");
  • repeat     水平和垂直连个方向平铺
  • no-repeat   不平铺,只显示一次
  • repeat - x   只沿着水平方向平铺
  • repeat - y  只沿着垂直方向平铺

背景定位:

  • left   左边   right  右边 center  中间     --------- > 沿着水平方向
  • top  上面  center  中间   bottom 下面  --------- >  沿着垂直方向

注意:可以一起设置背景样式,如下:

background :red url(" 图片路径") 250px  10px  no - repeat 

注释:red是颜色,url是图片,250是水平方向, 10是垂直方向  no - repeat 是不平铺

背景尺寸:background - size:

  • auto      -----   自动,默认的
  • percentage ------  百分值,相对元素宽度计算
  • cover -----------   放大填充
  • contain  ------- 缩放图片

10、线性渐变

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

注释:position 是位置,color是颜色,颜色可以很过种,没有要求!

注意:渐变需要浏览器兼容,要加上下面浏览器前缀!

background: -webkit-linear-gradient(left,yellow,red);  Chrome和Safari浏览器
background: -moz-linear-gradient(right,yellow,red);   Firefox浏览器
background: -o-linear-gradient(right,yellow,red);   Opera浏览器
background: -ms-linear-gradient(right,yellow,red);  IE浏览器
background: linear-gradient(to right,yellow,red);

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值