CSS页面元素

1.常用字体元素

（1）font-style 用于规定斜体文本

  • normal - 文本正常显示
  • italic - 文本斜体显示
  • oblique - 文本倾斜显示

个人理解，italic是把每个文字都有所改动，来改变整体风格，而oblique是把正常文本倾斜，通常情况下，二者外观一致

（2）font-family 定义文本的字体系列

可以声明多个字体，以，隔开，例：

font-family: "Times New Roman",楷体, Serif;

（3）font-weight设置文本的粗细

  • normal 正常
  • bold 加粗
  • bolder 更粗
  • lighter 细

可以使用数字进行规定，100 对应最细的字体，900 对应最粗的字体。数字 400 等价于 normal，而 700 等价于 bold

 font-weight:100;

（4）font-size 设置字体大小

使用px或者em

推荐使用em  1em=16px

（5）font 设置所有字体属性

font:italic bold 20px/20px 楷体;

可按照如下顺序：

  • font-style
  • font-weight
  • font-size/line-height
  • font-family

2.常用文本元素

（1）text-indent 缩进文本

text-indent：2em 首行缩进2字符

（2）line-height 设置行间的距离

（3）color 文本颜色

三种表达方式：

h1
  {
  color:red;
  }
h1
  {
  color:#00ff00;
  }
h1
  {
  color:rgb(0,0,255);
  }

还有种控制透明度

  color: rgba(0,255,0,0.2);

rgba 的范围为0~1，越小越透明

（4）text-align 文本对齐方式

（5）word-spacing 字或者英文之间的间隔

（6）letter-spacing 字符和字母之间的间隔

（7）text-decoration 文本修饰

  • none  去除其余修饰，包括超链接的下划线
  • underline 下划线
  • overline 上划线
  • line-through 中划线

补充：水平对齐参照物

<style >
img,span{
    vertical-align: middle;
}
</style>
</head>
<body>
<p>
    <img src="image/1.png" alt="">
    <span>这是一张图片</span>
</p>
</body>

此时会发现字体在图片居中位置

 

posted @ 2020-10-18 15:44  null_lii  阅读(142)  评论(0)    收藏  举报