CSS基础学习

标签： css 基础学习 | 发表时间：2012-12-18 18:03 | 作者：chenlilong84

出处：http://blog.csdn.net

1. CSS基础介绍：

（1） CSS的作用：兼容、实现了将页面内容与页面表现相分离。

（2）当文档中的某一元素被多处样式定义时，究竟会使用那个样式呢？（优先级从高到低）

内联样式--->内部样式表--->外部样式表--->浏览器缺省设置

2. CSS基础语法与高级语法：

（1） CSS规则组成：选择器+一条或多条声明

selector {declaration1;declaration2; ... declaration;}

其中声明又是由一个属性和一个值组成，属性与值之间是由冒号隔开。

selector{property: value}

【注意】

◆ 若属性值有多个单词， 不需要给它们加双引号（ 经测在firefox浏览器上识别不了）；

◆ 当规则中有多条声明时，应该尽量给每一条声明加上分号；

◆ 不要在属性值与单位之间留空格，这种情况仅仅在IE6下能工作

（2）选择器的成组：若多个选择器共用多条声明，此时可以将这些选择器写成一组，如：

h1,h2,h3,h4,h5,h6{

color: green;

}

（3）继承以及问题：在CSS中，子元素是可以继承父元素的属性的，例如若我们定义：

body{

font-family: Verdana, sans-serif;

}

此时定义body元素内部所有子元素字体均应该是Verdana，但是如果body元素中的p元素若想拥有自己的字体，则可以创建一个针对元素p的规则，这样也就摆脱了body的依赖了。

p {

font-family:Times, "Times New Roman", serif;

}

（4） CSS的创建方法：

本节主要介绍如何在HTML文档中插入CSS样式，常见的方法主要有以下三种：

◆ 外部样式表：

当想将样式应用于多个页面时，可以考虑使用外部样式表，每个页面使用<link>标签就可以链接到样式表，注意<link>标签应该在文档的头部，如：

<head>

<linkrel="stylesheet" type="text/css"href="mystyle.css" />

</head>

◆ 内部样式表：

当某个文档需要特别的规则时，可以考虑在此文档中插入内部样式表，可以使用<style>标签在头部内定义。如：

<head>

<styletype="text/css">

hr {color: sienna;}

p {margin-left: 20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

◆ 内联样式：

在这种样式下，表现跟内容是混在一起的，这样会损失掉样式的许多优势。直接在响应标签内使用style属性进行定义，如：

This is a paragraph

</p>

3. 选择器：

CSS中定义了多种选择器，下面主要着重讲解元素选择器、属性选择器以及派生选择器等。

（1）元素选择器

元素选择器可以看作是最常见的一种选择器，它是 根据文档中的元素类型来进行选择的，因为对于一个HTML文档，是由各种各样的元素组成的，例如p, h1, em, 甚至是html本身。

html {color:black;}
h1 {color:blue;}
h2 {color:silver;}

【注意】

◆ 在w3c的标准中，元素选择器也叫类型选择器。

◆ 根据元素各自的规则，我们可以对多个选择器分组，例如：

h2, p {color:gray;}

这样h2和p选择器全部放在共同规则的左边，并且用逗号进行分割，值得注意的是，此处的逗号是十分重要的，为了告诉浏览器这是两个不同的选择器。

根据选择性分组，我们可以组成各种不同的规则分组，例如：

/* group 1 */
h1 {color:silver; background:white;}
h2 {color:silver; background:gray;}
h3 {color:white; background:gray;}
h4 {color:silver; background:white;}
b {color:gray; background:white;}

/* group 2 */
h1, h2, h4 {color:silver;}
h2, h3 {background:gray;}
h1, h4, b {background:white;}
h3 {color:white;}
b {color:gray;}

/* group 3 */
h1, h4 {color:silver; background:white;}
h2 {color:silver;}
h3 {color:white;}
h2, h3 {background:gray;}
b {color:gray; background:white;}

上面三组在逻辑上是等价的。

◆ 除了可以对选择器进行分组之外，还可以对后面的声明规则进行分组，例如：

h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}

就可以精简成：

h1 {font: 28px Verdana; color: white;background: black;}

但是一定要注意的是，对于声明分组，在 每条声明之后一定要加上分号！

◆ 倘若将选择器分组与声明分组结合在一起，那样会显得效率更高，如：

h1, h2, h3, h4, h5, h6 {
 	 color:gray;
 	 background: white;
 	 padding: 10px;
  	 border: 1px solid black;
  	 font-family: Verdana;
  	}

（2）通配符选择器

CSS2中引入了一种通配符选择器，它可以与任何地元素进行匹配，通配符选择器，显示为一个星号(*),如：

* {color:red;}

（3）类选择器

类选择器允许以一种独立于文档元素的方式来指定样式，它既可以单独使用，也可以与元素结合起来一起使用，下面将分别介绍。

<h1 class="important">
This heading is very important.
</h1>

<p class="important">
This paragraph is very important.
</p>

*.important {color:red;}
.important  {color:red;}

如上面代码，类选择器的语法格式就如红色部分，其中通配符可加可不加。若与指定的元素相结合，则可以缩小类所代表的范围，如若想只是对元素p设置规则，则可以：

p.important {color:red;}

【说明】

◆ 注意元素与类名是通过点号连接的。

◆ 试想假若多个类具有相同的声明规则，我们可以通过将多个类分组。例如：

.important {font-weight:bold;}
.warning {font-weight:italic;}
.important.warning {background:silver;}

不过值得注意的是，在IE7之前的版本中，均不能正常处理多类分组形式的规则。

（4） ID选择器

ID选择器与类选择器类似，允许以一种独立于文档元素的方式来指定样式。不过二者还是有一些区别。

◆ 语法差异：类选择器前面是点号，而ID选择器则是#号

*#intro {font-weight:bold;}

同样此处的通配符可以省略。

◆ 通常来讲，ID选择器仅仅只使用一次，因为HTML文档中的ID设置均是唯一的。

◆ ID选择器不能结合使用，因为ID属性不允许以空格分隔。

最后一点，类选择器与ID选择器对文件名的大小写是敏感的！

（5）属性选择器

属性选择器是在CSS2中引入的，它可以根据元素的属性以及属性值来选择元素。

不同于前面的类选择器与ID选择器，属性选择器不仅可以根据元素的属性类型来选择元素，也可以根据属性值来进行选择。

◆ 简单属性选择（根据元素属性名选择）

简单属性选择指的就是只根据元素的属性类型选择元素，而不管其具体的属性值。如：

*[title] {color:red;} //将所有含有title属性的元素的颜色全设置为红色

注意，此处的通配符也是可以省略的。

若想指定的规则只是应用于某一特定的元素，可以将元素类型加在前面，如：

a[href] {color:red;}

只是元素a的href属性的颜色设置为红色。

同样支持同一元素的多个属性分组，如：

a[href][title] {color:red;}

将元素a的href以及title属性的颜色均设置成红色。

使用属性选择器很适合用于设置XML文档中的属性格式.

◆ 根据元素属性值选择

指定元素属性值，这样可以进一步缩小查找范围，如：

       a[href="http://www.w3school.com.cn/about_us.asp"]{color: red;}

值得注意的是，这种情况下，属性名与属性值必须完全匹配。但是，如果只是想根据 属性值中的某个词来进行选择，那该如何实现呢？此时则需要用波浪号(~)。

p[class~="important"] {color: red;}//选取class属性中含有important的元素

另外元素属性值选择还支持模糊搜索，即通过子串匹配的模式来选择元素，这是在CSS2中引入的，可以简单归纳为如下：

还有一种特定的属性选择器，那就是：

*[lang|="en"] {color: red;}

上面这条规则会选择 lang属性等于en或者以en-开头的所有元素。

（6）后代选择器

后代选择器又叫包含选择器，可以选择作为某元素后代的元素。如若希望只对h1元素中的em元素应用样式，则可以这样写：

h1 em {color:red;}

注意规则左边的选择器一端包括两个或者多个用空格分隔的选择器，选择器之间的空格是一种分隔符。另外还需要注意父元素与子元素的摆放位置，父元素在前，子元素在后。

（7）子元素选择器

子元素选择器可以定位到某一个特定的子元素。如若希望选择只作为h1元素子元素的strong元素，则可以写成：

<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

h1 > strong {color:red;}

注意到子选择器所使用的连接符是大括号,其中父元素在前，子元素在后。

（8）相邻兄弟选择器

相邻兄弟选择器可以选择在某一元素之后的相邻元素，且二者之间有相同的父元素。相邻兄弟的连接符是加号。

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
li + li {font-weight:bold;} //将每个列表的第二个和第三个项目字体设置为粗体

（9） CSS伪类

伪类的语法为：

selector : pseudo-class {property: value}

有时候也可以与类进行搭配，如：

selector.class : pseudo-class {property: value}

下面将介绍常见的几类伪类：

◆ 锚伪类

与锚有关的几个属性有：link, visted, hover和active,分别代表未访问的链接、已访问的链接、鼠标移

动到连接上以及选定的连接。

a:link {color: #FF0000}    /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

值得注意的是，CSS规定，a:hover必须置于a:link和a:visted之后才有效；a:active必须置于a:hover之后才有效。

◆ first-child伪类（CSS2定义）

first-child伪类可以用来选择元素的第一个子元素.

<html>
<head>
<style type="text/css">
p:first-child {
  	color: red;
  	} 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

值得注意的是，只有声明了<!DOCTYPE>之后，first-child才能在IE中生效。

（10）伪元素

伪元素可用于向某些选择器设置一些特殊的效果。语法如下：

selector:pseudo-element {property:value;}

同样CSS类可以与伪元素一起配合。语法如下：

selector.class:pseudo-element {property:value;}

下面将阐述常见的几个伪元素：

◆ :firstline伪元素

被用于向文本的首行设置特殊样式，如：

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

◆ :first-letter伪元素

被用于向文本的首字母设置特殊样式，如：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

当然可以结合多个伪元素一起使用。

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }

◆ :before伪元素与:after伪元素

可以在元素的内容前后插入新的内容。通常结合使用的属性是content,如：

h1:before
  {
  content:url(logo.gif);
  }
h1:after
  {
  content:url(logo.gif);
  }

4. 基础属性与高级属性：

(1) 背景

跟背景相关的属性主要有以下几个：

◆ background-color （设置背景色）

可用来设置元素的背景颜色，可能的属性值有以下几种： color_name(red等)， hex_number(十六进制表示的颜色)， rgb_number(rgb代码所表示的背景颜色), transparent, inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。属性的默认值是 transparent.

◆ background-image（设置背景图片）

可用来为元素设置背景图片，可能的属性值有以下几种： url(“URL”)， none(默认值，不现实背景图片)， inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ background-repeat

可用来设置是否以及如何重复背景图片，默认情况是背景图片在水平以及垂直方向上平铺，可能的属性值有： repeat(默认值，水平和垂直方向平铺)， repeat-x(在水平方向上平铺)， repeat-y(在垂直方向是平铺)， no-repeat(背景图片仅仅显示一次)， inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

	body
  	{ 
 		background-image: url(/i/eg_bg_03.gif);
  		background-repeat: repeat-y;
    }

◆ background-position

可用来设置背景图像的起始位置，若背景图片设置了重复属性，则这也是图片的重复起始位置。可能的属性值有三种表示方法：方位关键字(top left, top center, top right,center left, center center, center right, bottom left, bottom center, bottomright)；百分比%x, %y其中第一个是水平位置，第二个是垂直位置；像素xpos ypos同样第一个是水平位置，第二个是垂直位置。如：

	<style type="text/css">
	body
	{ 
		background-image: url('/i/eg_bg_03.gif');
		background-repeat: no-repeat;
		background-attachment:fixed;
		background-position: 50px 100px; （注意这个地方不能加双引号）
	}
	</style>

【注意】要想这个属性在firefox和Opera上显示，必须先把background-attachment属性值设为fixed.

◆ background-attachment

可用来设置背景关联，当文档比较长时，当文档向下滚动时，背景图片也会随着滚动，当滚动到超过图像的位置时，图片就会消失。属性值可能是： scroll(默认值，图片会随着滚动而移动)； fixed(当页面滚动时，图像不会移动)； inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

（2）文本

◆ text-indent

可用来设置文本块中首行文本的缩进。属性值可能是： length(默认值为0,单位可以是像素或者cm,em(字体高，任何浏览器的字体高均是16px，1em=16px)); 百分比； inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

【注意】注意属性值可以设置为负数，首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题， 建议针对负缩进再设置一个外边距或一些内边距.

p{text-indent: -5em; padding-left: 5em;}

◆ text-align

可用来设置文本的对齐方式，属性值可能是： left, right, center, justify(两端对齐)和 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ word-spacing

可用来设置 单词之间的间隔，即增加或者减少单词间的间隔，属性值可能是： normal(默认值,0), length以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ letter-spacing

可用来设置 字符之间的间距，属性值可能是： normal(默认值，字符间没有额外的空间)， length以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ text-transform

可用来控制文本的大小写。属性可能的值有： none（默认值，大小写并存，不做大小写转换）， capitalize(每个单词都以大写字母开头)， uppercase（所有字母全部转换成大写）， lowercase（所有字母全部转换成小写）以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ text-decoration

可用来定义添加到文本中的装饰。属性值可能有： none(默认值，定义标准的文本)， underline(定义文本下的一条线)， overline（定义文本上的一条线）， line-through(定义穿过文本下的一条线)， blink(定义闪烁的文本)以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ white-space

可用来定义如何我处理元素内的空白。none（默认值，空白会被浏览器忽略），另外一个比较常用的属性值为nowrap(文本不会换行，会在同一行上继续显示，直到遇见<br>标签为止)

（3）字体

◆font-family

可用来设置元素的字体系列，若浏览器不支持第一个，则会尝试下一个，以此类推。它的默认值取决于浏览器。

◆ font-style

可用来设置字体的风格。属性可能的值有： normal（默认值，浏览器会显示一个标准的字体样式）， italic(斜体)， oblique（倾斜字体）以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

【注意】通常情况下，在浏览器中所显示的italic以及oblique属性的字体看上去没什么区别。

◆ font-weight

可用来设置字体的粗细。可取的属性值有： normal(默认值，标准的字体)， bold（粗体字体），数字（ 100,200,300,400,500,600,700,800,900,其中400等同于normal,700等同于bold）以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

◆ font-size

可用来设置字体大小。属性值可能是： xx-small， x-small， small， medium， large， x-large， xx-large， length值，百分比以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

（4）列表

◆list-style-type

用来设置列表标记的类型。属性值可能是disc(默认值，空心圆)，circle等。

◆ list-style-image

图像也可以作为列表项标记。这个属性是用来使用图像来替代列表项的标记。可能的属性值有：URL（图像的路径），none(默认值，无图像显示)以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

（5）表格

◆ border

可用来设置表格边框属性，设置规则是依次设置 border-width, border-style和 border-color属性.这些属性可能取值将在后面的框模型中会讲到。

◆ border-collpse

用来是否将表格中的边框合并为一个单一的边框，因为<table>,<th>,<tr>等标签都会有自己的边框，这样就会出现双线条边框的问题，这个属性正好可以将这些双线条边框合并成一个单一的边框。

◆ wigth和height

用来设置表格的宽度和高度。

◆ text-align和vertical-align

用来设置表格中文本的对齐方式，前者设置文本的水平对齐方式，后者是设置文本的垂直对齐方式。

◆ padding

用来设置表格的内边距属性，这个属性将在后面的框模型中讲到。

（6）轮廓

轮廓是用于绘制与元素周围的一条线，可以起到突出元素的作用。

◆ outline

用于在元素外网绘制一条线。它的设置原则是依次设置 outline-color, outline-style以及 outline-width.

（7）框模型

首先框模型中的最里面是元素的内容，另外元素本身有自己的宽度和高度，元素的外围是边框，而夹在元素和边框之间的是内边距，边框之外的是外边距。值得注意的是，内边距、边框以及外边距都是可选的，默认值为0。

CSS中的weight以及height属性是用来设置内容区域的宽度和高度，内边距，边框或者外边距的变化都不会改变内容区域的大小。背景应用区域指的是由内容、内边距以及边框组成。

内边距：

控制内边距的属性为padding属性，它定义了边框与内容实体之间的空白区域。如：

h1 {padding: 10px;} //表示h1元素的四周均是10像素的内边距

当然你也可以按照 上、右、下、左的顺序分别设置各边的内边距，其值可以设置为不同的单位或者百分比。如：

h1 {padding:10px 0.25em 2ex 20%;}

【说明】

◆ 默认情况下，元素的内边距的上与下、左与右都分别相等的，因此在这种情况下 只需设置padding属性的前两个值即可。

◆ 对于用百分比来设置内边距，百分数值是相对于其父元素的width数值来的，与height属性值无关，否则而导致父子元素脱离！如：

p {padding: 10%;}
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

◆ 另外通过padding-top,padding-right,padding-bottom和padding-left可以分别用来设置元素的上

右下左的内边距。

边框：

CSS中的边框是指围绕元素内容以及内边距的一条或者多条线。下面着重讲解边框的宽度、样式以及颜色等属性设置问题。

◆ 边框的样式：border-style属性

可以用来设置元素所有边框的样式，也可以为每边单独设置边框样式（顺序同样依次为上右下左）。若其值为none，则表明不显示边框。如：

border-style:dotted solid double dashed; //设置四周
border-style:dotted solid double; //设置上右下
border-style:dotted solid; //设置上右
border-style:dotted; //设置四周全为点状

border-style总共提供了10种左右的样式。

同样，CSS还可以为边框四边的样式分别设置相应的属性，分别是border-top-style，border-right-style，border-bottom-style，border-left-style。

◆ 边框的宽度：border-width属性

可以用来设置元素所有边框的样式，也可以为每边单独设置。其可取的值有： thin(细的)， medium(默认，中等)， thick（粗的边框）， length（可以自定义边框的宽度）以及 inherit(规定从父元素继承属性值，不过这个属性值在IE浏览器中的任何版本中均不支持！) 。

border-width:thin medium thick 10px;
border-width:thin medium thick;
border-width:thin medium;
border-width:thin;

同样可以通过 border-top-width, border-right-width,border-bottom-width以及

border-left-width分别边框四周的宽度。

◆ 边框的颜色： border-color属性

可用来设置元素的所有边框中可见部分的颜色或者四周分别设置成不同的颜色。同样设置的值既可以是颜色

名称、十六进制以及rgb代码的颜色。

同样可以通过 border-top-color，border-right-color，border-bottom-color和border-left-color设置边框四边的颜色。

外边距：margin属性

外边距指的是围绕元素边框的空白区域。属性值可以是任意的长度单位，像素、英寸、毫米或者em等，甚至其值还可以取为负值。属性值同样可以是百分比，与内边框类似，也是相当于父元素的width而言的。

同样通过 margin-top， margin-right， margin-bottom和 margin-left设置外边距的值。

（8）定位

CSS有三种基本的定位机制，普通流、浮动和绝对定位。除非特别指定，所有框都在普通流中定义，也就是说，普通流中的元素的位置由元素在文档在的位置决定。CSS中是通过 position属性进行定位，其可能的取值有：

absolute: 生成 绝对定位的元素，元素框在文档流中完全删除，并 相对于其包含块定位，其中包含块可能是文档中的另一个元素或者是初始包含块，元素原先在正常文档流中所占的空间会关闭，就像元素不存在一样，元素定位之后，或生成一个块级框。元素的位置可以通过left,top, right以及bottom属性进行规定。

fixed: 生成 绝对定位的元素，相对于浏览器窗口进行定位。元素的位置可以通过left,top, right以及bottom属性进行规定。

relative: 生成 相对定位的元素，相对于其正常位置进行定位。

static: 默认值，没有定位，元素出现在正常的流中（忽略top, bottom, left, right或者z-index）。

【说明】

◆ 设置为相对定位的元素框直接的元素仍将保持其未定位前的形状，它原来所占的空间仍将保留。因此，有时候通过移动元素可能会导致它会覆盖其它元素框。

◆ 因为设置为绝对定位的元素框与文档流无关，所有它们可以覆盖页面上的其他内容，可以通过 z-index属性来设置这些框的空间排列顺序。

其它用来定位的常见属性有：

top ----- 规定元素的顶部边缘，定义了一个定位元素的 上外边距边界与其包含块上边界之间的偏移。若position属性为static,则将被忽略；若为长度值，则为相应的绝对值，对于百分比，则为指定值，否则为auto. 类似的属性还有：right, bottom和left.

overflow ---- 规定当内容溢出元素框时如何处理。可取的值有：

visible :默认值，内容不会被修剪，将会呈现在元素框之外。

hidden : 内容会被修剪，但是溢出的内容不会显示。

scroll : 内容会被修剪，但是浏览器会显示滚动条以便查看其它内容。

auto : 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

clip --- 规定了当一副图像的尺寸大于包含它的元素框是会如何处理。可能的值有：

sharp : 设置元素的形状，唯一的合法形状值是： rect (top, right, bottom, left)

auto : 不应用任何剪裁。

    clip:rect(0px 50px 200px 0px)

vertical-align：设置元素的垂直对齐方式。它定义行内元素的基线相对于

【声明】转载时请注明出处和作者联系方式
文章出处：http://blog.csdn.net/chenlilong84/article/details/8235060
作者联系方式：[email protected]

作者：chenlilong84 发表于2012-12-18 18:03:24 原文链接

阅读：18 评论：0 查看评论

CSS基础学习

相关 [css 基础学习] 推荐：