CSS 特性和值

更新日期: 2018-11-24阅读: 1.8k标签: 特性

css 声明( Declarations )

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 ":",跟着是一个特性的值构成。中间可以有空格将它们隔开。

可用以下方式表达:

property : value;

其中 property 指代的是所有 CSS 特性,value 指的是这个特性的值。

例如:

p{
    height:100px;
}

其中,height 是特性,而 "100px" 是值。CSS 声明的基础是 CSS 特性。


CSS 特性( properties )

CSS 是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 其中的样式信息,其实就是用户对于如何设置元素渲染方式的设置信息。

自提倡 Web 数据与分离理念以来,CSS 作为不可或缺的一部分参与了这项伟大运动。

以 TABLE 为例,设置它的高度,可以表示为

<table height="100">
    <tr>
        <td>hello</td>
    </tr>
</table>

这种表示方式的坏处是不利于 TABLE 元素的统一管理,比如,页面上有 1 万个 TABLE 元素, 我已经用了 1 万次粘贴(当然,你可以借助工具),将所有的高度置成了 100,如果要改成150,那么,又是 1 万次。 利用 CSS 完全可以摆脱这种窘境,修改 TABLE 的高度,只需这样:

<style type="text/css">
    table {
        height: 100px;
    }
</style>
<table>
    <tr>
        <td>hello</td>
    </tr>
</table>

其中的 height 就是 CSS 特性的一种,每个 CSS 特性都有一个名字,可以赋予它 CSS 值,以达到不同的渲染效果。你可以让所有的 TABLE 变得更高,设置它的 height 特性的值为 "150px" 就可以了。


CSS 特性的值

整数和数字

有些值类型可能会包含整数和实数。实数和整数都只能用十进制的数来表示。

整数值表示为 <integer>,是由数字 0~9,和前面的正负号组成。例如:0,-2,-7,7。

实数值表示为 <number>,是由 0~9,小数点以及前面的正负号组成。例如:-1.5,3.1415926,实数包括整数。

注意,有时候,某些特性会给定实数和整数的确切范围,比如,经常用到的非负整数。

使用此类值的 CSS 特性有:'line-height'、'pitch-range'、'richness'、'z-index' 和 'widows' 等。

比如其中的 'z-index' 表示为:

'z-index' : auto | <integer> | inherit

长度值

长度值适用于水平或垂直方向的尺寸。

长度值表示为 <length>。长度值的格式是: <number> + 单位( e.g., px, em, etc.),注意,一定要有单位,除非这个值是0。 如果长度值是0,单位可有可无。

可用此类值的 CSS 特性很多,例如,'margin'、'padding'、'height' 和 'width'等。

有些特性支持负的长度值,比如 ‘margin’。但是如果给一个不支持负长度值的特性设置一个负的值,那么这个声明会被忽略。

长度的单位有两种:相对长度和绝对长度。下面对这两类单位详细介绍。

1). 相对长度

相对长度会随着它参考值的变化而变化,不是固定的值。

  • em : 与 'font-size' 的大小有关,与作用到元素上的 'font-size' 的值大小相等;
  • ex : 一个小写字母 x 的高度;
  • px : 像素数( pixels )。

例如:

h1 { margin: 0.5 em }      /* em */
h1 { margin: 1 ex }        /* ex */
p  { font-size: 12 px }    /* px */

2). 绝对长度

  • in : 英寸 — 等于2.54厘米
  • cm : 厘米
  • mm : 毫米
  • pt : 点 — CSS 2.1里 1pt 等于 1/72 英寸
  • pc : 皮卡 — 1pc 等于 12pt,也就是 1/6 英寸

例如:

h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */

百分比值

百分比值表示为 <percentage>。它的格式是:<number> + %。

常见可用百分比为值的 CSS 特性如:'height'、'width' 等。

百分比值总是跟其他的值有关,比如长度值。


URL 和 URI

Web 上可用的每种资源 - html 文档、图像、视频片段、程序等 - 由一个通用资源标志符(Uniform Resource Identifier, 简称 "URI" )进行定位。

URL 是Uniform Resource Location的缩写,译为 “统一资源定位符” 。它是 URI 命名机制的一个子集。

URI 表示为 <uri>。注意,定义 URI 使用 “url()” 。

比如,'background-image' 特性的描述:

'background-image' : <uri> | none | inherit

而在设置该特性的时候:

background-image:url(...)


计数器

计数器使用大小写敏感的标识符来表示。参考特性:'counter-increment' 和 'counter-reset'。

计数器的标记是 'counter(<identifier>)' 或者 'counter(<identifier>, <'list-style-type'>)',其中 'list-style-type' 默认为 “decimal”,即小数点。

注意,IE 浏览器从 IE8 才开始支持计数器。


颜色

颜色值用 <color> 来表示。可以是一个 RGB 的颜色数值,也可以是关键词。

颜色的关键词列表是:aqua、 black、 blue、 fuchsia、 gray、 green、 lime、 maroon、 navy、 olive、 orange、 purple、 red、 silver、 teal、 white 和 yellow。

来自 W3C 官方的截图:


除此之外,用户还可以使用用户环境中某些对象的颜色。

当然,这些关键词,浏览器可以扩展,比如:‘gold’、‘darkgray’ 等。

RGB 颜色被用于数值表示颜色。例如,用不同的表示方法表示红色:

em { color : #f00 }              /* #rgb */
em { color : #ff0000 }           /* #rrggbb */
em { color : rgb(255,0,0) }
em { color : rgb(100%, 0%, 0%) }

十六进制的 RGB 颜色值必须含有 “#” 前缀,后跟三个或六个十六进制字符。 其中,三位的和六位之间的转换是:'#rgb' 等于 '#rrggbb',所以,'#FFFFFF' 可以简写成 '#FFF'。

函数记号的 RGB 颜色值,rgb(……),括号里面是三个逗号分隔的 0~255 的值,或者是三个百分比值。百分比值 p 和整数值 v 的关系是 v=255×p。

超过有效范围的值,应该被处理为可用范围内的值,如:

em { color : rgb(255, 0, 0) }        /* 范围 0 - 255 */
em { color : rgb(300, 0, 0) }       /* 修剪为 rgb(255, 0, 0) */
em { color : rgb(255, -10, 0) }     /* 修剪为 rgb(255, 0, 0) */
em { color : rgb(110%, 0%, 0%) }    /* 修剪为 rgb(100%, 0%, 0%) */

字符串

字符串可以被写在单引号或双引号中。

字符串表示为:<string>。

一个字符串不能直接包含一个新行。想要达到此目的,可以使用转义字符 ISO-10646 (U+000A),它表示换行符。

注:x-height 为英文字体设计中的一个术词,它的标准高是一个小写字母 x 的高度单位;


不存在的特性和不合法的值

对于不存在的特性和不合法的值,用户端都应该以忽略此声明的方式予以处理。比如:

p{
    W3Help : "good";
    height : "hello";
}

此样式中 W3Help 字符虽然存在,但是却不存在 W3Help 这个 CSS 特性,也不存在 "hello" 的 height 特性的值。所以,这两条样式声明都应该被忽略。

不合法的值可能引起的浏览器兼容性问题,其中有一种情况是人为的错误,被不同的浏览器以不同的方式处理,还有一种情况是,某些浏览器支持其他浏览器所不支持的值,比如:

cursor : 'hand';

恐怕,只有 IE 以及他的追随者还有使用 IE 渲染引擎的国内特色"山寨"浏览器,支持 'cursor' 特性的 "hand" 值。

    链接: https://www.fly63.com/article/detial/6612

    CSS新特性contain,控制页面的重绘与重排

    contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。

    Html5、Css3、ES6的新特性

    Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

    ES6新特性--var、let、const

    var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

    Js即将到来的3个新特性

    Optional Chaining(可选链式调用);Nullish coalescing(空值合并);Pipeline operator(管道运算符)通过三个函数对字符串进行处理;

    Angular 8的新特性介绍

    在今天早些时候Angular团队发布了8.0.0稳定版。其实早在NgConf 2019大会上,演讲者就已经提及了从工具到差分加载的许多内容以及更多令人敬畏的功能。下面是我对8.0.0一些新功能的简单介绍,希望可以帮助大家快速了解新版本

    使用 React 要懂的 Js特性

    与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

    ES2019 新特性汇总

    最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

    Js的用途和特性

    JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

    十个超级实用的 JS 特性

    你可能刚上手 JavaScript,或者只是曾经偶尔用过。不管怎样,JavaScript 改变了很多,有些特性非常值得一用。 这篇文章介绍了一些特性,在我看来,一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性

    解密HTTP/2与HTTP/3 的新特性

    HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。

    点击更多...

    内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!