精华内容
下载资源
问答
  • 原标题:CSS样式书写规范可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤...

    原标题:CSS样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束。

    我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要。

    本文的所列是实践当中得出的一套比较不错的 CSS 书写规范,并不希望大家完全采用,而是希望可以结合自己的团队需要,发展出一套适合自己的 CSS 代码规范。

    也希望可以有更多的建议,共同的完善。本规范也可以在我的 Github 上看到,欢迎留言或者提 PR。

    我觉得不同的规范都有各自的长处与缺陷,对待所谓的规范最好的方式不是人云亦云,拿来就用,而是应该结合实际情况及需求,取长补短,取其精华去其糟粕。

    编码设置

    采用 UTF-8 编码,在 CSS 代码头部使用:

    @charset "utf-8";

    注意,必须要定义在 CSS 文件所有字符的前面(包括编码注释),@charset 才会生效。

    例如,下面的例子都会使得 @charset 失效:

    /* 字符编码 */

    @charset"utf-8";

    html,

    body{

    height:100%;

    }

    @charset"utf-8";

    命名空间规范

    布局:以 g 为命名空间,例如:.g-wrap 、.g-header、.g-content。

    状态:以 s 为命名空间,表示动态的、具有交互性质的状态,例如:.s-current、s-。

    工具:以 u 为命名空间,表示不耦合业务逻辑的、可复用的的工具,例如:u-clearfix、u-ellipsis。

    组件:以 m 为命名空间,表示可复用、移植的组件模块,例如:m-slider、m-dropMenu。

    钩子:以 j 为命名空间,表示特定给 Java 调用的类名,例如:j-request、j-open。

    命名空间思想

    没有选择 BEM 这种命名过于严苛及样式名过长过丑的规则,采取了一种比较折中的方案。

    不建议使用下划线 _ 进行连接

    节省操作,输入的时候少按一个 shift 键

    能良好区分 Java 变量命名

    字符小写

    定义的选择器名,属性及属性值的书写皆为小写。

    选择器

    当一个规则包含多个选择器时,每个选择器独占一行。

    、+、~、> 选择器的两边各保留一个空格。

    .g-header>.g-header-des,

    .g-content~.g-footer{

    }

    命名短且语义化良好

    对于选择器的命名,尽量简洁且具有语义化,不应该出现 g-abc 这种语义模糊的命名。

    规则声明块

    当规则声明块中有多个样式声明时,每条样式独占一行。

    在规则声明块的左大括号 { 前加一个空格。

    在样式属性的冒号 : 后面加上一个空格,前面不加空格。

    在每条样式后面都以分号 ; 结尾。

    规则声明块的右大括号 } 独占一行。

    每个规则声明间用空行分隔。

    所有最外层引号使用单引号 ‘ 。

    当一个属性有多个属性值时,以逗号 , 分隔属性值,每个逗号后添加一个空格,当单个属性值过长时,每个属性值独占一行。

    完整示例如下:

    .g-footer,

    .g-header{

    position:relative;

    }

    .g-content{

    background:

    linear-gradient(135deg,deeppink25%,transparent25%)-50px0,

    linear-gradient(225deg,deeppink25%,transparent25%)-50px0,

    linear-gradient(315deg,deeppink25%,transparent25%),

    linear-gradient(45deg,deeppink25%,transparent25%);

    }

    .g-content::before{

    content:'';

    }

    数值与单位

    当属性值或颜色参数为 0 – 1 之间的数时,省略小数点前的 0 。color: rgba(255, 255, 255, 0.5)color: rgba(255, 255, 255, .5);

    当长度值为 0 时省略单位。margin: 0px automargin: 0 auto

    十六进制的颜色属性值使用小写和尽量简写。color: #ffcc00color: #fc0

    样式属性顺序

    单个样式规则下的属性在书写时,应按功能进行分组,并以 Positioning Model > Box Model > Typographic > Visual 的顺序书写,提高代码的可读性。

    如果包含 content 属性,应放在最前面;

    Positioning Model 布局方式、位置,相关属性包括:position / top / right / bottom / left / z-index / display / float / …

    Box Model 盒模型,相关属性包括:width / height / padding / margin / border / overflow / …

    Typographic 文本排版,相关属性包括:font / line-height / text-align / word-wrap / …

    Visual 视觉外观,相关属性包括:color / background / list-style / transform / animation / transition / …

    Positioning 处在第一位,因为他可以使一个元素脱离正常文本流,并且覆盖盒模型相关的样式。盒模型紧跟其后,因为他决定了一个组件的大小和位置。其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响,所以他们排在后面。

    合理使用使用引号

    在某些样式中,会出现一些含有空格的关键字或者中文关键字。

    font-family 内使用引号

    当字体名字中间有空格,中文名字体及 Unicode 字符编码表示的中文字体,为了保证兼容性,都建议在字体两端添加单引号或者双引号:

    body{

    font-family:'Microsoft YaHei','黑体-简','5b8b4f53';

    }

    background-image 的 url 内使用引号

    如果路径里面有空格,旧版 IE 是无法识别的,会导致路径失效,建议不管是否存在空格,都添加上单引号或者双引号:

    div{

    background-image:url('...');

    }

    避免使用 !important

    除去某些极特殊的情况,尽量不要不要使用 !important。

    !important 的存在会给后期维护以及多人协作带来噩梦般的影响。

    当存在样式覆盖层叠时,如果你发现新定义的一个样式无法覆盖一个旧的样式,只有加上 !important 才能生效时,是因为你新定义的选择器的优先级不够旧样式选择器的优先级高。所以,合理的书写新样式选择器,是完全可以规避一些看似需要使用 !important 的情况的。

    代码注释

    单行注释

    星号与内容之间必须保留一个空格。

    /* 表格隔行变色 */

    多行注释

    星号要一列对齐,星号与内容之间必须保留一个空格。

    /**

    * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.

    */

    规则声明块内注释

    使用 // 注释,// 后面加上一个空格,注释独立一行。

    .g-footer{

    border:0;

    // ....

    }

    文件注释

    文件顶部必须包含文件注释,用 @name 标识文件说明。星号要一列对齐,星号与内容之间必须保留一个空格,标识符冒号与内容之间必须保留一个空格。

    /**

    * @name: 文件名或模块名

    * @deion: 文件或模块描述

    * @author: author-name(mail-name@domain.com)

    * author-name2(mail-name2@domain.com)

    * @update: 2015-04-29 00:02

    */

    @deion为文件或模块描述。

    @update为可选项,建议每次改动都更新一下。

    当该业务项目主要由固定的一个或多个人负责时,需要添加@author标识,一方面是尊重劳动成果,另一方面方便在需要时快速定位责任人。

    SASS 使用建议

    嵌套层级规定

    使用 SASS 、 LESS 等预处理器时,建议嵌套层级不超过 3 层。

    组件/公用类的使用方法

    组件/公用类使用 %placeholders 定义,使用 @extend 引用。如:

    %clearfix{

    overflow:auto;

    zoom:1;

    }

    .g-header{

    @extend%clearfix;

    }

    组件类的思考

    使用 SASS ,经常会预先定义好一些常用公用组件类,譬如清除浮动,水平垂直居中,文字 ellipsis。又或者多个元素具有同样的样式,我们希望能够少写这部分代码,公共部分抽离出来只写一次,达到复用。

    但是复用的方式在 SASS 中有多种,那么是使用单独使用一个类定义,给需要的标签添加,还是使用 @include 或者 @extend在定义的类中引入一个 @mixin,或者一个 @function 呢?

    基于让 CSS 更简洁以及代码的复用考虑,采用上面的使用 %placeholders 定义,使用 @extend 引用的方案。

    %placeholders,只是一个占位符,只要不通过 @extend 调用,编译后不会产生任何代码量

    使用 @extend 引用,则是因为每次调用相同的 %placeholders 时,编译出来相同的 CSS 样式会进行合并(反之,如果使用 @include 调用定义好的 @mixin,编译出来相同的 CSS 样式不会进行合并)

    这里的组件类特指那些不会动态改变的 CSS 样式,注意与那些可以通过传参生成不同数值样式的 @mixin 方法进行区分

    尽量避免使用标签名

    使用 SASS ,或者说在 CSS 里也有这种困惑。

    假设我们有如下 html 结构:

    展开全文
  • 下述有关css属性position的属性值的描述,说法错误的是? 牛客网错题集 static:没有定位,元素出现在在正常的流中 fixed:生成绝对定位的元素,相对于父元素进行定位 relative:生成相对定位的元素,相对于元素...

    下述有关css属性position的属性值的描述,说法错误的是?

    牛客网错题集
    • static:没有定位,元素出现在在正常的流中
    • fixed:生成绝对定位的元素,相对于父元素进行定位
    • relative:生成相对定位的元素,相对于元素本身正常位置进行定位
    • absolute:生成绝对定位的元素,相对于static定位以外的第一个祖先元素进行定位

    错误答案:B

    在HTML中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如下图所示:

    img

    css中定位有四个属性值可选,分别是static、absolute、fixed、relative。

    • position:static 无定位

    一般标签元素不加任何定位都是静态定位,是默认值,不需要去特别的声明使用,不过要考虑的一种情况是,遇到的继承的情况,不想看到元素本身被继承的属性所影响,从而可以用position:static取消继承,还原他的默认值。

    • position:absolute 相对定位

    相对定位,相对于最近的标签元素进行定位,也就是上一级父元素进行定位的,他有bottom、top、left、和right四个属性,分别是相对于父元素的下、上、左、右进行一定距离的移动、会脱离文档流,父元素设置了relative就会以设置了relative的元素为基点进行定位,没有设置的话,默认就是以html根元素进行定位的。

    • position:relative 绝对定位

    绝对定位是以static进行定位的,也就是默认的元素节点,也就是当前元素,同样也有bottom、top、left、right四个属性

    • position:fixed 固定定位

    固定定位顾名思义就是以整个视口窗口进行定位的,就是固定到整个网页页面上,不会造成页面的元素被影响。

    总结:定位的四个属性除了static,剩下的属性都是对于某一个基点进行定位的只不过是基点不同而已

    展开全文
  • 关于CSS优先级算法是如何计算

    千次阅读 2020-04-22 13:39:26
    关于CSS优先级算法是如何计算 之前我一直认为的是 内联标签>id选择器>类选择器>元素选择器 !important的权重最大 这种说法是不完整的。前提是它之后不会再出现相同的权重。如果权重相同,我们则需要去比较...

    关于CSS优先级算法是如何计算

    之前我一直认为的是 内联标签>id选择器>类选择器>元素选择器 !important的权重最大 这种说法是不完整的。前提是它之后不会再出现相同的权重。如果权重相同,我们则需要去比较匹配规则的特殊性。

    一个匹配规则一般由多个选择器组成,一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级。

    第一个等级是内联样式 1000

    第二个等级是id选择器,为0100

    第三个等级是类选择器,伪类选择器,属性选择器是0010

    第四个等级是元素选择器和伪元素选择器是0001.

    规则中每出现一个选择器,就将它的特殊性进行叠加,这个叠加只限于对应的等级的叠加,不会产生进位。选择器特殊性值的比较是从左向右进行比较,也就是以1开头的特殊值要比0开头的特殊值要大。

    如果两个规则的特殊性值相等的时候,那么就根据他们的引入顺序,后出现的规则的优先级高。

    LVHA的由来

    我们知道a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active,并且这四个伪类如果对同一个元素设置同一个属性,那它们的声明顺序还有一定要求,一般大家都遵循“爱恨原则LVHA”(LoVe HAte),为什么是这个顺序?不能是其它顺序吗?

    根据css优先级计算规则,伪类的特殊性值是0,0,1,0,4个伪类的特殊性值相同,那么后面声明的规则优先级高。当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;同理,当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

    展开全文
  • 关于css hack

    2011-02-09 10:13:00
    学习CSS,除了基础,还有必学的一课,就是CSS ...希望能帮助大家正确的认识CSS hack。 介绍之前,请先记住一句话:你今天用CSS hack解决兼容性问题,明天浏览器就可能让你那解决问题的CSS hack变成另一个兼容性问题

    学习CSS,除了基础,还有必学的一课,就是CSS hack,很多书籍上都有涉及。当时觉得这个东西很神秘,可以针对某个或某些浏览器写些特别的 CSS 样式而不影响其他,而且用起来也很方便。
    虽然如此,但是,很少有人知道,它到底是什么东西,使用CSS hack好不好,以及它是怎样实现的?
    下面,就谈一下我对CSS hack的认识。希望能帮助大家正确的认识CSS hack。
    介绍之前,请先记住一句话:你今天用CSS hack解决兼容性问题,明天浏览器就可能让你那解决问题的CSS hack变成另一个兼容性问题。


    CSS hack简介

    这,还要从W3C CSS2.1的标准说起。
    W3C CSS2.1的标准的第四章,讲了CSS的基本语法,数据,以及值,还讲到了如何去处理不合理的值及声明等。可以参考我分享的另外两个帖子:【分享】说说标准 --CSS标准中的值【分享】说说标准--我 的眼里只有你--CSS的错误解析规则
    W3C CSS2.1 标准也规定了浏览器应当支持的特性属性或值。
    虽 然如此,W3C也不可能强制浏览器厂商必须遵循标准。因此就出现了各大厂商对标准的实现不尽相同的现象。由于不同的浏览器,比如IE6、 IE7、 IE8、 Firefox等,对CSS解析的标准不同,因此对于相同的 CSS代码,可能会生成不同的页面效果,从而无法在所有浏览器中得到我们想要的效果。这时,我们就需要针对不同的浏览器去写不同的CSS代码,让它能够在 所有浏览器中获得相同的效果。这个过程,就是CSS hack。也就是写出只有个别浏览器或某些浏览器识别的CSS代码。
    CSS hack是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法。
    CSS hack是一种类似作弊的手段,以欺骗浏览器的方式达到兼容的目的,是用浏览器的兼容性差异来解决浏览器的兼容性问题。
    因此,在设计之初,写CSS hack需要遵循以下三条原则:
      ⃟有效 : 能够通过 Web 标准的验证
      ⃟只针对太古老的/不再开发的/已被抛弃的浏览器 , 而不是目前的主流浏览器
      ⃟代码要丑陋 。让人记住这是一个不得已而为之的 Hack, 时刻记住要想办法去掉它。
    现在很多hacks已经抛弃了最初的原则,而滥用hack会导致浏览器更新之后产生更多的兼容性问题。
    因此,并不推荐使用CSS hack来解决兼容性问题


    CSS hack的实现方式

    我总结了一下,实现CSS hack大概有以下几种方式:
    1. 利用浏览器对相同代码的解析和支持的不同实现的hack
    不同浏览器对相同的CSS代码的支持情况可能不同。尤其是对错误的写法。
    例如,

    CSS code
       
    #test
    {
    _width : 80px ;
    }

    在IE7及以上版本的浏览器中会被当作错误特性而舍弃,但是在IE6中可以被正常的解析。这时候,可以把_width当作hack,专门针对 IE6来设置元素的宽度。
    2. 以Firefox或Webkit特有的扩展样式实现的hack
    以-moz或-webkit开头的扩展样式,是浏览器对CSS标准的扩展。这些特性只在相应的浏览器里才可以被正常的解析。 因此可以被当作CSS hack来使用。
    以-moz开头的Firefox特有扩展样式
    Mozilla浏览器支持的一些扩展是以-moz开头的。这些扩展包括了一些功能,例如圆形边界等。这种CSS只适用于Mozilla浏览器。
    比 如,-moz-opacity是在Firefox2.0版本出现的特性,用来实现元素的透明,但Firefox3.0以后的版本中不再支持,而是直接支持 标准中的opacity特性。而其他浏览器不支持-moz-opacity。所以,可以使用-moz-opacity来针对Firefox2.0设置元素 的透明度。
    关于Firefox扩展样式的详细信息,见Mozilla CSS Extensions
    以-webkit开头的Webkit浏览器特有扩展样式
    与以-moz开头的Firefox特有扩展样式相同,以-webkit开头的样式是 Webkit浏览器特有的,只有Webkit浏览器可以解析。
    比如,在Webkit浏览器中可以用 -webkit-border-radius实现圆角。
    3. 利用IE对标准的支持缺陷写的CSS hack
    这个类别以中的hack以IE对标准的支持缺陷为基础,可以让CSS代码针对IE6或IE7以外的浏览器生效。
    例 如,!important只有IE7及以上版本的IE及其他浏览器支持,所以,可以用!important来针对IE6以外的浏览器写 CSS代码;再如,head:first-child+body selector,:first-child不被IE6支持,所以可以用来针对IE6以外的浏览器编写CSS代码。
    此处不在一一列举。
    当然,有的观点认为应用CSS2.1标准,不属于CSS hack。见Tantek's Thoughts ,Using A CSS2 Feature Is NOT a Hack。
    4. 以IE特有的条件注释为基础的hack
    IE浏览器中特有的条件注释也经常被用作 hack,可以针对特定版本的IE写CSS代码。
    例如,测试用例:

    HTML code
       
    <!--
    [if IE 8]>

    <style type="text/css">

    #test {
    color: red;
    }

    </style>

    <![endif]

    -->

    < h1 id ="test" > TEXT </ h1 >

    以上代码中的 "TEXT",只在IE8中才会是红色。


    CSS hack汇总表

    为了使用方便,我搜了好多关于CSS hack的内容,其中还有一个比较著名的CSS hack汇总表,看起来不错,但用起来,发现,有些已经不适用了。因为,浏览器版本更新的太快了。
    大多数人应该都很熟悉这张表吧:

    这表看起来很壮观,但是,里面的数据都已经很陈旧了。也许你的hack今天还有效,明天浏览器版本更新后,便失去了效果。所以,慎用hack。

    我结合上表,又收集了一下网上较为常用的的CSS hack,整理出一个Windows系统下各浏览器常用CSS hack汇总表 ,如下:
    说明:
    1. 此汇总表中测试浏览器的版本为
    o IE6
    o IE7
    o IE8
    o Firefox 3.6.6
    o Safari 5.0
    o Chrome 6.0.458.1 dev
    o Opera 10.60
    2. 其中,多数CSS hack是在selector{property:value;}基础上更改的。selector代表CSS选择器,property代表CSS特性,value代表特性的值。
    3. FF代表Firefox,Ch代表Chorme,Sa代表Safari,Op代表Opera
    4. Q代表Quirks Mode,S代表Standards Mode。
    5. Hack Type列的数字,指的是上面CSS hack的实现方式中的列表号。1是指“利用浏览器对相同代码的解析和支持的不同实现的hack”,2是指以Firefox或Webkit特有的扩展样式实现的hack。


    其中 *+html selector 的测试用例:

    HTML code
       
    < style type ="text/css" >
    *+html #test
    {
    color : red ;
    }



    </ style >

    < h1 id ="test" > TEXT </ h1 >



    其他测试用例可在此基础上修改。

    切记,遵守CSS hack的三条原则。CSS hack是没有办法的时候才使用的解决兼容性问题的招术,是用兼容性问题去解决兼容性问题,无异于饮鸩止渴。切莫一有兼容性问题就使用。
    另外,时刻记得改掉用CSS hack修补的问题。

    补充一点儿好玩儿的东西,Yahoo也有一种实现hack的方式,比较特殊。Yahoo会利用服务器去判断打开其页面的浏览器的类别,然后,把信息加到HTML标签上,比如我使用Firefox打开Yahoo的首页,查看它的HTML标签,发现:

    HTML code
       
    < html lang ="en-US" class ="y-fp-bg y-fp-pg-grad ua-ff ua-win ua-ff3_6 bkt701" >
    ……
    </ html >



    注意其中的ua-ff ua-win ua-ff3_6,含有浏览器类别和版本的信息。
    然后,在设置特定浏览器的样式时,比如,我希望在Firefox里让所有的div中的文字都是红色,可以这样设置:

    CSS code
       
    .ua-ff div
    {
    color : red ;
    }



    呃~~,,我觉得这也可以叫做CSS hack。

    展开全文
  • 关于CSS 笔记篇

    千次阅读 2018-08-20 10:36:53
    课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 ...熟练掌握CSS高级技巧强化CSS typora-copy...
  • HTMLCSS试题有答案一、单项选择题 (每套20题,每题2分,共40分)1、关于web标准以下说法错误的是( b )A、Web标准是一个复杂的概念集合,它由一系列标准组成B、这些标准全部都由W3C起草与发布C、Web标准可以分为3个...
  • 哪种方式是在css中包含多种字体的正确方法?这里是简单的例子。在css中包含多种字体的正确方法This?@font-face {font-family: DeliciousRomanRegular;src: url(/Delicious-Roman-R.otf);}@font-face {font-family: ...
  • CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题,使用方法很简单,只需要把 CSS 内容复制贴上,最后按下 LINT!按钮就可以检查。底下有一些设定项目可以调整检测的项目和规则,预设是全部勾取,如果...
  • CSS Lint 能线上分析并检测你的网站 CSS 样式表有无任何潜在问题,使用方法很简单,只需要把 CSS 内容复制贴上,最后按下 LINT!按钮就可以检查。底下有一些设定项目可以调整检测的项目和规则,预设是全部勾取,如果...
  • css

    2021-02-20 12:02:40
    css-css3 概述 ...CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行...CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在W
  • 关于CSS3新技术

    2009-08-20 22:43:00
    前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景...
  • 1、告知客户华为S7706交换机的堆叠方式,堆叠原理以及堆叠设备线缆的连接方式,...如下描述,结合上图,平行连接:1-4,2-3连接,交叉连接:3-2,4-1连接,可以判断设备堆叠线缆连接正确。dis css chanChassis 1 || ...
  • CSS

    千次阅读 2018-08-31 10:07:50
    学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10....
  • 关于css中选择器优先级的总结

    千次阅读 2016-05-19 13:44:14
    上一篇博文中对于现有的css的选择器进行了总结。接下来对于css中的优先级进行一下总结,总结可能不尽精确,如有不妥之处,还望前辈即时指出... css2.1的规范是这样描述的: 1.如果声明来自“style”属性,而不是带有
  • 关于CSS伪类first-child的深入理解在CSSCSS3)中,有一种选择器很特殊,那就是伪类,关于伪类有很多,这里详细分析其中的一种:first-child。具体书写格式如下: element:first-child{(CSS语句)}关于这个伪类...
  • 关于css的clear属性

    千次阅读 2010-08-27 13:38:00
    CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果...
  • 了解CSS 知道什么是CSS

    2015-05-11 11:07:44
    css是什么,对于很多新...最新版本的CSS3比CSS2集成了更多更强大的功能,真正的能够把网页的内容与设计的语言分离的一种语言。相对于传统HTML的表现而言,CSS能够提供队网页中的对象的位置排版进行像素级的精确控制,支
  • CSS 的 类class选择器 的正确写法

    千次阅读 2017-12-01 10:16:59
    1.正确写法: 前面是标签名的通配符,后面是 class的名称。()*.a_class {color:red;}下面的简写,尽量少用.a_class {color:red;}2.举例举例:p.a_class {}解释为:“其 class 属性值为 a_class 的所有段落”。...
  • 1.在HTML中,关于CSS样式的说法错误的是( )A. css代码不区分大小写B. 每条样式规则使用分号(;)隔开C. css样式无法实现页面的精确控制D. css样式实现了内容与样式的分离,利于团队开发C2.关于块状元素说法错误的是( )...
  • 关于CSS的面试题和练习

    千次阅读 2016-09-22 22:05:06
    仅使用CSS属性,创建这样的一个按钮 这将是测试候选人的CSS3技能的一个强大的测试例子。这个按钮具有很多样式,我们一起来看看:  他们是如何处理多边框的?在这里,box-shadow可能是最好的...
  • 记录一写关于css jqueryjsp里面常用的一些错误和个人经验
  • CSS/CSS3 属性大全

    2016-09-21 23:07:56
    "CSS" 列指示该属性是在哪个 CSS ... 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3 animation-name 规定 @key...
  • CSS入门

    万次阅读 多人点赞 2019-12-17 18:44:03
    一、CSS简介 二、内容 1.css的引入方式 2.元素的id和class 3、CSS选择器 4、文本样式总结 5、文本样式总结 6、边框样式 7、 背景样式概述 8、超链接样式 9、图片样式 10、列表样式 11、表格样式 12、...
  • css的一些命名规范 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容篇。 常用DIV+CSS命名大全集合,即CSS命名规则 DIV CSS...
  • bug描述 项目中使用了 layer,在执行 webpack 打包编译之后,layer.css 文件中用到的资源文件路径找不到,导致放大和关闭图标无法在页面上正常显示。 原因:(来自官方文档) 对于按需加载(on-demand-load)或加载...
  • css浮动

    千次阅读 多人点赞 2018-05-08 14:51:13
    很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。写在前面的话: 由于CSS内容比较多,小菜没有...
  • CSS 排版与正常流 —— 重学CSS

    千次阅读 多人点赞 2020-10-14 14:17:28
    这一周我们重新回到《重学 CSS》系列,之前的文章中我们重新学习了《 CSS 选择器》和《 CSS 语法与规则》。接下来我们就一起来讲讲 CSS 里面的排版与正常流。 在讲解 CSS 当中的排版正常流的时候,我们会按照属性的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,412
精华内容 25,764
关键字:

关于css的描述正确的是