CSS基础属性介绍

2019-08-26 05:46:01来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

CSS基础属性介绍

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. 盒子属性有backgroud-clip, backgroud-origin,可以出现0,1,2次
    3. backgroud-size必须出现在backgroud-position之后,用/连接
    4. backgroud-image, backgroud-position, backgroud-size, backgroud-repeat, backgroud-attachment 可以任意出现

文字连接&鼠标样式

  1. a:link 文字连接默认格式; a:visited 访问过后的链接样式;a:active 鼠标点击时候的样式;a:hover 鼠标移动上去的样式;
  2. 鼠标样式:help 加?;pointer 变为手;progress:请等待;wait:系统繁忙;move:拖拽;not-allowed:不能执行;等等,详细请参考这里

大小/布局类

大小属性

  1. width/height:包含了width,max-width,min-width几个配套的属性,值为长度/百分比;同时还可以设置一些属性值,用于表达width用于内容级别,还是border级别等;
  2. max-width/max-height:最大宽度/高度
  3. min-width/min-height:最小宽度/高度

盒子模型类

  1. border:包含了粗细、样式、颜色。
    1. border-width:可以有1~4个长度值。1个代表4个边;2个的话代表横边和纵边;3个代表上,左&右,下;4个代表上,右,下,左
    2. border-style:可以有1~4个枚举值。跟text-decoration类似,可以有实线、双实线、虚线、点虚线、波浪线等,还可以有浮雕、陷入、突出等效果;
    3. border-color:可以有1~4个颜色值。
    4. border-image:可以用来设置边框的图片,用来显示一些比较漂亮的边框,图片选择哪些部分来作为边框请参考这里
    5. border-radius:用来设置圆角的
    6. box-shadow:边框的模糊划效果,跟text-shadow是类似的效果,可以设置阴影相对位置/阴影模糊半径/扩散半径/阴影颜色;
  2. outline:outline跟border类似, 是画边框的,
    1. 跟border的区别是 1. 不占盒子模型宽度; 2. 可能不是矩形;
    2. 准确来说, outline应该不算是盒子模型的属性
    3. 跟border类似有, outline-style, outline-color, outline-width三个子属性
  3. margin/padding:外边距,内边距的属性,可以有1~4个值,不同个数的值代表函数同边;
  4. margin-top/margin-bottom/margin-left/margin-right:对应的控制4个边的外边距的属性
  5. padding-top/padding-bottom/padding-left/padding-right:对应的控制4个边的内边距的属性

布局类

基础定位类

  1. float:浮动属性
  2. clear:清除浮动
  3. position:位置类型
  4. top/left/bottom/right:如果设置了position为非static的话,就可以设置这几个值来调整div的相对位置
  5. display:显示类型
  6. visibility:是否显示,设置为hidden则不显示,跟display:none最大的区别就在其还是会占据空间;还有个跟表格相关的collapse的选项;
  7. overflow:visible(默认值), 会显示出来;hidden, 不显示了;scroll,增加滚动条;auto,交给浏览器来判断是否装得下,装不下就加滚动条;
  8. clip:用来剪切一个形状的属性,可以剪切为圆形,不规则多边形,圆弧等形状
  9. transform:对元素属性主要是用来对某个元素进行旋转,偏移等,demo效果请参考这里。
  10. z-index:
    1. 不同z-index之间的比较只针对父亲和直属子元素,一个比较好的理解是给理解成目录版本号,详细请参考这里
    2. 除了z-index之外,还有其他的一些属性也会生成一个新的层叠上下文
      1. z-index不为auto:非static的元素,或者flex元素
      2. opacity小于1, 即元素半透明
      3. transform不为nong的元素,即有各种角度变换的操作等

多列属性

  1. columns:像论文一样将文章按照多列的方式来展示,可以分成任意多列;
  2. column-count:分成几列来显示文本
  3. column-gap:每一列之间的间距大小
  4. column-rule:每一列之间的间隔样式(类似border)
  5. column-span:可以将某段文字横跨所有列, 比如标题,或者将文章分成几个格子来展现
  6. column-width:每一个列的宽度;

Flex布局

父亲元素设置

基本属性设置

弹性布局,更多详细请参考这里

该布局主要用于单行的横向排版布局, 相比于float等布局方式主要好处在于其不脱离文档流, 控制比例方便

  1. display:flex:将父亲设置为 flex 弹性布局
  2. flex-direction:row(从左往右), row-reverse(从右往左), column(从上往下), column-reverse(从下往上)
    1. 主轴:以从左往右为例, 就是左->右;
    2. 交叉轴:就是垂直于主轴的方向,以rtl为例, 就是上->下;
    3. 起始和终止:以左->右布局为例, 起始就是左边交叉轴->右边交叉轴;
    4. 主轴和交叉轴概念很重要,因为各种属性都是控制区块是如何在主轴和交叉轴上面分布的;
  3. flex-wrap:沿着主轴的元素如果超出父元素宽度之后,是否自动折行显示新子元素,默认不折行,直接超出父元素显示;
    1. wrap:换行;nowrap:不换行;
  4. flex-flow:将flex-direction和flex-wrap合起来的简写属性;

元素对齐与空间分配

  1. align-items:元素在交叉轴上的高度控制
    1. flex-start:顶部对齐,不自动拉伸高度
    2. felx-end:底部对齐,不自动拉伸高度
    3. center:中间对齐
    4. stretch:默认值,自动拉伸占满所有高度
  2. justify-content:在主轴上的布局方式
    1. flex-start:靠左对齐
    2. flex-end:靠右对齐
    3. center:居中
    4. space-round:平均分布,左右也留白
    5. space-between:平均分布,左右对齐边界
  3. align-content:对于多行的flex容器设置行与行之间的排布

子元素宽度属性

占据宽度设置

  1. flex-bias:用来决定子元素的初始长度
    1. 默认为auto,意思是让浏览器来决定宽度,如果设置了width,就用;否则就浏览器自己计算;
    2. 也可以人工指定绝对值或者百分比(相对父亲),用来手动指定宽度
  2. flex-grow:一个绝对的数字,如果子元素之和没有父元素宽的话,就用这个数字的相对比例来决定每个元素如何分配剩下的空间
  3. flex-shrink:跟flex-grow类似,只不过是子元素之和大于父元素的时候,怎么压缩,不过压缩不会无限制压缩,每个元素都会有个最小宽度。
    1. 具体grow和shrink在实际应用当中的表现可以参考这里
  4. flex:如上三个属性的简写,可以为枚举值或者1~3个数字
    1. auto:相当于1 1 auto,即自动伸长,也自动伸缩,宽度由浏览器决定
    2. initial: 默认值, 相当于0 1 auto, 即不自动伸长,但是自动收缩,宽度由浏览器决定
    3. none:相当于0 0 auto,即不自动伸长,也不自动收缩,宽度由浏览器决定
    4. 如果是一个值:
      1. 如果是一个无单位的数,会被当成flex-grow的值
      2. 如果是一个长度/宽度单位,会被当成flex-bias的值
    5. 如果是两个值:
      1. 第一个值必须是一个无单位的数,当成是flex-grow的值
      2. 第二个值可以是:
        1. 一个无单位的数,当成是flex-shrink的值
        2. 一个长度/宽度单位,会被当成是flex-bias的值
    6. 如果是三个值
      1. 第一个值必须是无单位的数,会被当成flex-grow的值
      2. 第二个值必须是无单位的数,会被当成是flex-shrink的值
      3. 第三个值必须是长度/宽度单位或者枚举值,被当成flex-bias的值
      4. 占据高度设置
  5. align-self:在子元素上面设置元素在交叉轴上面的高度控制
    1. 默认为父亲的align-items的值
    2. 如果设置了,就覆盖父亲的值,值得取值范围和含义跟align-items一模一样
    3. 排序设置
  6. order:如果子元素设置了该属性,则各子元素按照order值排序,否则按照文档出现的先后顺序排序

网格布局

网格布局跟Flex弹性布局是类似的,都是css3新出的属性。

Flex主要针对的是单行的布局,一般不会换行。Grid主要针对的是表格类多行布局,可以将其想象成在css中控制类似excel的表格。

相比于普通的html中的table布局,Grid布局一方面主要是在 css 中控制表格效果,另一方面是在合并单元格方面比表格布局会更灵活。

更多跟Grid布局相关的信息,请参考这里

父亲属性

  1. display: grid:将父亲设置为表格布局属性,所有其直属儿子都会按照表格方式布局
  2. grid-template-columns:将表格分为多少列
    1. 可以直接写100px, 100px, 100px 将表格分为三个 100px 的列
    2. 也可以写 1fr, 1fr, 1fr 将表格均分为三个相同的列,主要 fr 是专门为grid布局新出的一个单位
    3. 也可以写 repeat(3, 1fr) 达到跟上面一样的效果,这样可以减少书写的量
    4. 还可以为每条线命名,这样儿子就可以不用坐标,而用名字来定位,有的时候这样代码会更可读一些,比如
      1. grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
  3. grid-template-rows:将表格分为多少行,同上
  4. grid-auto-rows:设置每一行的高度,可以用minmax(100px, auto)来设置为最少100px, 最高就让浏览器自己设置
  5. grid-auto-columns:同grid-auto-rows
  6. grid-column-gap:列与列之间的宽度,一个长度单位
  7. grid-row-gap:行与行之间的宽度,一个长度单位
  8. grid-gap:如上两个属性的简写
    1. 如果只有一个值,会同时应用到行与列的间距
    2. 如果有两个值,第一个用到行,第二个用到列
  9. grid-template-areas:这个是基于命名网格的定位, 在该属性中将所有单元格属于哪个儿子都写出来,详情请参考这里

儿子属性
儿子定位默认是从左到右,从上到下,按照单元格依次排布的。

而Grid属性最大的作用就是可以弹性布局,即合并单元格,每个儿子可以指定自己所占据的单元格的区间。

设置的方式有多种:

  1. grid-column-start/grid-column-end/grid-row-start/grid-row-end:这四个属性就对应了横纵坐标轴(注意,是从1开始)
    1. 默认每个儿子只占一个单元格,所以如果只写了start,不写end的话,默认end就是start+1;同样,如果只写了end的话,start就是end-1
    2. 坐标可以设置为负数,即导数第几个坐标
  2. grid-column/grid-row的简写,如下:
    1. grid-column: 1 / 2
    2. grid-row: 1 / 4
    3. 可以用span关键字来改为start/start+_span_的方式来设置单元格属性,这样可以专注单元格大小,示例如下:
      1. grid-column: 1 / span 1
      2. grid-row: 1/ span 3
      3. 效果跟上面两行效果是一样的
  3. grid-area属性,如下:
    1. grid-area:1 / 1 / 4 / 1
    2. 该属性是按照 上/左/下/右 的顺序来写的,跟margin正好是反方向的

表格布局

表格布局是很老很早的布局了,其布局结构主要在html中控制,css中有如下的几个属性来控制表格的行为:

而现在表格一般不用来布局了,主要还是用来做表格类数据的呈现。

  1. border-collapse:控制单元格之间的边框是否合并,默认不合并,但是一般都要设置为合并;
    1. 默认为seperate,合并为collapse
  2. border-spacing:跟grid-gap类似,设置的单元格之间的间距,如果是一个值就是统一设置,如果是两个值就是先行后列
    1. 如果设置了border-collapse属性,就会忽略border-spacing的属性
  3. empty-cells:在没有内容的单元格周围是否绘制边框
    1. show:绘制,默认值
    2. hide:不绘制
    3. 如果设置了border-collapse为collapse的话,就会忽略该属性
  4. caption-side:可以在html中用 caption 添加一个标题,然后这个属性是用来控制该标题的位置,是位于表格的上面还是下面
  5. top:顶部
  6. bottom:底部

  7. table-layout:用来设置单元格的布局宽度高度的算法
    1. auto:自动设置,默认值
      1. 某列宽度由没有折行的最大宽度来决定,即使设置了width也没用
      2. 该算法较慢,因为要遍历完所有内容才能决定每一列的宽度,在主要以呈现数据为主的页面中不建议使用
    2. fixed:固定宽度
      1. 跟单元格内内容无关,就跟表格自身设置的高度宽度比例有关

动画属性

animation

animation 属性的动画原理是在一段时间之内修改某个元素的属性,然后浏览器会自动的将修改属性在这段时间之内均匀化,看起来就是一个比较均匀的动画效果了。

最简单的动画就是设置调整位置属性,然后就可以均匀的上
下或者左右移动了。

  1. @keyframes

动画的关键帧配置,类似一个函数,将动画的关键时间点对应的属性信息给标注上,配置示例如下:

@keyframes mymove
{
    0%     {top:0px;}
    25%    {top:200px;}
    50%    {top:100px;}
    75%    {top:200px;}
    100% {top:0px;}
}


最终的动画效果参考这里。

  1. animation-name:即指定的 keyframes 的名字,如上的例子就是 mymove
  2. animation-duration:动画的持续时间,我估计浏览器会根据这个时间来计算需要自动计算的帧数,因为人眼睛需要每秒24帧的变化才能显示出比较平滑的动画效果;
  3. animation-timing-function:动画的变化的速度曲线,可以是线性的,或者一开始慢后面快,或者反过来,或者先慢后快结束的时候再慢等选项,也可以通过指定三次贝塞尔函数 cubic-bezier(n,n,n,n) 来选择不同的动画效果;
  4. animation-delay:在动画开始之前的延迟;
  5. animation-iteration-count:默认为1,可以为任意整数,也可以设置为枚举值 infinite 从而无线循环;
  6. animation-direction:枚举值,默认为normal,即正常播放动画,可以设置为 alternate 该值得含义是奇数次正向播放,偶数次反向播放;当然,如果 animation-iteration-count 设置为1的话,该属性就没有意义了;
  7. animation-play-state:paused和running的枚举值,可以对动画进行暂停和继续的操作,类似视频播放的感觉;
  8. animation-fill-mode:在动画开始之前和之后属性的应用值;
  9. animation:综合如上所有属性的一个简写属性
    1. 各简写属性出现的顺序并没有明确规定,而且没有任何一个属性是必须的;
    2. 只有时间的值可能会出现0,1,2次,当出现1次的时候表示的是 animation-duration 的值,如果出现2次代表的是 animation-delay 的值
    3. 可以有多组值,用逗号做分割,表示多个动画效果同时显示和起作用

transition

  1. transition-property:对该元素哪个属性的变化进行动画效果
    1. 当然,不是所有的属性都支持动画的,常见的位置、大小、颜色、以及旋转 之类的都是支持的,详细支持列表请参考这里
    2. 只要属性发生变化,都会实现动画效果,比如hover属性或者js变化属性
  2. transition-duration:动画的持续时间
  3. transition-delay:动画开始的延迟时间
  4. transition-timing-function:动画的速度函数,可以是匀速,也可以是变速,也可以是指定函数
  5. transition:是如上几个属性定的简写属性
    1. 几个属性出现的顺序没有明确规定,如果是时间字段的话,第一个是duration,第二个是delay-time
    2. 一些常见的动画效果示例请参考这里。

其他

  1. 长度:长度是css的基本单位,会有如下的一些可能的值:
    1. 会用到长度单位的典型的属性:
      1. font-size, width, margin, padding, border-width, text-shadow
    2. 相对单位
      1. cap:相对当前字体的大写字母的高度
      2. ch:相对字体当中0的高度
      3. ex:相对字体当中小写x字母的高度,一般字体的ex≈0.5em
      4. lh/rlh:相对当前行高/跟节点行高
      5. em/rem:相对当前字体/根节点字体
    3. 绝对单位
      1. px:一个像素点,跟设备相关,一般1cm约等于35~45个像素点
      2. Q/mm/cm:0.25毫米/毫米/厘米
      3. pt/in:1/72英寸 / 英寸
      4. pc:12px
    4. 视窗单位
      1. vh/vw:相对视窗的高度/宽度的1/100
      2. vmin/vmax:在视窗的min(高度, 宽度)和max(高度, 宽度)的1/100

在实际应用场景中,主要使用的是em和px两个类型的长度。

  1. 颜色:
    1. 枚举值
      1. 比如red, blue, yellow一共大概有将近150个预定义的颜色,详细请参考这里
    2. RGB立体坐标
      1. RGB || #RRGGBB

        1. 当设置为#RGB的时候,跟#RRGGBB是一样的,比如#F03,效果跟#FF0033是一样的
      2. 可以用rgb(r_int, g_int, b_int)来表示,跟上面表示是类似的,只不过一个用的是16进制,一个用的是十进制
      3. 可以用rgba(r_int, g_int, b_int, 透明度),透明度得分从0~1的浮点数,0是透明,1是不透明
    3. HSL圆柱坐标
      1. hsl(色相, 饱和度, 明度)
        1. 色相是一个彩虹圆环的角度值,red为0/360,green为120,blue为240;
        2. 饱和度是颜色的显示强度,如果为0就是黑白照片即某种灰色
        3. 明度是明亮度,如果是100%,就是白色了,如果是0%,那就是黑色了
      2. hsla,跟rgba一样可以增加一个透明度的参数
  2. 渐变函数
    1. 渐变函数是一种自定义的image表示方法,使用示例参考这里
    2. 直线渐变:linear-gradient(角度,方向,颜色列表),在颜色后面还可以跟一个比例表示位置从什么地方开始渐变
    3. 圆形渐变:radial-gradient(颜色列表)
    4. 重复渐变:重复渐变(即条纹装渐变)

参考

  1. CSS属性的高级分类. https://blog.csdn.net/qq_16546829/article/details/81979142
  2. CSS属性参考页面. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference

原文链接:https://www.cnblogs.com/fengyinghui/p/11392546.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:display属性

下一篇:关于盒子的水平垂直居中几种方案