CSS基础

CSS注释

/*这是个注释*/

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:

p {color:red;text-align:center;}

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

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

Id和Class选择器

Id选择器

以下的样式规则应用于元素属性id = "keaiu"

#keaiu
{ text-align:center;
color:red; }

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

HTML元素以id属性来设置id选择器,CSS中id选择器以#来定义。

不能使用数字

Class选择器

在以下的例子中，所有拥有center类的HTML元素均为居中。

.center {text-align:center;}

class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。

class选择器在HTML中以class属性表示, 在CSS中，类选择器以一个点"."号显示。

也可以指定特定的HTML元素使用class。

在以下实例中, 所有的p元素使用class="center" 让该元素的文本居中。

p.center {text-align:center;}

不能使用数字

标签选择器

<style>
h3{color:red;}
</style>
<h3>可爱柚keaiu.com</h3>

以HTML标签作为CSS修饰所用的选择器

内联选择器

<h3 style="color:red;">可爱柚keaiu.com</h3>

直接在标签内部写CSS代码

这四种CSS选择器有修饰上的优先级，即：

内联选择器 > id选择器 > 类选择器 > 标签选择器

CSS背景

背景颜色

body {background-color:#b0c4de;}

CSS 中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"

RGB - 如："rgb(255,0,0)"

颜色名称 - 如："red"

background-color不能继承，其默认值是transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。

背景图像

body {background-image:url('keaiu.gif');}

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。

背景图像-水平或垂直平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

默认情况下background-image属性会在页面的水平或者垂直方向平铺。

body
{background-image:url('keaiu.png'); }

如果图像只在水平方向平铺 (repeat-x)

body
{background-image:url('keaiu.png');
background-repeat:repeat-x;}

背景图像-设置定位与不平铺

如果不想让图像平铺，可以使用background-repeat属性。

body
{background-image:url('keaiu.png');
background-repeat:no-repeat;}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用background-position属性改变图像在背景中的位置。

body
{background-image:url('keaiu.png');
background-repeat:no-repeat;
background-position:right top;}

为background-position属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center；其次，可以使用长度值，如100px或5cm；最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

关键词

图像放置关键字最容易理解的作用就像其名字的意义。例如，top left 使图像放置在元素内边距区的左上角。

只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么你可以设置位置关键字以任何顺序出现。

如果只有一个关键字，则会默认另一个关键字为center。

所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：

p        
{background-image:url('keaiu.png');        
background-repeat:no-repeat;            
background-position:top;}

百分数值

百分数值的表现方式更为复杂。假设希望用百分数值将图像在其元素中居中，可以按照下面的代码进行设置：

body
{background-image:url('keaiu.png');  
background-repeat:no-repeat;    
background-position:50% 50%;}

这会导致图像适当放置，其中心与其元素的中心对齐。

因此，如果想把一个图像放在水平方向2/3、垂直方向1/3 处，可以这样声明：

body      
{background-image:url('keaiu.png');   
background-repeat:no-repeat;   
background-position:66% 33%;}

长度值

长度值解释的是元素内边距区左上角的偏移，偏移点是图像的左上角。

比如，如果设置值为50px 100px，图像的左上角将在元素内边距区左上角向右50像素、向下100像素的位置上：

body
{background-image:url('keaiu.png');
background-repeat:no-repeat;
background-position:50px 100px;}

注意，这一点与百分数值不同，因为偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与background-position声明中的指定的点对齐。

背景-简写属性

在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.

背景颜色的简写属性为 "background":

body {background:#ffffff url('keaiu.png') no-repeat right top;}

当使用简写属性时，属性值的顺序为：:

background-color

background-image

background-repeat

background-attachment

background-position

CSS Text（文本）

Text Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

十六进制值 - 如"＃FF0000"

一个RGB值 - "RGB（255,0,0）"

颜色的名称 - 如"红"

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为justify，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

文本修饰

text-decoration属性用来设置或删除文本的装饰。

从设计的角度看text-decoration 属性主要是用来删除链接的下划线：

a {text-decoration:none;}

也可以这样装饰文字：

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

文本转换

文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

FOR EXAMPLE

for example

For Example

文本缩进

文本缩进属性是用来指定文本的第一行的缩进。

CSS提供了text-indent属性，该属性可以方便地实现文本缩进。

通过使用text-indent属性，所有元素的第一行都可以缩进一个给定的长度。

p {text-indent:50px;}

文本间隔

word-spacing属性可以改变字（单词）之间的标准间隔。其默认值normal与设置值为0是一样的。

p
{
word-spacing:30px;
}

CSS Fonts（字体）

CSS字体

font-family属性设置文本的字体系列

p{font-family:"Times New Roman", Times, serif;}

字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值：

正常 - 正常显示文本

斜体 - 以斜体字显示的文字

倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

italic和oblique的区别

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。

倾斜（oblique）文本是正常竖直文本的一个倾斜版本。

通常情况下，italic和oblique文本在web浏览器中看上去完全一样。

字体大小

font-size属性设置文本的大小。

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

上面的例子可以在Internet Explorer 9, Firefox, Chrome, Opera, 和Safari调整文本大小。

注意：以上实例不能在IE9以前的版本运行。

虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本

用em来设置字体的大小

为了避免Internet Explorer中无法调整文本的问题，许多开发者使用em单位代替像素。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em

（注：16等于父元素的默认字体大小，假设父元素的font-size为30px，那么公式需改为：pixels/30=em）

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用em单位，则可以在所有浏览器中调整文本大小。

不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。

使用百分比和em组合

在所有浏览器的解决方案中，设置<body>元素的默认字体大小的是百分比。

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。

CSS链接样式

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。

特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

a:link {color:#FF0000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

当设置为若干链路状态的样式，也有一些顺序规则：

a:hover必须跟在a:link和a:visited后面

a:active必须跟在a:hover后面

文本修饰

text-decoration属性主要用于删除链接中的下划线

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

鼠标形状

常用鼠标形状如下所示：