CSS入门能力七则：语法基本教程

CSS入门教程之语法基本

1. 根基语法

CSS的界说是由三个部门组成：选择符（selector），属性（properties）和属性的取值（value）。
根基名目如下：

selector {property: value}

（选择符 {属性：值}）

选择符是可所以多种情势，一样平常是你要界说样式的HTML标志，譬喻BODY、P、TABLE……，你可以通过此要领界说它的属性和值，属性和值要用冒号离隔：

body {color: black}

选择符body是指页面主体部门，color是节制笔墨颜色的属性，black是颜色的值，此例的结果是使页面中的笔墨为玄色。

假如属性的值是多个单词构成，必需在值上加引号，好比字体的名称常常是几个单词的组合：

p {font-family: "sans serif"}

（界说段落字体为sans serif）

假如必要对一个选择符指定多个属性时，我们行使分号将全部的属性和值分隔：

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

（段落居平分列；而且段落中的笔墨为赤色）

为了使你界说的样式表利便阅读，你可以回收分行的誊写名目：

p
{
text-align: center;
color: black;
font-family: arial
}

（段落分列居中，段落中笔墨为玄色，字体是arial）

2. 选择符组

你可以把沟通属性和值的选择符组合起来誊写，用逗号将选择符分隔，这样可以镌汰样式一再界说：

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

（这个组里包罗全部的问题元素，每个问题元素的笔墨都为绿色）

p, table{ font-size: 9pt }

（段落和表格里的笔墨尺寸为9号字）

结果完全等效于：

p { font-size: 9pt }
table { font-size: 9pt }

3. 类选择符

用类选择符你可以或许把沟通的元素分类界说差异的样式，界说类选择符时，在自定类的名称前面加一个点号。若是你想要两个差异的段落，一个段落向右对齐，一个段落居中，你可以先界说两个类：

p.right {text-align: right}
p.center {text-align: center}

然后用不在差异的段落里，只要在HTML标志里插手你界说的class参数：

<p class="right"> 这个段落向右对齐的
</p>
<p class="center">
这个段落是居平分列的
</p>

留意：类的名称可所以恣意英文单词或以英文开头与数字的组合，一样平常以其成果和结果扼要定名。

类选择符尚有一种用法，在选择符中省略HTML标志名，这样可以把几个差异的元素界说成沟通的样式：

.center {text-align: center}

（界说.center的类选择符为笔墨居平分列）

这样的类可以被应用到任何元素上。下面我们使h1元素（问题1）和p元素（段落）都归为“center”类，这使两个元素的样式都跟从“.center” 这个类选择符：

<h1 class="center">
这个问题是居平分列的
</h1>
<p class="center">
这个段落也是居平分列的
</p>

留意：这种省略HTML标志的类选择符是我们经后最常用的CSS要领，行使这种要领，我们可以很利便的在恣意元素上套用预先界说好的类样式。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!