CSS常用样式 | 青训营笔记

95 阅读2分钟

这是我参与「第五届青训营 」笔记创作活动的第15天

字体属性:(font)

设置字体相关的样式

font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写

文本属性

设置文本相关的样式

属性含义说明
color颜色
line-height行高行高度
text-align水平对齐方式取值:left、center、right
vertical-align垂直对齐方式取值:top、middle、bottom可以用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值:underline、overline、line-through
text-transform字母大小写转换取值:lowercase、uppercase、capitalize首字母大写
letter-spacing字符间距
word-spacing单词间距

背景属性

设置背景的颜色大小等等

属性含义
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
background-position背景图片的显示位置
background-attachment背景图片是否跟随滚动
background

定位方式

通过position属性实现对元素的定位,有四种定位方式

取值含义说明
static默认值按照常规文档流进行显示
relative相对定位相对于标签原来的位置进行的定位
absolute绝对定位相对于第一个非static定位的父标签的定位
fixed固定定位相对于浏览器窗品进行定位

浮动属性

通过float属性来实现元素的浮动,可以让块级元素脱离常规的文档流,向左或向右移动,在同一行显示,

  • left左浮动
  • right右浮动
  • none不浮动,默认值

清除属性

通过clear属性来实现清除,设置元素的哪一侧不允许有浮动元素

  • left左侧不允许出现浮动元素
  • right右侧不允许出现浮动元素
  • both两侧不允许出现浮动元素
  • none允许两侧出现浮动元素,默值

display

通过display属性设置元素是否显示,以及是否独占一行

inline 显示为内联元素,行级元素的默认值

block 显示为块级元素,块级元素的默认值

inline-block 显示为内联元素,但是可以设置宽和高

 visibility

visible 显示

hidden 隐藏