第五章:CSS3美化网页元素知识点:

一:网页文本
1.<span>标签是用来组合HTML文档中的行内元素,他没有固定的格式。
2.字体样式:
 font-famliy:设置字体类型   font-size:设置字体大小  font-style:设置字体风格  font-weight:设置字体的粗细
  font:在一个声明中设置所有字体属性
<注意:英文字体:verdana  选择字体是否含空格:“Times New Roman”
3.字体风格:normal italic oblique 标准字样,斜体字样,倾斜字样。
4.字体的粗细:normal:默认值,标准字样  bold:粗体字体  bolder:更粗字体 ligter:更细的字体
5.字体属性:p span{font:oblique bold 12px “楷体”;}

二:排版网页文本
  color:设置文本颜色 text-align:设置元素水平对齐方式  text-indent:设置首行文本缩进 line-height:设置文本的行高
  text-decoration:设置文本装饰
 1.文本颜色
   (1.rgb 以上R G B三个参数,正整数为0~255;百分比的取值为0%~100%,
   (2.rgba 在rgb基础上控制了alpha透明度的参数,其中透明通道值为0~1   h1{colo:rgba(0,0,255,0.5)}
 2.水平对齐方式
   left:文本排列左边  right:文本排列右边 center:文本排列居中 justify:实现两端文本对齐效果
 3.首行和行高
   p{line-height:28px;text-indent:2em;}
 4.文本装饰(text-decoration)
   none:默认值,标准文本 underline:设置文本的下划线  overline:设置文本的上划线  line-through:设置文本的删除线
 5.垂直对齐方式
  1.p,img{vertical-align:middle;}
 6.文本阴影
 text-shadow:color x轴移动 (x-offset)y轴移动(y-offset) 模糊半径(blur-radius);
  color:阴影颜色,定义绘制阴影时所使用的颜色,如果不设置这个值,则会使文本的颜色作为阴影的颜色。
  x-offset:用来指定阴影部分水平位移量,其值可以是正或负,如果为正在右边,为负在左边。
  y-offset:用来指定阴影部分垂直位移量,其值可以是正或负,如果为正在右边,为负在左边。
  blur-radius:阴影模糊半径,代表阴影向外模糊的模糊范围。值越大阴影向外模糊的范围越大,阴影的边缘就越模糊。这个值
  只能是正值,如果为0,表示不具有模糊效果。

 三:设置超链接和列表样式
  a:link(单机访问前的超链接样式) a:visited(单机访问后的超链接样式) a:hover(鼠标悬浮其上的超链接样式)
  a:active(单机未释放的超链接样式)
 
 列表样式:list-style-type:
 none:无标记符号 disc:实心圆(默认类型) circle:空心圆  square:实心正方形  decimal:数字
 
 四:背景样式
  div布局页面
   背景颜色:(background-color)和背景图像(background-image)两种方式。  特殊值:transparent(透明的)
   背景图像引入:background-image:url("图片路径")
  背景重复方式:(background-repeat)
                 1.repeat:沿水平和垂直两个方向平铺。
                 2.no-repeat:不平铺,及图片只显示一次。
                 3.repeat-x:只沿水平方向平铺。
                 4.repeat-y:只沿垂直方向平铺。
  背景定位:(background-position)
             1.Xpos Ypos :像素值
             2.X% Y% :百分比表示背景位置
             3.X,Y方向:水平方向关键值(left,center,right)垂直方向关键值(top: center,bottom:)
  背景尺寸:background-size:auto;(默认值,无变化。)
                             :(改成固定像素点)
             background-size:cover;(整个图片放大填充)注意:(居中加background-position:center;)
                            :contain(可以让背景图片保持本身的宽高比例,将背景图片缩放到宽度或高度正好适应定义的区域)
       
  五:CSS3渐变
             linear-gradient(position,color,color)
      浏览器:TE 加前缀:-ms-
              火狐     :-moz-
              谷歌     :-webkit-
        
       渐变的方向:to bottom :颜色从顶部到底部。 to left:颜色从右到左。  to right:颜色从左到右。
                   to top left:右下方到左上方。  to top ringht:颜色从左下方到右上方。
                   to bottom left:颜色从右上方到左下方。 to bottom right:颜色从左上方到右下方
        注意:径向渐变radial-gradient。径向渐变是圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个新的
              起点朝所以方向混合。
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值