CSS基础学习

来源：互联网发布：企业电话查询软件编辑：程序博客网时间：2024/06/05 16:22

CSS简介

CSS stands for Cascading Style Sheets

CSS意思就是层叠样式表。

Styles define how to display HTML elements

样式定义了HTML元素怎样去显示。

Styles are normally stored in Style Sheets

样式一般存储在样式表中。

Styles were added to HTML 4.0 to solve a problem

样式添加到HTML4.0中用来解决问题。

External Style Sheets can save you a lot of work

利用外部样式表可以提高你的工作效率。

External Style Sheets are stored in CSS files

外部样式表存储在CSS文件中。

With CSS, your HTML documents can be displayed using different output styles

使用CSS，你的HTML文档可以用不同的样式输出来显示。

HTML标签起初被设计成为定义文档的内容。通过使用像<h1>，<p>，<table>这样的标签，他们应该表达的是“这是一个标题”,“这是一个段落”,“这是一张表格“，而布局该由浏览器来处理并非使用格式化标签。
为了解决这个难题，W3C （ World Wide Web Consortium ）这个非赢利的，建立标准的组织，为HTML4.0增加了样式。
所有主流浏览器都支持样式表。样式表定义元素怎样去显示。外部样式表能够让你改变所有出现在你WEB中页面的外观和布局，而仅仅通过编辑一个单独的CSS文档。(原理就是一动多变)
CSS是一个在设计领域中的突破，因为它允许开发者一下就能控制多个WEB页的样式和布局。作为一名WEB开发者你可以为每个HTML元素和应用他的每个页面定义一个你想要的样式来实现全面的改变，简单的改变样式，所有与之相关的元素都会自动更新。
样式表允许样式信息用多种方式来定义。样式可以在一单独的HTML元素中指定，在<head>元素中或在一外部CSS文件中，甚至多个外部样式表能集中在一个单一的HTML文档中。
问题：当多于一种的样式指定一HTML元素时使用怎样的样式呢？
答：
一般说来所有样式有下面的规则(第四个最有优先性)：

Browser default
浏览器默认
External style sheet
外部样式表
Internal style sheet (inside the <head> tag)
内嵌样式表(在<head>标签内)
Inline style (inside an HTML element)
行内样式(在一HTML元素内)

所以写在HTML元素中的样式有最高的优先权(写在HTML元素内的)，它会替代其他形式的样式。

CSS语法

The CSS syntax is made up of three parts: a selector, a property and a value.

CSS的语法由三部分组成：一个选择器，一个属性和一个值，例如：

selector {property: value}

选择器是你希望去定义的HTML元素/标签，每个属性可以有一个值，属性和值由冒号区分开外面用大括号括起来。

body {color: black}

如果值为多个单词则用双引号括起来。

p {font-family: "sans serif"}

注意：如果你想指定多个属性，你就必须将每个属性用分号隔开，下面的例子就演示了怎样定义居中红色文字段落。

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

为了让样式定义更有可读性，你可以像这样分行描述属性。

p {    text-align: center;    color: black;    font-family: arial}

你可以将选择器组合，用逗号分隔每个选择器。下面的例子将所有的标题元素组合起来，它们的颜色都变为绿色。

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

The class Selector(选择器类)

用选择器类你可以将同一类型的HTML元素定义出不同的样式。比如你想在你的文档中有两种不同样式的段落：一种是右对齐，另外是居中的。这就告诉你该怎么用样式来做到这点。

p.right {text-align: right}p.center {text-align: center}

你必须在你的HTML文档中使用类属性（才能显示出效果）。

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

注意：每个HTML元素只能有一个类属性，下面的例子是不符合规范的：

<p class="right" class="center"> This is a paragraph. </p>

你也可以省略标签名称直接去定义，这样就可以在所有的HTML元素中使用了。下面的例子就能让所有HTML中所有带class=”center”的元素文字居中：

.center {text-align: center}

下面的代码中H1和P元素都有class=”center”。这就意味着这两个元素都将遵循选择器”center”的规则。

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

注意：请不要用以数字开头为名称的类，在Mozilla/Firefox中不能正常运作。

The id Selector(id选择器)

使用id选择器你可以为不同的HTML元素定义相同的样式。下面的样式规则对任何一个带有id属性值为”green”的元素都是匹配的。

#green {color: green}

上面的规则将匹配h1和p元素。

<h1 id="green">Some text</h1><p id="green">Some text</p>

但是，id最好还是唯一的，就如同人的身份证号一样，每一个人都有一个唯一的身份证号，对应的每一个html元素都有一个唯一的id。

下面的样式规则将匹配任何一个带有id属性值为”green”的p元素。

p#green {color: green}

上面的规则与h1元素不匹配（也就是说不会产生样式效果）。

<h1 id="green">Some text</h1>

和class一样，id的名称的开头也不要使用数字，不然就无法在Mozilla/Firefox中正常运作了。

CSS注释

你可以在CSS中加入解释代码用的注释，这样可以方便你以后重新编辑代码。浏览器会忽略注释，注释一般以”/*“开头”*/“做结尾，像这样：

/* This is a comment */p {    text-align: center;    /* This is another comment */    color: black;    font-family: arial}

怎样使用CSS

怎样插入样式表？
当浏览器阅读样式表，它会依据它（样式表）来格式化文档。有三种方法可以插入样式表：

外部样式表（ External Style Sheet）
内嵌样式表（ Internal Style Sheet）
行内样式（ Inline Styles）

外部样式表

使用外部样式表是使样式应用于多张网页的理想方法。通过这个方法你只需改动一个文件就能改变整个网站的外观。使用<link>标签让每个页面都连接到样式表。<link>标签在head区域使用。

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

浏览器将从test.css文件中读取样式定义信息，并依据它来格式化文档。
外部样式表可以用任何一个文字编辑器来书写。文件不应该包含任何的html标签，并保存为一个后缀为.css的文件。下面是一个样式表文件的内容：

hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}

注意：请不要在属性值和其单位间加上空格！如果你用”margin-left: 20 px“来代替”margin-left: 20px“的话，这也许在IE6中能正常工作，但在Mozilla/Firefox或Netscape中就无法正常显示了。

内嵌样式表

一份内嵌样式表应该在当有单独文档有特殊样式的时候使用。使用<style>标签在head区域内定义样式，像这样：

<head>    <style type="text/css">        hr {color: red}        .center {text-align: center;color: red}        p {margin-left: 20px}        body {background-image: url("images/back40.gif")}    </style></head>

浏览器将立即读取样式定义，并依据它来格式化文档。
注意：浏览器一般会忽略未知的标签。这就意味着老的浏览器不能支持样式，会忽略<style>标签，但<style>里的内容会显示在页面上。在HTML注释元素中隐藏它可以来避免这类情况在老的浏览器中发生。

<head>    <style type="text/css">        <!--        hr {color: red}        .center {text-align: center;color: red}        p {margin-left: 20px}        body {background-image: url("images/back40.gif")} -->    </style></head>

行内样式

使用行内样式就失去了样式表的优势而将内容和形式相混淆了。一般这类方法在个别元素需要改变样式的时候使用。
在相关的标签上用style属性来加入行内样式。样式属性可以包含任何CSS属性。例子中将展示怎样给一个段落加上左间距并将颜色改为red。

<p style="color: red; margin-left: 20px"> This is a paragraph </p>

多重样式表

如果一些属性被相同的选择器设置成不同的样式，值就会向更为具体的样式所继承（具体化）。举个例子，一个外部样式表有这样的h3选择器属性：

h3 { color: red; text-align: left; font-size: 8pt }

同时有一个内嵌样式表有这样的h3选择器属性。

h3 { text-align: right; font-size: 20pt }

如果页面在有内嵌样式表的同时又连接到外部样式表的话h3的属性将变为：

color: red; text-align: right; font-size: 20pt

颜色是继承了外部样式表而文字对齐和文字大小被内嵌的样式表所替换。

关于超链接的几个样式

有html代码如下：

<p><a href="http://www.163.com">This is a link</a></p>

a:link {color: green}——表示一开始链接所呈现的文字是绿色的。
a:hover {color: black}——表示光标悬停在链接上，链接变为黑色。
a:active {color: blue}——表示点击链接，鼠标还没松开，链接变为蓝色。
a:visited {color: yellow}——表示链接已经被点击后，链接变为黄色。

0 0