06css之span标签、字体属性、文本属性、文本颜色、 排版文本段落、文本修饰和垂直对齐、文本阴影、浏览器兼容性

<span>标签:

作用:
能让某几个文字或者某个词语凸显出来.
示例:

<p>享受<span class="show">“海融式”</span>教育服务</p>
<p>在海融软件,有一群人默默支持你成就
      <span id="dream">互联网+梦想</span></p>
<p class="bird">选择<span>海融软件</span>,成就你的梦想</p>

字体样式:

在这里插入图片描述
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 "楷体";}

文本属性:

在这里插入图片描述

文本颜色:

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

这个我测试不管用,希望各位爷进行测试一下,如果成功了,可以给我看一下!!

文本阴影:

text-shadow : color  x-offset  y-offset  blur-radius;

color 阴影颜色
x-offset X轴位移,用来指定阴影水平位移量
y-offset Y轴位移,用来指定阴影垂直位移量
blur-radius 阴影模糊半径,代表阴影向外模糊的模糊范围

浏览器兼容性:
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值