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. CSS浮动属性Float介绍

    #cnblogs_post_body h6 {font-size: 16px;font-weight: bold;} 什么是CSS Float? float 是 css 的定位属性.在传统的印刷布局中 ...

  2. Mozilla推荐的CSS属性书写顺序及命名规则

    传说中的Mozilla推荐 /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * ...

  3. web前端(9)—— CSS属性

    属性 终于到css属性,前面就零零散散的用了什么color,font-size之类,本篇博文就专项的介绍它了 字体属性 font-family 此属性是设置字体样式的,比如微软雅黑,方正书体,华文宋体 ...

  4. CSS属性书写顺序及命名规则

    /* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...

  5. meta标签中的http-equiv属性使用介绍(转载)

    meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言, ...

  6. 标准化css属性顺序

    前言 对于css文件而言,选择器的写法有它的讲究,如—— 1> 不要用ID选择器 2> 不要用通配符*选择器 3> 选择器的层级 ...... 对于属性值的写法也有他的讲究,如—— ...

  7. 十个实用但IE不支持的CSS属性

    对IE浏览器尤其是IE6的抱怨基本已进入麻痹状态,偶尔甚至产生非常消极的想法:这个世界只有一个浏览器就好了,哪怕这唯一的浏览器就是IE6.当然,这样的想法是非常病态的,马上打消.本文里面,介绍了10个 ...

  8. CSS 3动画介绍

    原文:A Beginner’s Introduction to CSS Animation 译文:一个初学者对CSS动画的介绍 译者:dwqs 现在,越来越多的网站使用了动画,并且形式多样,如GIF. ...

  9. jQuery修改操作css属性实现方法

    在jquery中我们要动态的修改css属性我们只要使用css()方法就可以实现了,下面我来给各位同学详细介绍介绍. css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() ...

随机推荐

  1. Elasticsearch JavaApi

    官网JavaApi地址:https://www.elastic.co/guide/en/elasticsearch/client/java-api/current/java-search.html 博 ...

  2. Java 线程同步组件 CountDownLatch 与 CyclicBarrier 原理分析

    1.简介 在分析完AbstractQueuedSynchronizer(以下简称 AQS)和ReentrantLock的原理后,本文将分析 java.util.concurrent 包下的两个线程同步 ...

  3. 洛谷 P2205 解题报告

    P2205 画栅栏Painting the Fence 题目描述 \(Farmer\) \(John\) 想出了一个给牛棚旁的长围墙涂色的好方法.(为了简单起见,我们把围墙看做一维的数轴,每一个单位长 ...

  4. jsp 增删改查

    使用Idea创建项目 1.新建web application项目 Idea 选择 Java Enterprise -> web application 2.新版本没有web-inf文件夹 解决方 ...

  5. 网络营销行业十大看了就想吐的“滥词”

    网络营销行业在国内的互联网界已"猖獗"数年之久,它是一个让企业爱让用户恨的行业.有互联网的地方,就有网络营销的机会,有了机会就有了相关产业的存在,只不过是业大业小的问题.但是随着互 ...

  6. ScalaPB(5):用akka-stream实现reactive-gRPC

      在前面几篇讨论里我们介绍了scala-gRPC的基本功能和使用方法,我们基本确定了选择gRPC作为一种有效的内部系统集成工具,主要因为下面gRPC支持的几种服务模式: .Unary-Call:独立 ...

  7. RESTful API 设计

    http://www.ruanyifeng.com/blog/2014/05/restful_api.html

  8. java 基础之枚举

    问题:对象的某个属性的值不能是任意的,必须为固定的一组取值其中的某一个 解决办法: 1)  在setGrade方法中做判断,不符合格式要求就抛出异常 2)  直接限定用户的选择,通过自定义类模拟枚举的 ...

  9. python实现简体中文和繁体相互转换

    1. opencc-python 如果目录上的链接被屏蔽了,请手动复制 https://pypi.python.org/pypi/opencc-python/ 首先介绍opencc的python实现库 ...

  10. windows部署SpiderKeeper(爬虫监控)

    最近发现了一个spdierkeeper的库,这个库的主要用途是在于配合这scrpyd管理你的爬虫,支持一键式部署,定时采集任务,启动,暂停等一系列的操作.简单来说将scrapyd的api进行封装,最大 ...