CSS基础(一)
目录
基本介绍
CSS:Cascading Style Sheets
HTML控制页面结构
CSS定义HTML中的元素如何显示,其可以将页面样式与内容相分离
CSS的三种类型
- 内联样式
即在tag标签中增加style属性
<p style="color:red;background-color:white">
This is a paragraph.
</p>
- 内部样式表
定义在头部的style元素中
<html>
<head>
<style>
p{
color:red;
background-color:white;
}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
外部样式表
CSS文件通过link标签链接到html文件中,link元素在html头部:
<!--main.html-->
<html>
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is a paragraph.<p>
</body>
</html>
/*example.css*/
p{
color:red;
background-color:white;
font-size:16px;
}
- href中可以时绝对路径也可以时相对路径,上面的例子用的是相对路径,css文件和html文件在相同的目录里。
- 这里的css样式里设置了字体大小,注意不要在属性值与单位之间留有空格,若使用”font-size:16 px;“,它仅在 IE 6
中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。
- 层叠次序
当同一个 HTML 元素被不止一个样式定义时,一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,越往下越拥有更高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 标签内部)
- 内联样式(在 HTML 元素内部)
CSS基本语法
CSS样式三要素:选择器(selector)、属性(property)、值(value)。
选择器(selector)
类型选择器(type selector)
也叫元素选择器。
选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。
其也可以为 XML 文档中的元素设置样式。
/*将匹配页面中所有的p元素*/
p{
color:red;
font-size:130%;
}
- id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 属性为一个元素分配一个唯一的名字。每个名字只能在被赋予的页面使用一次。
The html:
<div id="intro">
<p>This is a paragraph.</p>
</div>
The CSS:
#intro{
color:red;
font-size:130%;
}
- Class选择器
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
类选择器可以在一个页面中使用多次
The html:
<div class="first">
<p>This is a paragraph.</p>
</div>
The CSS:
.intro{
color:red;
font-size:130%;
}
要点:
- id和class选择器的名字都不能以数字开头!
- class选择器中可以在一个元素中使用多个类。
<p class="important first">This is a paragraph.</p>
.important{color:red;}
.first{font-weight:bold;}
- 如果上例中first类中同样对文字颜色进行了定义,那会使用first中定义的颜色,即在样式表中按照书写顺序后面定义的会覆盖掉前面的。
- 如果还想特别对同时使用两个类的元素做特别定义,可以使用
.important.first{color:blue;} /*注意类名之间不要有空格*/
且其比单独定义的具有更高的优先级,即不论其位于.important上面还是下面都会优先使用它定义的蓝色。- class=”first “双引号里面可以有空格可以正确对应到first类,但id双引号里不允许有空格。
- 类选择器可以结合元素选择器来使用。
p.important{color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素,但是其他任何类型的元素都不匹配,不论是否有此 class 属性。选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”
<p class="important">This is a paragraph</p>
注意:
.important p{color:red;}
与上面的并不一样,其解释为”class属性值为important的元素内部的所有段落“
即:
<div class="important"><p>This is a paragraph</p></div>
- id与class:
- id具有唯一性,可以用来标识页面元素的唯一身份,一般用于大的页面布局;class可以使用多次,方便对同一种类的元素样式进行定义。且id的优先级要高于class。
- id可用作锚定位。