html文本的相关属性

一、 文本的相关属性

文字大小,文字类型,文字粗细,文字的倾斜,行高,文字下划线,文字中划线,颜色,缩进,水平对齐,垂直居中,字符间距

字符属性font

font:font-style font-weight font-size/line-height font-family;
font-style:字体形态  nomal 正常/italic 斜体
font-weight: 字体粗细 100-900   400  正常 >400粗
<400细 / 英文单词 400  相当于 normal 默认值
bold 粗 相当于600 bolder  light   lighter(了解)
font-size:字体大小 px  (掌握) /  %  / em(父元素字体大小) /rem (了解)
line-height   行高
font-family:字型 字体家族

建议:用css控制元素样式 不要用标签去实现

文本相关属性一般都是可以继承的 font-,line-,text-,color,list-都可以父传子,但是当你给子元素单独设置这些属性的时候,你设置的那个值一定会覆盖继承下来的属性

设置元素属性的优先级:
继承性属性<*<TagName<class<id

行高line-height

line-height=盒子高度时 使单行文本垂直居中

单位: px / 数值1.5 or 2 / %

1.5的含义是字体大小的1.5

% 的含义是字体大小的%倍

font-family字体家族

font-family:"楷体""微软雅黑""Times New Roman",Arial;
  1. 同时声明多个字体 每个字体以,隔开
  2. 中文字符或者几个英文单词组成的字体 要加“” or ‘’引起来,如果字体仅仅只有一个英文单词那就可以不用引起来
  3. 依次向下找 如果有则解析 如果没有就继续向下找
  4. 尽量不要出现中文汉字 以免乱码 你要写这个字型对应的英文名字或者unicode编码符号

文本修饰属性

text-decoration:overline上划线/underline下划线/ line-through中划线/none无线 

缩进属性

text-indent:px/ em / rem;
+ 向右缩进
- 向左缩进
- 

字符间距

letter-spacing:px;

文本水平居中

text-align:left/right/center;

不光可以居中文字还可以居中图片,因为图片具有文本的特性

发布了8 篇原创文章 · 获赞 0 · 访问量 45

猜你喜欢

转载自blog.csdn.net/weixin_43370067/article/details/105602239