• CSS 108 0 1 发布

    CSS的基本目标是让浏览器以指定的特性去绘制页面元素,这些是由属性和属性值的定义来实现的。

     在CSS中,一个属性与值的键值对被称为CSS声明,多个CSS声明组成CSS声明块,CSS声明块则关联选择器则形成CSS规则,CSS规则的集合则最后构成整个样式表。

    属性和值

    属性(property)是一个标识符,表示某个CSS特性,比如:颜色,字体,大小等。

    值(value)则描述了浏览器引擎如何处理该特性。每个属性都包含一个有效值的集合,它有正式的语法和语义定义,被浏览器引擎实现。

    样式表基本上就是由一系列的这些属性和值构成的键值对所组成。

    声明

    声明(declaration)是一个属性与值的键值对,属性与值之间以:(冒号)分隔。

    border: 1px solid hsla(0,0%,0%,.5); 声明块

    声明块(declaration block)包含一条或多条声明,声明块里的各个声明之间用分号分离。 声明块被包含在一对大括号{和}里面,声明块可以嵌套。

    { border: 1px solid hsla(0,0%,0%,.5); border-radius: 2px; width:235px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin:36px auto; } 规则

    规则(Rule)由两个主要的部分构成:选择器(Selector),声明块。选择器用来选择页面多个元素的条件,声明块定义对符合条件的页面元素如何设置属性。

    .search-bar { border: 1px solid hsla(0,0%,0%,.5); border-radius: 2px; width:235px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin:36px auto; } at规则

    规则是CSS语句的一种类型,其作用是将一组CSS声明与用选择器定义的条件相关联。
    除规则之外,CSS中还有其他比如定义字符集,导入其它的外部样式表,字体等比较特殊的命令,这些是通过at规则语句来实现的。
    at规则(at-rules)。以@开始,随后是标识符,一直到以分号或右大括号结束。每个at规则由其标识符定义,可能有它自己的语法。
    at规则涵盖了meta信息(比如 @charset @import),条件信息(比如@media @document), 描述信息(比如@font-face)。

    语句

    上面的规则和at规则在CSS中被统称为CSS语句。 语句以非空格的字符开头,以第一个反花括号或分号结束。

    注释代码

    CSS里可以写注释代码,CSS注释的开始使用/*,结束使用*/。

    /*下面是检索条的样式定义*/ .search-bar { }
  • CSS 66 0 1 发布

    导入方法

    样式的导入有外部样式表和内部样式两种方法。

    外部样式表

    当样式需要应用于很多页面时,外部样式表将是理想的选择。

    外部样式表的导入包括在HTML文档里链接外部CSS文件的link方式和在CSS文件里引入其他CSS文件的import方式两种方式。

    link方式

    <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

    import方式

    @import url("common.css") 内部样式表

    内部样式表(Internal Style Sheet)直接在HTML文档里进行记述。

    <head> <style type="text/css"> p {margin-left: 30px;} body {background-image: url("images/back.gif");} .article {color:red} </style> </head> 目标媒体

    样式表导入时可以指定该样式表适用的目标媒体。

    指定方法

    各导入方式的媒体指定方法分别如下:

    link方式外部样式表  <link rel=“stylesheet” href=“style.css” type=“text/css” media=“screen”/> import方式外部样式表  @import url(“print.css”) print; 内联样式表  <style type=“text/css” media=“all”/> 媒体类型

    样式表导入时可以指定以下媒体类型:

    媒体类型适用于all所有的媒体设备aural语音和音频合成器braille盲人用点字法触觉回馈设备handheld手持设备print打印机projection投影设备screen电脑显示器tty字符终端设备tv电视机类型设备
  • CSS 93 0 1 发布

    值和单位

    CSS中的值有以下几种类型:

    颜色值 
    颜色值的应用场合有:背景颜色,边框颜色,字体颜色等 长度值 
    长度值的应用场合有:元素的大小,边框颜色,字体颜色等 时间值 角度值 颜色值 颜色取值

    CSS中颜色取值主要由以下几种方法: 

    CSS命名颜色
    在CSS2.1中,CSS规范定义了17个颜色名。用RGB指定颜色
    可以使用0~255取值或者0%~100%。 长度值

    长度值的单位有绝对单位和相对单位两种:

    绝对单位 in  英寸, cm  厘米 mm  毫米 pt  磅,1pt等于1/72 英寸 pc  派卡,印刷术语 相对单位 em  1em等于当前的字体尺寸。如果某元素以12pt显示,那2em的设定值就等同于24pt。em非常适合于需要对用户所使用字体大小进行自动适应的场合。 ex  px  像素 %  百分比 继承

    继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本,这里子元素为span标签。

    优先级

    有的时候同一个元素同时被设置了多个不同的CSS样式代码,那最终是哪一个CSS样式有效呢?我们来看一下面的代码:

    CSS: p {color:red;} .hudao {color:green;} #hello {color:yellow;} HTML: <p id= "hello" class="hudao">您好,这里是互道科技</p>

    对<p>中的文本,有三个样式分别定义了三种不同的颜色,red(红色),green(绿色)和yellow(黄色),但文本会显示成yellow(黄色)。 这是因为CSS样式是有优先级的,按照CSS的优先级规则,通过ID指定的样式最终获得胜出。 下面对CSS样式优先级计算时的三大要素:权值,特殊性和层叠分别进行说明:

    权值

    CSS样式的优先级首先是通过权值来实现的,权值高的样式将被浏览器优先采用。 权值被分为以下四个等级:

    等级1  内联样式(如:style=””)属于第1等级,权值是1000。 等级2  ID选择器(如:#id1)属于第2等级,权值为100。 等级3  类,伪类和属性选择器(如:.cls1)属于第3等级,权值为10。 等级4  元素和伪元素选择器(如:.div)属于第4等级,权值为1。 特殊性

    通过!important关键字可以将样式的权值人为提升到最高级。

    层叠

    层叠就是同一个元素,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用。

  • CSS 85 0 1 发布

    每个可视的HTML元素在页面上都会被渲染成一个矩形区域,通常被称为盒子模型。

     

    区域组成

    盒子模型主要定义四个区域:

    内容(content)、 内边距(padding)、 边框(border) 外边距(margin)。

    容器元素的客户区域包含内边距(padding)和内容(content),但不包含边框(border)。因此在position=absolute的情况下,left和top属性指定的是子元素的外边距(margin)的左上角相对于父元素的内边距(padding)左上角的位置。

    类型

    盒子模型有两种类型:传统的content-box和CSS3之后才导入的border-box,由box-sizing属性定义。虽然border-box更位直观,但因为兼容的原因,缺省值仍然是传统的content-box。

    content-box 
    width和height定义的是内容(Content)部分的宽度和高度而不是整个盒子的高度,内边距(padding)、边框(border)和外边距(margin)依次加在外面。背景会填充padding和content部分。

    border-box 
    width和height定义包含边框(border),内边距(padding)和内容(content),但不包含外边距(margin) 

热门总结