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

CSS基础

2011-04-06 17:33 197 查看

本系列文章的绝大多数内容都来自 w3cschool, 表示感谢。

1. 基础语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。selector {declaration1; declaration2; ... ; declarationN }

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

每条声明由一个属性和一个值组成。属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。selector {property1:value1; property2:value2; ... }

如果值是由多个单词构成的，要加引号：p {font-family:

"sans serif"

;}

多个声明之间用分号隔开。最后一个分号不是必须的

css本身是大小写不敏感的，但是如果css中出现了html中的id或者class，就会区分大小写

2. 选择器

可以对选择器进行分组，被分组的选择器就可以分享相同的声明

用逗号将需要分组的选择器分开，比如 h1, h2, h3 {color:green;}

子元素一般会从父元素继承属性。比如body {font-family:verdana; }, p {color:red}，其中p也会继承body的font-family属性。但是一些浏览器不支持继承

如果不想继承，就为子元素编写新的属性值，比如p {font-family:Times; color:red; }

3. 派生选择器

派生选择器允许根据文档的上下文关系来确定某个标签的样式。比如li strong {font-style: italic; }，只有<strong></strong>应用于<li></li>之间时，才会有效，否则不起作用。

4.id选择器

id选择器为标有特定id的HTML元素指定样式

以#来定义，比如#test {color:red; }，id为"test"的HTML元素的文本都会是红色的(如果没有其他样式共同作用)

id选择器常用来定义派生选择器，比如#sidebar p {color:red; }，表示该样式只会对id为"sidebar"的元素中的段落起作用

假如要将一个样式指定应用到id为"sidebar"的div(而不能应用到id为"sidebar"的table)，可以写div#sidebar

在一个文档中，同一个id，只可能出现一次

id选择器不能结合使用，即不能出现<div id="id1 id2" />的写法

尽管css本身不区分大小写，但是元素的id区分大小写

5. 类选择器

类选择器为标有特定class属性的HTML元素指定样式

以.来定义，比如.center {text-align:center}。这个样式会作用于class="center"的元素，让该元素的文本居中

类选择器也常用来定义派生选择器，比如.fancy td{... ...}。该样式只会对class包含"fancy"的元素内的td起作用

td.fancy{... ...}表示该样式只会对class包含"fancy"的td起作用，对其他元素（即便class包含"fancy"）不起作用

元素的class属性值可以有多个类选择器，比如class="fancy1 fancy2", 此时，fancy1和fancy2的样式都会作用于这个元素，是叠加的效果

.fancy3.fancy4{}这种选择器，将只会匹配class中既包含fancy3又包含fancy4的元素，顺序不限

尽管css本身不区分大小写，但是类名区分大小写

6. 属性选择器

对带有指定属性的HTML元素设置样式

IE6或者更低版本的浏览器不支持属性选择器

[title] {...} 表示该样式只会对设置了title的HTMl元素起作用，没有设置title的元素不受影响

[title=test] {...} 表示该样式只会对设置了title，并且title="test"的元素起作用

[title~=test] {...} 表示该样式只会对设置了title，并且title中有某个单词是test的元素起作用，这些单词之间是通过空格分开的。title="test", title="test css"或者title="css test example"都会受其影响，但是title="testcss"不会受影响

[title|=test] {...} 表示该样式只会对设置了title，并且title中有某个单词是test的元素起作用，这些单词之间时通过连字符分开的。title="test", title="test-zh", title="test-zh us"都会受其影响，但是title="test -zh"不会受影响

input[type="button"] {... ...} 表示该样式只会对button起作用

7. 使用css

外部样式表：在页面文件之外，编写css文件，将样式全部放入css文件，并在页面上引用css文件。引用代码为<link rel="stylesheet" type="text/css" href="...">

内部样式表：直接写在页面文件的<head></head>之间的样式表，当某个页面文件自己需要特定的样式表时，可以使用内部样式表

内联样式：在HTML元素中使用style="... ..."定义。一般不推荐这种方式，它将表现和内容混合在一起

如果某个元素在不同的样式表中被同样的选择器定义，那么重叠的样式将会按照内联样式 > 内部样式表 > 外部样式表的顺序确定最终的样式

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航