设为首页 加入收藏

TOP

CSS基础属性介绍(一)
2019-09-03 03:42:50 】 浏览:34
Tags:CSS 基础 属性 介绍

css属性分类介绍

CSS分类目录

  1. 文本/字体/颜色
    1. 文本相关
    2. 字体相关
    3. 颜色相关
    4. 背景相关
  2. 大小/布局
    1. 大小属性
    2. margin 外边距
    3. padding 内边距
    4. border 边框
    5. position 定位
  3. 列表/表格
    1. 多列属性
    2. 可伸缩框属性
    3. 列表属性
    4. Grid属性
    5. Table属性
  4. 动画属性
    1. Animation 动画属性
    2. Transition 过渡属性

CSS属性分类

文本/字体/颜色/背景

字体类

  1. font-family:指定字体
    1. 需要考虑客户端机器上是否装有字体
    2. 可以排列多个字体,用逗号分隔,如果有空格用引号分隔
    3. 最后一个建议放通用字体名,这个属性只有几个选项:serif | sans-serif | cursive | fantasy | monospace
  2. font-size:字体大小,要注意有绝对大小,相对大小,长度,百分比
    1. 一般建议采用相对大小,即em或者rem
    2. 典型的长度单位,详细信息请参考这里
  3. font-style:正常体、斜体、倾斜体
  4. font-weight:设置粗体
  5. font-variant:用来将所有字体都变成大写,但是原来是大写的字体呢又要比默认的要大一些
  6. font:
    1. 简写形式,如上所有跟字体相关的字体混合在一起
    2. font-family是必选的,而且一定要在最后;font-size如果有,必须出现在倒数第二个, 后面可以用/跟一个line-height的设置
    3. 剩下的font-style, font-weight, font-variant就无所谓了,前面任意排列
    4. font还支持一些类似caption, icon等快捷描述
    5. 详细请参考这里
  7. line-height:一个数字,默认差不多为1.2,有normal/数字/长度/百分比
    1. 一般建议使用纯数字, 用长度和百分比都在某些特殊情况下超出预期,即子元素的行高被父亲元素设置了,同时子元素还有默认的浏览器字体设置的场景。参考这里
    2. 长度可以参考这里
  8. font-size-adjust:不太常用属性,用来设置英文字体的大小写字母之间的高度比例的

文本类

  1. word-spacing:词和词之间的距离,默认值是由字体来定的,自定义可以定义为长度/百分比,对于中文来讲,也是空格
  2. letter-spacing:字母和字母之间的距离,默认值是由字体来定的,可以自定义为长度单位
  3. word-break:文字换行逻辑
    1. normal:默认值,英文空格处换行,中文任意字符换行;
    2. break-all:都采用中文的方式任意换行;
    3. keep-all:都采用英文的方式,中文也要遇到了空格或者回车等特殊符号才换行
    4. break-word:跟normal类似,不过即使min_width(即单个单词的长度)大于容器的width的时候,会换行,而不是超出
  4. word-wrap/overflow-wrap:normal/break-word。word-wrap是overflow-wrap的别名。逻辑跟如上word-break的break-word的逻辑类似,要溢出的时候是否换行, 详情参考这里
  5. vertical-align: 上下对齐方式
    1. 只针对display的值为inline和table-cell的元素有效,比如span,img,input,td等元素,对于其他块级元素都不生效
    2. 取值范围为枚举/长度/百分比
    3. 枚举取值为:baseline(基线默认)/super(上标)/sub(下标)/top(父元素顶部)/bottom(父元素底部)/middle(父元素中部)/text-top(文字顶部)/text-bottom(文字底部)
  6. text-align: 左右对齐方式
    1. 也是指针对行内元素有效,不能针对块级元素进行控制
    2. 取值为:left, right, center和justify(两侧对齐)
  7. text-transform:大小写转换
    1. 取值为枚举:capitalize:首字母大写;uppercase/lowercase; none;
  8. text-shadow:阴影设置,可以设置阴影的颜色,相对原字体的位置,以及模糊半径
  9. text-decoration:设置颜色、位置、样式。分别对应了text-decoration-color,text-decoration-line,text-decoration-style
    1. 位置可以为:上划线、下划线、删除线、闪烁和无
    2. 样式可以为:实线(solid)、双实线(double)、dotted(点虚线)、dashed(虚线)、wavy(波浪线)
    3. 注意:父亲会影响儿子,且儿子无法取消
  10. text-indent:缩进,段落第一行文本要空多少距离,单位为长度
  11. text-justiy:在text-align被设置为justiy的时候用来控制是在单词之间加空格(英文),还是在字母之间加空格(中文)
  12. text-overflow:文本溢出的截断,可以用'...'来代替,或者用自己定义的字符串来代替超出字符
    1. 需要配合 overflow: hidden 的属性来控制, 否则还是会超出边距显示
  13. white-space:控制空格符,"\t", "\n"以及显示的时候是否折行显示的属性
    1. normal/nowrap/pre/pre-wrap/pre-line:详情参考这里

颜色&背景类

  1. color:背景颜色,关于眼色的值一共有三种,枚举值,#xxx, rgb, hsl,详细请参考这里
  2. opacity:不透明度,即设置颜色的透明的程度,0为透明,1为不透明,单独的属性设置和用color的rgba函数来设置都一样
  3. backgroud-color:背景颜色
  4. backgroud-image:
    1. 可以指定多个图片,第一个图片最接近用户,border会最后绘制
  5. backgroud-clip:背景图片延伸到盒子模型的范围,到文本、到边框内沿,到边框外沿
  6. backgroud-origin:跟backgroud-clip类似,只是只作用域backgroud-image, 可以取值为border-box, padding-box, content-box
  7. backgroud-position:背景图片的位置,可以设置为枚举值,也可以设置为相对于左上角的坐标,分别为长度单位,这个值一般要跟backgroud-repeat: no-repeat配合使用
  8. backgroud-size:设置背景图片的大小,可以控制压缩或者截断或者比例
    1. auto:自动
    2. cover:图片做截断,装满背景,但是背景图片可能显示不全
    3. contain:图片不做截断,但是有可能装不满背景
    4. 还可以指定长宽来按照指定的比例来缩放背景图片
  9. backgroud-repeat:不重复;沿着x,y轴重复(最后一个图片可能会被截断);图片不截断,但是中间留空隙;图片不截断,同时拉伸/压缩图片保证图片之间无空隙;
  10. backgroud-attachment:背景图片是否随着鼠标滚轮而变动位置
  11. backgroud:如上各个backgroud开头的属性的组合,组合比较自由,一共8个元素:
    1. backgroud-color必须出现在最后;
    2. 盒子属性有back
      CSS基础属性介绍(一) https://www.cppentry.com/bencandy.php?fid=107&id=249613

首页 上一页 1 2 3 4 下一页 尾页 1/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇HTML连载31-制作一个百度首页 下一篇前端渲染图片报403问题解决方案