CSS学习之CSS样式介绍和使用

CSS

Cascading style Sheets 级联样式表，层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用或XML（标准通用标记语言的一个子集）等文件样式的计算机语言；

CSS用于控制网页的样式和布局； CSS3 是最新的CSS 标准；

Html是内容，CSS是控制内容的显示风格，如大小，字体，颜色，等样式，JS动作，行为；

CSS 指层叠样式表(Cascading Style Sheets)

样式定义如何显示 HTML 元素,样式通常存储在样式表中

把样式添加到 HTML4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率,外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一

使用CSS的原因

HTML 标签原本被设计为用于定义文档内容。通过使用<h1>、<p>、这样的标签，HTML的初衷是表达“这是题”、“这是段落”之类的信息;文档布局由浏览器来完成，而不使用任何的格式化标签;

由于两种主要的浏览器不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难

CSS的作用

1页面结构和表现分离，使页面结构清晰；

2设计师设计时更有效率；

3整个站点保持视觉的一致性；

4所有的主流浏览器均支持层叠样式表

5样式表定义如何显示HTML 元素

6更好易用性和扩展性，可以单独一个文件出现

CSS语法

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

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

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

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

如果要定义不止一个声明，则需要用分号将每个声明分开

选择器分组

分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开

h1,h2,h3,h4,h5,h6 { color: green; }

继承及问题

根据 CSS，子元素从父元素继承属性。但是它并不总是按此方式工作body { font-family: Verdana, sans-serif; }

通过 CSS继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如p, td, ul, ol, 和 dd）。不需要另外的规则，所有 body 的子元素都应该显示Verdana 字体，子元素的子元素也一样。并且在大部分的现代浏览器中，也确实是这样的

引入CSS的4种方式

行内样式<pstyle=“样式”>段落文本</p>

内嵌样式<styletype=“text/css”>样式代码</stype>

外部导入<styletype=“text/css”>@import “样式文件”</stype>

外部链接<linkhref=“样式文件url”rel=“stylesheet”type=“text/css”/>

1，行内样式：<p style="color:red">行内样式</p>；

内容与显示耦合；

每个单独设置，不利于复用；

2  内嵌样式

在html页面中包含的样式。可以简单实现复用；只能控制某个页面的布局；

<style type="text/css">

h1{color:red; font-size:36px;}

</style>

3，外部导入

控制整个站点所有页面的布局

<link href="wwcss.css"rel="stylesheet" type="text/css" />

<style type="text/css">@import'testcss.css'</style>

CSS选择器

1，元素选择器

,最常见的 CSS选择器是元素选择器

<span id=“title”class=“my”></span>

Html元素选择器span{color:red};

2，id选择器

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

id 选择器以"#" 来定义

<span id=“title”class=“my”></span>

Id选择器#title{color:red;}

3，类选择器

在 CSS中，类选择器以一个点号显示；类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用；<span id=“title”class=“my”></span>

类别选择器.class{color:red;}

4，属性选择器

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

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于class 和 id属性

[title] { color:red; }

5派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁

Id和class 也可被用作派生选择器：

.fancy td { color: #f60; background: #666; }

A链接样式

链接样式：有四种链接样式

没有访问过的：a:link

访问过的：a:visited

鼠标放上去：a:hover

鼠标按下去：a:active

Div+css布局

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁

margin: auto; 让div层居中。

当不设置宽度时，默认占100%。一般主流网站width=900px;

body的margin: 0px; 去掉边距

float:left,right 三列显示div时div所在位置

三列div顺序:左，右，中