CSS 基础

来源：互联网发布：淘宝卖家空间不足编辑：程序博客网时间：2024/06/06 02:24

CSS基础

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

1.用于布局美化网页的；

2.是Cascading Style Sheets的英文缩写，即层叠样式表；

3.CSS语言是一种标记语言，因此不需要编译，可以直接由浏览器执行编译，属于浏览器解释型语言；

4.CSS文件是一个文本文件，它包含了一些CSS标记。CSS文件必须使用.CSS后缀；

5.CSS大小写不敏感，CSS与css是一样的；

6.CSS是由W3C的工作组产生和维护的。

***可以通过简单的更改CSS文件，改变网页的整体表现形式，可以减少我们的工作量，所以它是每一个网页设计者所必须掌握的技术。

CSS规则组成

1.CSS语法

CSS定义分别由：选择符、属性和属性取值组成。

格式： selector {property : value}

说明：

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

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

属性（property）是我们希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。如下图所示：

图1-1 css语法示意图

选择符可以是HTML中的标记名称；

属性和值之间用冒号分开，多个属性之间加分号；

CSS是大小写不敏感的，在CSS语法中推荐使用小写；

如：body {color : red} 设置了页面为红色文字

2.长度单位

在CSS样式表中可以使用如下的长度单位：

pix 像素 div{font-size:12pix}

%百分比 div {font-size:80%}

注：这里的80%指的是浏览器的长度，页面任意比例显示都是80%

3.颜色单位

CSS中的颜色值

#rrggbb(如：#ffcc00) 256*256*256

#rgb(如#fc0) 16*16*16

rgb(X,X,X),其中X是一个0到255中的某个值。如rgb(220,145,120)

rgb(x%,x%,x%),其中X是一个0----100的整数值，如rgb(100%,80%,0)

在HTML文件中放置CSS的几种方式

如何创建CSS

如何插入样式表？当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种：

一、外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。<link> 标签在（文档的）头部。

Example1：

新建一个html文件，命名为test2.html，添加下面的代码：

<html><head>   <link rel="stylesheet" type="text/css" href="mystyle.css" />   </head><h1>测试css的链接</h1><p>dhsakdaskdsa</p><body>主体部分：dfsdfasdjsakjdsa</body></html>Instruction：这里的mystyle.css是自己新建的一个.css文件，存放在与test2.html相同的目录下。在mystyle.css中添加下面的代码：h1 {color: green;}p {margin-left: 200px;}body {color: red;margin-left: 200px;

Instruction：这里在这个css文件中设置标题1颜色为绿色，p对应的段落距离页面左侧为200pix，整个主题部分距离页面左侧也是200pix,效果如下：

图2-1外部链接样式表示意图

注意：不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

二、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表。

Example：

新建一个html文件，命名为test3.html，添加下面的代码：

<html><head>   <style type="text/css">    h1 {color: green;}    p {margin-left: 200px;}    body {color: red;margin-left: 200px;}   </style></head> <h1>测试css的链接</h1><p>dhsakdaskdsa</p><body>主体部分：dfsdfasdjsakjdsa</body></html>

运行后界面效果如下图所示：

图3-1内部（嵌）样式表

三、内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color: sienna; 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;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。

0 0