您的位置：首页 > Web前端 > CSS

CSS基础语法

2014-06-14 09:56 218 查看
基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

选择器 {宣言1; 宣言2; ... 宣言N }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器 {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

值的不同写法和单位

除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：

1

p{color:#ff0000;}

为了节约字节，我们可以使用 CSS 的缩写形式：

1

p{color:#f00;}

我们还可以通过两种方法使用 “红绿蓝”RGB 值：

1

p{color:rgb(255,0,0);}p{color:rgb(100%,0%,0%);}

请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么。

值为若干词须写引号

提示：如果值为若干词，则要给值加引号，值为中文也建议加上引号：

1

p{font-family:"sansserif";}

多重声明

如果要定义不止一个声明，则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的，因为分号在英语中是一个分隔符号，不是结束符号。然而，大多数有经验的设计师会在每条声明的末尾都加上分号，这么做的好处是，当你从现有的规则中增减声明时，会尽可能地减少出错的可能性。就像这样：

1

p{text-align:center;color:red;}

你应该在每行只描述一个属性，这样可以增强样式定义的可读性，就像这样：

p{

text-align:center;

color:black;

font-family:arial;

}

空格和大小写

大多数样式表包含不止一条规则，而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑：

1

body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}

是否包含空格不会影响 CSS 在浏览器的工作效果，同样，与 XHTML 不同，CSS 对大小写不敏感。不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的。[1] 

9高级语法

编辑

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

1

h1,h2,h3,h4,h5,h6{color:green;}

　　

继承及其问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则：

1

body{font-family:Verdana,sans-serif;}

　　

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。

通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的。

但是在那个浏览器大战的血腥年代里，这种情况就未必会发生，那时候对标准的支持并不是企业的优先选择。比方说，Netscape 4 就不支持继承，它不仅忽略继承，而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。我们又该如何是好呢？

关于继承，还有一个特别的地方，如果<html>上没有设置background相关属性，而<body>上有设置，则<body>会向上传播到<html>上；

并不是所有属性都能继承，比如CSS盒子模型相关属性就是不能继承的。

继承是一个诅咒吗？

如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承，又该怎么做呢？比方说，你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则：

body{font-family:Verdana,sans-serif;}

td,ul,ol,ul,li,dl,dt,dd{font-family:Verdana,sans-serif;}

p{font-family:Times,"TimesNewRoman",serif;}

关于继承其实是一个很好、很强大的功能，因为有继承，我们可以少写很多code.　

10删除样式

编辑

使用Frontpage编辑时，在页面视图下打开样式文件。格式/样式命令，从打开的“样式”对话框中选择要删除的样式，单击“删除”。

专业人士可能会用代码写CSS样式，例如给一个div块内的内容连接样式可以使用下面的语句：<div class="classname" >，而当你要删除样式时，把尖括号里面的"class='classname' "语句去掉即可。

下面的示意图为您展示了上面这段代码的结构：

您发个本系列文章由@浅墨_毛星云 出品，转载请注明出处。  

文章链接： http://blog.csdn.net/poem_qianmo/article/details/26977557
作者：毛星云（浅墨）    微博：http://weibo.com/u/1723155442

知乎：http://www.zhihu.com/people/mao-xing-yun

邮箱： happylifemxy@163.com

写作当前博文时配套使用的OpenCV版本：
http://www.zhms.cn/User/G/photoview.asp?130037-3443528.html http://www.zhms.cn/User/G/photoview.asp?130037-3443530.html http://www.zhms.cn/User/G/photoview.asp?130037-3443531.html http://www.zhms.cn/User/G/photoview.asp?130037-3443532.html http://www.zhms.cn/User/G/photoview.asp?130037-3443538.html http://www.zhms.cn/User/G/photoview.asp?130037-3443540.html http://www.zhms.cn/User/G/photoview.asp?130037-3443543.html http://www.zhms.cn/User/G/photoview.asp?130037-3443544.html http://www.zhms.cn/User/G/photoview.asp?130037-3443546.html http://www.zhms.cn/User/G/photoview.asp?130037-3443548.html http://www.zhms.cn/User/G/photoview.asp?130037-3443549.html http://www.zhms.cn/User/G/photoview.asp?130037-3443551.html http://www.zhms.cn/User/G/photoview.asp?130037-3443552.html http://www.zhms.cn/User/G/photoview.asp?130037-3443554.html http://www.zhms.cn/User/G/photoview.asp?130037-3443554.html http://www.zhms.cn/User/G/photoview.asp?130037-3443557.html http://www.zhms.cn/User/G/photoview.asp?130037-3443557.html http://www.zhms.cn/User/G/photoview.asp?130037-3443560.html http://www.zhms.cn/User/G/photoview.asp?130037-3443564.html http://www.zhms.cn/User/G/photoview.asp?130037-3443566.html http://www.zhms.cn/User/G/photoview.asp?130037-3443566.html http://www.zhms.cn/User/G/photoview.asp?130037-3443568.html http://www.zhms.cn/User/G/photoview.asp?130037-3443568.html http://www.zhms.cn/User/G/photoview.asp?130037-3443571.html http://www.zhms.cn/User/G/photoview.asp?130037-3443571.html http://www.zhms.cn/User/G/photoview.asp?130037-3443580.html http://www.zhms.cn/User/G/photoview.asp?130037-3443580.html http://www.zhms.cn/User/G/photoview.asp?130037-3443585.html http://www.zhms.cn/User/G/photoview.asp?130037-3443586.html http://www.zhms.cn/User/G/photoview.asp?130037-3443586.html http://www.zhms.cn/User/G/photoview.asp?130037-3443589.html http://www.zhms.cn/User/G/photoview.asp?130037-3443589.html http://www.zhms.cn/User/G/photoview.asp?130037-3443592.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航