CSS

CSS3主要内容

CSS指层叠样式表（cascading style sheets），样式定义如何显示HTML元素。

CSS简介

CSS样式表极大地提高了工作效率。它定义如何显示HTML元素，样式通常保存在外部的.css文件中。通过仅仅编辑一个简单的CSS文档，外部样式表就可以同时改变站点中所有页面中的布局和外观。样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在外部的CSS样式中。其优先权从高到低为：

  1. 内联样式（在HTML元素内部）
  2. 内部样式表（位于标签内部）
  3. 外部样式表（.css文件）
  4. 浏览器缺省设置

CSS语法

CSS规则有两个主要部分构成：选择器和声明。每条声明由一个属性和一个值组成。与XHTML不同，css对大小写不敏感。存在其一例外：如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的。例如
h1 {color:red; font-size:14px; }

CSS选择器

元素选择器

1
2
3
h1 {color:blue;font-family:sans-serif;}

<h1>这个元素的内容会引用上面的样式</h1>

选择器分组

1
2
3
h1,h2,h3,h4{color:bule;}

<h3>以上所有元素内容都会应用样式</h3>

属性选择器

1
2
3
4
a[href][title="123"]{color:#FF0000;}

<a title="123" href="http://w3school.com.cn"> 可以应用样式 </a>
<a href="http://w3school.com.cn">不可以应用样式</a>

类选择器

1
2
3
.important {color:#FF0000;}

<p class="important">还可以在.前面加元素，则既是相应元素又是相应类则满足</p>

id选择器

1
2
3
#intro{font-weight:bold;}

<p id="intro">应用样式</p>

其他

1
2
3
4
5
h1 em{color:red;}
<h1>只要有<em>这个后代元素</em>，后代元素就应用样式</h1>

h1>strong{color:red;}
<h1><em><strong>必须</strong>是子元素</em>，而不能是后代元素。不应用样式</h1>

CSS文本及字体

文本

  • text-align：center 文本行相互之间的对齐方式
  • text-indent：5em 文本缩进
  • word-spacing：-0.5em 单词间隔
  • letter-spacing：5px 字母间隔
  • text-transform：uppercase 处理文本的大小写

字体

  • font-family：Times 字体样式
  • font-size：14px 字体大小
  • font-style：italic 规定斜体

CSS盒模型

盒模型

CSS框模型从外向里分别是：外边、margin、border、padding、内边、content。

  • 内边距可分为top、right、bottom、left四个，border和margin也可以这么分。
  • 边框有三个重要部分：style、width和color。但是在CSS3中添加了很多新属性。
  • 外边距透明，即本元素的背景不能作用域外边距，另外margin-left和margin-right都设为auto可以实现水平居中。

背景

  • backgroud-color: transparent|| 格式：rgb rgba hls hlsa #ffffff red
  • backgroud-image：none||
  • backgroud-repeat：repeat||repeat-x||repeat-y||no-repeat
  • backgroud-position：改变图像在背景中的位置。

  • background-attachment：scroll||fixed

  • background-origin: padding||border||content，背景图片定位的起点

  • background-clip: border-box||padding-box||content-box，背景图像的裁剪区域
  • background-size：auto||||cover||contain，指定背景图片的尺寸
  • background-break，指定内联元素的背景图片进行平铺时的循环方式

边框

  • border-width：{1,4} | inherit
  • border-color: |transparent|inherit。在css3中，可以设置多种颜色，一种颜色对应一个像素。
  • border-style: | inherit。如none、hidden、dotted、solid等
  • border-image: 可以使用图片，比较复杂，参考标准。
  • border-radius: none|{1,4}[/{1,4}]?

盒子阴影

布局

定位

CSS定位属性允许对元素进行定位。元素定位有相对定位、绝对定位和浮动等三种。一下分别为相对定位、绝对定位和浮动定位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# box_relative{
	position:relative;
	left:30px;
	top:20px;
}

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

# box{
	float:right;
}

CSS Override

两个类

1
2
3
4
5
6
7
8
9
<style>
  .pink-text {
    color: pink;
  }
  .blue-text{
    color:blue;
  }
</style>
<h1 class="blue-text pink-text">Hello World!</h1>

与h1中的class的顺序无关，而与样式表中两个类的顺序有关，后者会重写前者的color属性。故上面字体的颜色是blue

ID与class

ID的优先级要高于class

inline style与id

inline style优先级高于id

绝对最高级!important

如果要保证某个属性为绝对最高级，则在属性值后加!important。如：color:blue !important;