CSS基础（一）

来源：互联网发布：股票高手软件编辑：程序博客网时间：2024/04/29 23:25

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）。

CSS样式三要素

选择器（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可用作锚定位。

0 0

CSS基础（一）

CSS基础（一）

目录

基本介绍

CSS的三种类型

CSS基本语法

选择器（selector）