css属性分类介绍
CSS分类目录
- 文本/字体/颜色
- 文本相关
- 字体相关
- 颜色相关
- 背景相关
- 大小/布局
- 大小属性
- margin 外边距
- padding 内边距
- border 边框
- position 定位
- 列表/表格
- 多列属性
- 可伸缩框属性
- 列表属性
- Grid属性
- Table属性
- 动画属性
- Animation 动画属性
- Transition 过渡属性
CSS属性分类
文本/字体/颜色/背景
字体类
- font-family:指定字体
- 需要考虑客户端机器上是否装有字体
- 可以排列多个字体,用逗号分隔,如果有空格用引号分隔
- 最后一个建议放通用字体名,这个属性只有几个选项:serif | sans-serif | cursive | fantasy | monospace
- font-size:字体大小,要注意有绝对大小,相对大小,长度,百分比
- 一般建议采用相对大小,即em或者rem
- 典型的长度单位,详细信息请参考这里
- font-style:正常体、斜体、倾斜体
- font-weight:设置粗体
- font-variant:用来将所有字体都变成大写,但是原来是大写的字体呢又要比默认的要大一些
- font:
- 简写形式,如上所有跟字体相关的字体混合在一起
- font-family是必选的,而且一定要在最后;font-size如果有,必须出现在倒数第二个, 后面可以用
/ 跟一个line-height的设置
- 剩下的font-style, font-weight, font-variant就无所谓了,前面任意排列
- font还支持一些类似caption, icon等快捷描述
- 详细请参考这里
- line-height:一个数字,默认差不多为1.2,有normal/数字/长度/百分比
- 一般建议使用纯数字, 用长度和百分比都在某些特殊情况下超出预期,即子元素的行高被父亲元素设置了,同时子元素还有默认的浏览器字体设置的场景。参考这里
- 长度可以参考这里
- font-size-adjust:不太常用属性,用来设置英文字体的大小写字母之间的高度比例的
文本类
- word-spacing:词和词之间的距离,默认值是由字体来定的,自定义可以定义为长度/百分比,对于中文来讲,也是空格
- letter-spacing:字母和字母之间的距离,默认值是由字体来定的,可以自定义为长度单位
- word-break:文字换行逻辑
- normal:默认值,英文空格处换行,中文任意字符换行;
- break-all:都采用中文的方式任意换行;
- keep-all:都采用英文的方式,中文也要遇到了空格或者回车等特殊符号才换行
- break-word:跟normal类似,不过即使min_width(即单个单词的长度)大于容器的width的时候,会换行,而不是超出
- word-wrap/overflow-wrap:normal/break-word。word-wrap是overflow-wrap的别名。逻辑跟如上word-break的break-word的逻辑类似,要溢出的时候是否换行, 详情参考这里
- vertical-align: 上下对齐方式
- 只针对display的值为inline和table-cell的元素有效,比如span,img,input,td等元素,对于其他块级元素都不生效
- 取值范围为枚举/长度/百分比
- 枚举取值为:baseline(基线默认)/super(上标)/sub(下标)/top(父元素顶部)/bottom(父元素底部)/middle(父元素中部)/text-top(文字顶部)/text-bottom(文字底部)
- text-align: 左右对齐方式
- 也是指针对行内元素有效,不能针对块级元素进行控制
- 取值为:left, right, center和justify(两侧对齐)
- text-transform:大小写转换
- 取值为枚举:capitalize:首字母大写;uppercase/lowercase; none;
- text-shadow:阴影设置,可以设置阴影的颜色,相对原字体的位置,以及模糊半径
- text-decoration:设置颜色、位置、样式。分别对应了text-decoration-color,text-decoration-line,text-decoration-style
- 位置可以为:上划线、下划线、删除线、闪烁和无
- 样式可以为:实线(solid)、双实线(double)、dotted(点虚线)、dashed(虚线)、wavy(波浪线)
- 注意:父亲会影响儿子,且儿子无法取消
- text-indent:缩进,段落第一行文本要空多少距离,单位为长度
- text-justiy:在text-align被设置为justiy的时候用来控制是在单词之间加空格(英文),还是在字母之间加空格(中文)
- text-overflow:文本溢出的截断,可以用'...'来代替,或者用自己定义的字符串来代替超出字符
- 需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显示
- white-space:控制空格符,"\t", "\n"以及显示的时候是否折行显示的属性
- normal/nowrap/pre/pre-wrap/pre-line:详情参考这里
颜色&背景类
- color:背景颜色,关于眼色的值一共有三种,枚举值,#xxx, rgb, hsl,详细请参考这里
- opacity:不透明度,即设置颜色的透明的程度,0为透明,1为不透明,单独的属性设置和用color的rgba函数来设置都一样
- backgroud-color:背景颜色
- backgroud-image:
- 可以指定多个图片,第一个图片最接近用户,border会最后绘制
- backgroud-clip:背景图片延伸到盒子模型的范围,到文本、到边框内沿,到边框外沿
- backgroud-origin:跟backgroud-clip类似,只是只作用域backgroud-image, 可以取值为border-box, padding-box, content-box
- backgroud-position:背景图片的位置,可以设置为枚举值,也可以设置为相对于左上角的坐标,分别为长度单位,这个值一般要跟backgroud-repeat: no-repeat配合使用
- backgroud-size:设置背景图片的大小,可以控制压缩或者截断或者比例
- auto:自动
- cover:图片做截断,装满背景,但是背景图片可能显示不全
- contain:图片不做截断,但是有可能装不满背景
- 还可以指定长宽来按照指定的比例来缩放背景图片
- backgroud-repeat:不重复;沿着x,y轴重复(最后一个图片可能会被截断);图片不截断,但是中间留空隙;图片不截断,同时拉伸/压缩图片保证图片之间无空隙;
- backgroud-attachment:背景图片是否随着鼠标滚轮而变动位置
- backgroud:如上各个backgroud开头的属性的组合,组合比较自由,一共8个元素:
- backgroud-color必须出现在最后;
- 盒子属性有back
|