CSS入门学习

CSS 基础

CSS 语法

CSS定义方式

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

selector {declaration1; declaration2; ... declarationN }

CSS 值的写法

例

p { color: #ff0000; }

p { color: #f00; }

p { color: rgb(255,0,0); }

p { color: rgb(100%,0%,0%); }

p {font-family: "sans serif";}

多重声明

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, Serif;
  }

注意

是否包含空格不会影响 CSS 在浏览器的工作效果，

同样，与 XHTML 不同，CSS 对大小写不敏感。

不过存在一个例外：如果涉及到与 HTML 文档一起工作的话，class 和 id 名称对大小写是敏感的

CSS 高级语法

根据 CSS，子元素从父元素继承属性.
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。
对于部分旧式浏览器,它不仅忽略继承，而且也忽略应用于 body 元素的规则。

解决

body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

如果不想使某些子类继承父类的属性，可以针对该子类单独设置其属性

body  {
     font-family: Verdana, sans-serif;
     }

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

CSS派生选择器

派生选择器可以使得根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，可以使 HTML 代码变得更加整洁。

如将列表中的 strong 元素变为斜体字，可以定义一个派生选择器

1
2
3

li strong {
  font-style: italic;
}

更多例子

h2 strong {
     color: blue;
     }
strong {
  color: red;
}

CSS id 选择器

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

使用 “#”定义

注意 id 属性只能在每个 HTML 文档中出现一次。

一个选择器，多种用法

> 即使被标注为 sidebar 的元素只能在文档中出现一次，这个 id 选择器作为派生选择器也可以被使用很多次：

1
2
3
4
5
6
7
8
#sidebar p{
font-style: italic;
text-align: center;
}
#sidebar h{
font-size: lem;
margin: 0;
}
单独的选择器

>id 选择器即使不被用来创建派生选择器，它也可以独立发挥作用

#sidebar {
  border: 1px dotted #000;
  padding: 10px;
  }

### CSS 类选择器
示例：

1
2
3

.center {
  text-align: center;
}

> HTML 中类可以使用多次

h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

注意：:类名的第一个字符不能使用数字！

### CSS 属性选择器
先来看几个例子

1. 将所有含有title属性的元素设置颜色

<style type="text/css">  
[title]
{
  color: blue;
}
</style>

2. 将含有 title 为 keithxodoy 的元素设置颜色

<style type="text/css" >
[title=keithxodoy]
{
  color: blue;
} 
</style>

3. 将含有 title 内容包含 hello 的元素设置颜色

适用于由空格分隔的属性值
title="hello keithxodoy"

1
2
3
4
5
6
<style type="text/css">
[title~=hello]
{
color: blue;
}
</style>
适用于由连字符分隔的属性值
title="hello-keithxodoy

<style type="text/css" >
[title|=hello] 
{
  color: blue;
}
</style>

其余用法

| 选择器 | 功能 |
|——–|—–|
| [attribute^=value] | 匹配属性值以指定值开头的每个元素|
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素|
| [attribute=value] | 匹配属性值中包含指定值的每个元素|

## CSS 创建样式表
### 外部样式表

> 背景：当页面所需的css样式过多，而且大多是重复相同的样式时，不易在HTML文件中单独呈现，于是使用 link标签，将外部的一个 css 文件引入至 HTML 中

1
2
3
<head>
<link rel="stylesheet" type="text/css" href="style_set.css" />
</head>

注意:最好不要再属性值和单位之间留有空格，否则会在一些浏览器中无法正常工作

### 内部样式表
> 背景：当某个文档需要特殊样式时，适合使用内部样式表

1
2
3
4
5
6
7
<head>
<style type="text/css">
p {
margin-left: 20px;
}
</style>
</head>

### 内联样式
<p style="color: sienna; margin-left: 20px">

### 背景
### 背景色

使用 background-color 设置背景色

> background-color 不能继承，默认值 transparent 透明

### 背景图像

使用background-image设置背景图像

实例：
body {background-image: url(/1.png);}

> background-image 不能继承,但是可以为段落、行内元素设置背景

### 背景重复

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

属性值repeat

1. repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复
2. no-repeat 则不允许图像在任何方向上平铺。

示例：
1
2
3
4
5
body
{
background-image: url('i.png');
background-repeat: repeat-x;
}

### 背景定位

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

示例：
1
2
3
4
5
6
p
{
background-image: url('i.png');
background-repeat: repeat-x;
background-position: center;
}

|位置关键字|
|——–|
|center |
|top|
|bottom|
|right |
|left|

>同时 background-postion 也可以使用长度值，百分数值设置

1
2
3
4
5
body
{
background-position: 50% 50%;
background-position: 50px 50px;
}

### 背景关联

>如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过 background-attachment 属性防止这种滚动,使图像相对可视区为固定的

实例：
1
2
3
4
5
body
{
background-image: url('i.png');
background-attachment: fixed;
}

注意:background-attachment 属性的默认值是 scroll，即在默认的情况下，背景会随文档滚动

### 总结
>可以将所有的 CSS背景属性写在一个申明中

1
2
3
4
5
6
<style type="text/css">
body
{
background: #ff0000 url(/i.png) repeat-x center fixed ;
}
</style>

—
## CSS 文本
### 缩进文本 text-indent
> 通过使用 text-indent 属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

示例：将所有段落的首行缩进 5em:
1
2
3
4
5
p {text-indent: 5em;}

p {text-indent: -5em;}

p {text-indent: 20%;}

注意：

1. 一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。
2. 如果一个块级元素(比如段落)的首行中有一个图像，它会随该行的其余文本移动。
3. 对于行内元素的第一行“缩进”，可以使用设置左内边距或外边距创造。
4. text-indent 属性可以继承

### 水平对齐 text-align
> text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。

示例：中间对齐
1
p {text-align: center;}

注意：text-align:center 与 <CENTER>区别是<CENTER> 不仅影响文本，还会把整个元素居中;而text-align 不会控制元素的对齐，而只影响内部内容。

### 字间隔 word-spacing & 字母间隔 letter-spacing
#### 字间隔 word-spacing

> word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。word-spacing属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近

示例：设置文本之间距离为负值
1
2
p.spacing {
word-spacing: -0.5em;}

#### 字母间隔 letter-spacing

>letter-spacing 属性与 word-spacing的区别在于，字母间隔修改的是字符或字母之间的间隔。

示例：设置字母间的间隔
1
2
3
4
5
6
h1 {
letter-spacing: -0.5em;
}
h2 {
letter-spacing: 20px;
}

### 字符转换
| 属性值| 作用|
|——-|—-|
| none | 不对文本做任何改动|
| uppercase | 文本转换为全大写|
| lowercase | 文本转换为全小写|
| capitalize| 每个单词的首字母大写|

### 文本装饰
| 属性值 | 作用 |
|——-|——|
| none | 不做处理，也可以使超链接的下划线去除 |
| underline | 加下划线|
| overline | 在文本顶端画一个上划线
| line-through | 在文本中间画一个贯穿线|
| blink | 使得文本闪烁|

注意:可以在一个规则中结合多种装饰,但如果两个不同的装饰都与同一元素匹配，胜出规则的值会完全取代另一个值

### 处理空白符 white-space
> white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理,即各个字之间只会显示一个空格，同时忽略元素中的换行 normal属性

示例：显式设置默认行为，即去除多余空格与换行

1
2
3

p {
  white-space: normal;
}

pre属性

示例：浏览器保留额外的空格回车
1
2
3
p {
white-space: pre;
}

注意：:IE 7 以及更早版本的浏览器不支持该值 nowrap属性

示例：nowrap会防止元素中的文本换行，除非使用了一个 br 元素

1
2
3

p {
  white-space: nowrap;
}

## CSS 样式
### CSS 字体
#### 5 种通用字体系列：

Serif 字体 Sans-serif 字体
Monospace 字体 Cursive 字体
Fantasy 字体

font-family 属性：定义文本的字体系列
1
body {font-family: sans-serif;}

> 注意：只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号

#### 字体风格
font-style 属性最常用于规定斜体文本。

该属性有三个值： normal - 文本正常显示
italic - 文本斜体显示 oblique - 文本倾斜显示

> 注意：斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本

#### 字体加粗
font-weight 属性设置文本的粗细。使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。
如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。

> 数字 400 等价于 normal，而 700 等价于 bold

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

font-size 值可以是绝对或相对值。

绝对值：

将文本设置为指定的大小 不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用

相对大小： 相对于周围的元素来设置大小
允许用户在浏览器改变文本大小

注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)

1
2
body {font-size:100%;}
h1 {font-size:3.75em;}

—
### CSS 的链接
#### 链接样式 a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方
* a:active - 链接被点击的时刻，即正在被点击的链接

实例：

<head>
  <style>
    a:link {color:#FF0000;}    /* 未被访问的链接 */
    a:visited {color:#00FF00;} /* 已被访问的链接 */
    a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
    a:active {color:#0000FF;}  /* 正在被点击的链接 */
  </style>
</head>

注意

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

常见链接样式

text-decoration ：多用于除去链接的下划线

实例：

1	a:link {text-decoration: none;}

background-color : 设定链接的背景色

实例：

1	a:hover {background-color: #FFFF85;}

font-size : 改变链接的字体大小

实例：设置鼠标悬停在链接上的字体大小变化

1	a:hover {font-size: 150%;}

font-family : 改变链接字体

实例：修改链接字体为微软雅黑

1	a:link {font-family: '微软雅黑';}

font-weight : 设置字体的厚度

实例：

1	a:active {font-weight: bold;}

高级示例

本例来设置创建链接框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <style>
    a:link , a:visited {
      color: white;
      background-color: black;
      display: block;
      text-align: center;
      text-decoration: none;
      font-weight: bold ;
      width: 120px;
      padding: 10px;
    }
    a:hover , a:active {
      color: orange;
      background-color: red;
    }
  </style>
</head>
<body>
  <a href="http://www.baidu.com">百度一下</a>
</body>
</html>

CSS列表

无序列表的样式

在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点

修改：间无序列表的圆点改为方形

1
2
3

ul {
  list-style-type: square
}

更多样式
list-style-type: disc	空心圆
list-style-type: circle	实心圆
list-style-type: square	方形
list-style-type: none	无

任意列表的样式

将列表的标志改为图像

1
2
3

ul li {
  list-style-image: url(test.gif)
}

使用url来引入图像为标志

列表标志的位置

从CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。

使用 list-style-position 完成

总结–简写列表样式

为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style

1
2
3

li {
  list-style: url(test.gif)  square inside
}

设置CSS表格

一、 CSS表格边框

1
2
3

table {
  border:  1px solid;
}

同时也可以设置边框颜色 border: 1px solid green

二、 CSS单一边框(实线)

table
  {
  border-collapse:collapse;
  }

三、 CSS设置表格文本对齐方式

td
  {
  height:30px;
  vertical-align:bottom;
  }

四、 CSS设置表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

td
  {
  padding:15px;
  }

五、 CSS表格空单元设置

table
{
border-collapse: separate;
empty-cells: hide;
}

值	描述
hide	不在空单元格周围绘制边框。
show	在空单元格周围绘制边框。默认。

六、 CSS设置表格的页边距

table
  {
  border-collapse:separate;
  border-spacing:10px 50px;
  }

border-spacing length

如果定义一个 length 参数，那么定义的是水平和垂直间距。
如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

七、 CSS表格标题位置

<style type="text/css">
caption
{
caption-side:bottom;
}
</style>
<caption>This is a caption</caption>

CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用

使用outline属性

一、在元素周围画线

1
2
3

p{
  outline:  #0F0 dotted thick;
}

dotted:为点状线

###二、设置Outline属性

p{
  outline-style: dotted;
  outline-color: #0F0;
  outline-width: 3px;
}

常见outline-style:

dotted
dashed
solid
double
groove
ridge
inset
outset

注意:只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本）才支持 outline-style 属性。

CSS框模型

概述

如图所示

示例：假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。
外边距可以是负值，而且在很多情况下都要使用负值的外边距。

CSS内边距

元素的内边距在边框和内容区之间，控制该区的属性为 padding

padding 属性接受长度值或百分比值，但不允许使用负值

一、单边内边距属性

padding-top
padding-right
padding-bottom
padding-left

二、内边距的百分比数值

示例：p {padding: 10%;}

注意:上下内边距和左右内边距一致，即上下内边距的百分数会相对于父元素宽度设置，而不是相对高度。

三、示例

(1) 设置上下内边距为0.5cm,左右内边距为2.5cm

1
2
3

p {
  padding: 0.5cm 2.5cm;
}

注意： padding 左边设置上下的内边距，右边设置左右的内边距

CSS边框

元素的边框(border)是围绕元素内容和内边距的一条或多条线

边框有三个属性： 宽度、样式、颜色

一、宽度

语法：border-width：；

设置宽度：

thin ： 1px
medium(默认值) : 2px
thick : 3px

定义单边宽度

按照 top-right-bottom-left 顺时针顺序来设置各边宽度： border-width: 1px 1px 1px 1px
border-top-width
border-right-widthnone
border-bottom-width
border-left-width

二、样式

语法：border-style: ;

单边样式：

按照 top-right-bottom-left 顺时针顺序来设置各边样式
border-top-style
border-right-style
border-bottom-style
border-left-style

没有边框

border-style: none;

三、边框颜色

使用border-color属性，一次最多可以接受4个颜色值

单边颜色：

按照 top-right-bottom-left 顺时针顺序来设置各边样式
border-top-color
border-right-color
border-bottom-color
border-left-color

示例

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  border-color: transparent;
  }

四、所有边框设置在一个样式中

1
2
3

p {
  border:  medium double rgb(250, 0, 255) ;
}

CSS外边距

设置外边距的最简单的方法就是使用 margin 属性。

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em,margin 可以设置为 auto,也可以设置为百分比

示例：

p {
  margin: top right bottom left;
  margin: 10px 0px 15px 5px;
  margin: 10%;
}

CSS定位

CSS position 属性

通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。

position 属性值的含义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative

元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute

元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed

元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

使用滚动条来显示元素内溢出的内容

当元素内容太大而超出规定区域时，如何设置溢出属性来规定相应的动作。

<style>
  overflow: scroll;
  overflow: hidden;
</style>

overflow: hidden :隐藏溢出元素中溢出的内容
overflow: auto:设置浏览器来自动地处理溢出

元素显示的优先级

Z-index可被用于将在一个元素放置于另一元素之后。 Z-index: 设置元素的堆叠顺序。

<script>
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
z-index:1
}
</script>

CSS 相对定位

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
</style>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
</body>

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

CSS 绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

可知，绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。