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

CSS基础属性介绍的更多相关文章

  1. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  2. 第五模块:WEB开发基础 第1章·HTML&CSS基础

    01-前端介绍 02-HTML介绍 03-HTML文档结构 04-head标签相关内容 05-常用标签一之h1~h6,p,a 06-常用标签一之ul.ol.div.img.span 07-常用标签二- ...

  3. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  5. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  6. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  7. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  8. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. Android Application 详细介绍

    一.先看看文档里怎么说 Base class for those who need to maintain global application state. You can provide your ...

  2. openlayers4 入门开发系列之前端动态渲染克里金插值 kriging 篇(附源码下载)

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  3. cesium 实现 3d-tiles 平移旋转贴地(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  4. 如何打造个人km知识管理系统

    经常有朋友会遇到这样一种情况,在网络中看到一篇很好的文章,但后来因为关键字想不起来,结果怎么都搜索不到.还有些朋友虽然平时也会做一些记录,把有用的资料进行保存,但他们往往将保存的资料分散在不同的地方, ...

  5. Python爬虫--喜马拉雅三国音频爬取

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:Botreechan  1.进入地址我们可以发现,页面有着非常整齐的目 ...

  6. Redis KeyExpire的使用

    Set a timeout on key. After the timeout has expired, the key will automatically be deleted. A key wi ...

  7. Startup/OWIN框架

    为什么写OWIN框架呢? 因为没接触刀OWIN框架直接去学.NET Core比较生硬,个人见解.首先我们要知道OWIN的由来:ASP.NET和IIS和Windows操作系统的关系在之前是紧密联系的,缺 ...

  8. Ansible-上部

    Ansible概述 Ansible是一个配置管理系统configuration management systempython 语言是运维人员必须会的语言ansible 是一个基于python 开发的 ...

  9. Java入门(一)——类、抽象类和接口

    Java是一门面向对象语言,可以看出"对象"在Java有着举足轻重的位置.那么,"对象"从何而来呢?那必须是丈母娘造出来的,下面我们就先来说说这个丈母娘--类. ...

  10. 【转载】[C++ STL] deque使用详解

    转载自 https://www.cnblogs.com/linuxAndMcu/p/10260124.html 一.概述 deque(双端队列)是由一段一段的定量连续空间构成,可以向两端发展,因此不论 ...