您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> DivCSS教程 >> 正文

CSS入门教程:语法基本

作者:佚名    责任编辑:admin    更新时间:2022-06-22

在进修中碰着题目可以到 论坛 发贴交换!

本例为CSS入门系列教程,在这一课中我们将进修CSS的语法基本,首要进修CSS的根基语法、选择符组、类选择符、ID选择符、包括选择符、 样式表的层叠性以及,但愿能给对网页建造感乐趣的伴侣带来辅佐~~

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要领,行使这种要领,我们可以很利便的在恣意元素上套用预先界说好的类样式。

4. ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素界说单独的样式。
ID选择符的应用和类选择符相同,只要把CLASS换成ID即可。将上例中类用ID更换:

<p id="intro">
这个段落向右对齐
</p>

界说ID选择符要在ID名称前加上一个“#”号。和类选择符沟通,界说ID选择符的属性也有两种要领。下面这个例子,ID属性将匹配全部 id="intro"的元素:

#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

(字体尺寸为默认尺寸的110%;粗体;蓝色;配景颜色透明)


下面这个例子,ID属性只匹配id="intro"的段落元素:

p#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

留意:ID选择符范围性很大,只能单独界说某个元素的样式,一样平常只在非凡环境下行使。

5. 包括选择符

可以单独对某种元素包括相关界说的样式表,元素1里包括元素2,这种方法只对在元素1里的元素2界说,对单独的元素1或元素2无界说,譬喻:

table a
{
font-size: 12px
}

在表格内的链接改变了样式,笔墨巨细为12象素,而表分外的链接的笔墨仍为默认巨细。


6. 样式表的层叠性

层叠性就是担任性,样式表的担任法则是外部的元素样式会保存下来担任给这个元素所包括的其他元素。究竟上,全部在元素中嵌套的元素城市担任外层元素指定的属性值,偶然会把许多层嵌套的样式叠加在一路,除非其它变动。譬喻在DIV标志中嵌套P标志:

div { color: red; font-size:9pt}
……
<div>
<p>
这个段落的笔墨为赤色9号字
</p>
</div>

(P元素里的内容会担任DIV界说的属性)

留意:有些环境下内部选择符不担任周围选择符的值,但理论上这些都黑白凡的。譬喻,上界线属性值是不会担任的,直觉上,一个段落不会同文档BODY一样的上界线值。

其它,当样式表担任碰着斗嘴时,老是以最后界说的样式为准。假如上例中界说了P的颜色:

(