CSS设计模式:语法

css的语法非常简单。一个样式表中含有很多样式(style),一种样式又包括了选择符(selector)和规则(rule),一条规则包括一个属性(property)和值(">value).下面是样式的
设计模式:

SELECTORS' RULES)

规则的设计模式如下所示:

PROPERTY:VALUE;

举个例子,p{margin:o:}是一种样式。p是选择符,它选择了HTML文档中的所有<p>元素。大括号({})运算符把规则marjin:o:赋给了选择符p。冒号(:)运算符则把值o赋给了属性margin。分号(;)运算符代表规则的结束。

一种样式可能含有多个选择符和多条规则。比如,p.tip{margin:o:line-height:150%;}是一种样式。大括号把两条规则margin:o;和line -height:150%;组成一个规则集赋给选择符p.tip,它选择了HTML文档中的所有<p class=“tip”>元素。

CSS语法细节

css语法的
关键点有如下几个。

1.应当用Unicode UTF-8来给css文件编码-HTML文件也应该用
同样的编码格式。

2.cSS代码应当小写。当引用XHTML中的元素名字、类、属性和ID时,选择符是区分
大小写的(case sensitive)。css的属性和值则不区分大小写(case insensitive)。为了保持简洁和一致性,所
有的css代码都使用小写字符,包括元素、类和ID。

3元素名、类和ID只能由字母、数字和下划线(一)、连字符(一)和161个或更多Unicode字符所构成。元素、类和ID的第一个字符不能是数字或连字符。类名和ID中绝对不能含有标点符号(不包括下划线和连字符)。比如,my_name2 -1对类和ID来说都是一个规范的名字.
但是下面这些却是无效的:1、Imy_name_ -my_name. my:name、my.name和my,name。

4.可以通过把多个类名用空格分开,为元素赋予多重类(multiple class),
例如class:. classl  class2  class3 -.

5.常量值(constant value)
不用引号。例如,c。lor:black;是正确的,但color:'black':就是错误的。

6.反斜杠(\)可以在某些不能直接显示字符的地方把它们镶嵌进去。例如,\26B会在字符串或标识符中镶嵌“&”。反斜杠后面可以紧接任何2—8{1的10:&制代码或者某个字符,

7.字符串里可以包括小括号、逗号、空格、单引号(.)、双引号(-).
不过它们要用反斜

"embedded left  parentheses \(“    /*镶嵌左括号 */

"embedded right parentheses \)“   /*镶嵌右括号*/

"embedded comma、\,"                   /*镶嵌逗号     */

"embedded single quote  \‘”             /*镶嵌单引号 */

"embedded double quote  \“”           /*镶嵌双引号 */

"embedded single quote  、in a double-quoted string”  /*在双引号字符串中镶嵌单引号*/

'embedded double quote “ in a double-quoted string’  /*在单引号字符串中镶嵌单引号*/

分号用于终止css规则和@import语句.color:red; @import “mystylesheet .css”

规则集(ruleset)是指在大括号中包含了多条规则,例如t  color: red;  font-size:  small;  ).

右大括号(})立即终止一组属性,除非它是镶嵌在字符串中的,就像“}”。

①在HTML中.css选择符是不区分大小写的.

CSS注释是以“/”为起始,“*/”为结束的,例如:/*这是-条CSS注释.在注释里不能嵌套。因此,当浏览器在样式表中遇到第一个*/后,它就会当作注释的结束。如果后面又遇到了一个/*,它们不会被当作注释中的一部分。举个例子:

/*这是一个错误的注释

/*因为它试田嵌套

/*多条注释+/

从这儿开始,这些文本已经不属于注释了! */*/

时间: 2024-09-17 04:35:43

CSS设计模式:语法的相关文章

CSS标签语法:详解选择符中的关系选择符

文章简介:CSS标签语法:详解选择符中的关系选择符. 相信大家都对CSS选择符都不陌生,选择符包含:元素选择符.关系选择符.属性选择符.伪类选择符.伪对象选择符.在众多的选择符中,可以让我们根据自己的需要更加灵活性的选择合适的选择符来对样式进行编写,达到最大的质量和效率. 今天就为大家介绍下选择符中的关系选择符,"关系"这可是一等一的大事啊,我们得理清楚,这样做事情才能更加的有效率.不然在CSS中有你受的,哈哈.关系选择符有四个类别:包含选择符.子选择符.相邻选择符.兄弟选择符.接下来

CSS 基础语法

核心提示:CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. selector {declaration1; declaration2; ... declarationN } 选择器通常是您需要改变样式的 HTML 元素. 每条声明由一个属性和一个值组成. 属性(property)是您希望设置的样式属性(style attribute).每个属性有一个值.属性和值被冒号分开. selector {prope

新手来学习网页技术CSS的语法基础

css|网页|语法 1. 基本语法 CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value). 基本格式如下: selector {property: value} (选择符 {属性:值}) 选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: body {color: black} 选择符body是指页面主体部分,color是控制文字颜色的属性

网页制作之常用CSS缩写语法总结

css|网页|语法 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩写为#369; 盒尺寸 通常有下面四种书写方法: property:value1; 表示所有边都是一个值value1: property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value

Web开发学习心得3——CSS的语法与层叠

这篇主要讨论CSS的语法及层叠的概念,有关CSS布局方面的内容下篇讨论. 如前两篇文章所述,CSS是专门用来负责文档的展现的,那既然如此,CSS就一定能够控制每种元素的展现,于是,就有了第一类语法--元素选择符. 元素选择符语法如下: element { 样式规则 } 这个非常好理解,所谓元素选择符,就是说文档中所有该元素,都以该样式规则显示. 非常好,有了元素选择符,就能够很大程度上控制文档的展现了.然而,人们很快就碰到了新的问题:我有两个相同的元素,但是我希望两个元素以不同的样式展现.为了满

css基本语法

1. CSS的语法: CSS的定义是由三个部分构成: 选择符(selector),属性(properties)和属性的取值(value). 语法: selector {property: value} (选择符 {属性:值}) 说明: ·选择符是可以是多种形式,一般是你要定义样式的HTML标记,例如BODY.P.TABLE--,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开: 例子:body {color: black},此例的效果是使页面中的文字为黑色. ·如果属性的值是多个单词组成,

又一实用的常用CSS缩写语法收集_经验交流

为什么要进行CSS缩写? 在进行WEB标准网页设计时,必不可少的是写入大量的CSS语法,一般情况下我们可以通过Dreamweaver软件的"CSS样式"面板自动生成相应的CSS代码. 不过虽然软件生成的CSS代码阅读清晰易懂,但就是由于CSS对条条样式定义的清晰解释,也就使得CSS代码阅读显得冗长复杂,同时CSS代码的字节数也在增加--这对于追求高效率和完美性的人来说,是很难容忍的. 比如我们在给某元素定义填充大小时,使用到padding,当对上.右.下.左填充有不同要求时,软件生成的

CSS设计模式

我把这些结果浓缩成了350余种简单的设计模式--这些css和HTML设计模式将会帮助你创建出令人震惊的.高性能并且可访问的网站.在了解这些设计模式后,你将会诧异为什么以前开发网站的时候没有用到它们! 我将阐述一下设计模式的用途以及它们的运作机理.我会举一些例子来说明如何通过组合某些设计模式来创建新的模式.我还将告诉你如何有效地利用样式表. css语法和层叠排序.接下来要展示一组图表,其中列出了全部可用的css属性和度量单位.然后t我将列出12种快速解决css难题的方案.最后,我想讲一下如何将不同

旧CSS Flexbox语法案例和新CSS Flexbox语法案例

文章简介:2011年Richard Shepherd在Smashingmagazine.com写了篇文章.文章附带的提到了2011年版本的语法,但更侧重于2009年旧版本的语法. 大家都清楚的知道:"Flexbox"(全称:CSS Flexible Box Layout Module)在过去的三年中经历了许多变化.变化都达到了规范以及什么样的浏览器支持Flexbox. 如何辨别 如果你使用google搜索Flexbox,你会发现很多过时的信息.这里将告诉你如何迅速的辨别你需要的信息.