CSS入门基础经典教程

CSS基础教程

CSS教程目录 (1)

第一章CSS简介 (3)

第一节：什么是CSS? (3)

什么是CSS (3)

参见 (3)

第二节：使用CSS的优势 (3)

第二章CSS入门例子 (3)

示例 (3)

第三章CSS语法 (4)

第一节：外部引用CSS (4)

使用link 标签引用CSS (4)

使用@import 引用CSS (4)

第二节：内部引用CSS (5)

第三节：内联引用CSS (6)

第四节：CSS 选择符-- CSS的名字 (6)

选择符语法 (6)

选择符取名规则 (6)

常用的三种选择符 (7)

选择符用法总结 (7)

第五节：CSS 声明 (8)

语法 (8)

介绍两个常用的技巧 (8)

第六节：CSS 注释 (8)

语法 (9)

示例 (9)

第四章CSS颜色 (9)

CSS颜色表示方法 (9)

注意: (10)

第五章CSS背景 (10)

第一节：CSS background-color 属性 (10)

background-color -- 背景色,定义背景的颜色 (10)

示例 (10)

第二节：CSS background-image 属性 (11)

background-image -- 定义背景图片 (11)

示例 (11)

第三节：CSS background-repeat 属性 (11)

background-repeat -- 定义背景图片的重复方式 (11)

示例 (12)

第四节：CSS background-position 属性 (12)

background-position -- 定义背景图片的位置 (12)

示例 (12)

第五节: CSS background-attachment 属性 (13)

background-attachment -- 定义背景图片随滚动轴的移动方式 (13)

示例 (13)

第六节：CSS background 属性 (13)

background -- 五个背景属性可以全部在此定义 (13)

示例 (13)

第六章CSS文本 (14)

第一节: CSS text-decoration 属性 (14)

text-decoration -- 定义文本是否有划线以及划线的方式 (14)

示例 (14)

第二节: CSS white-space 属性 (15)

white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式

(15)

示例 (15)

第七章CSS字体 (16)

第八章CSS边框 (16)

第九章CSS边外补白 (16)

第一节: CSS margin 属性 (16)

margin-top -- 定义上边外补白 (17)

margin-right -- 定义右边外补白 (17)

margin-bottom -- 定义下边外补白 (17)

margin-left -- 定义左边外补白 (17)

第十章CSS边内补白 (17)

padding -- 定义边内补白 (17)

padding-top -- 定义上边内补白 (18)

padding-bottom -- 定义下边内补白 (18)

padding-left -- 定义左边内补白 (18)

padding-right -- 定义右边内补白 (18)

第十一章CSS属性索引 (18)

第一节：CSS2.1属性按功能索引 (18)

CSS盒模式 (18)

CSS视觉格式模型 (19)

CSS视觉效果 (19)

CSS列表 (19)

CSS背景 (20)

CSS字体 (20)

CSS文本 (20)

CSS颜色 (20)

第一章CSS简介

第一节：什么是CSS?

什么是CSS

CSS是Cascading Style Sheets(层叠样式表)的简称.

CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).

在标准网页设计中CSS负责网页内容(XHTML)的表现.

CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.

可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.

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

参见

W3C的CSS主页https://www.360docs.net/doc/d76782069.html,/Style/CSS/

在w3c网站上校验CSS的正确性https://www.360docs.net/doc/d76782069.html,/css-validator/

第二节：使用CSS的优势

内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.

使用CSS可以减少网页的代码量,增加网页的浏览速度

第二章CSS入门例子

示例

定义文字的颜色

color就代表颜色,我们使用红色red 为文字颜色.

你可以修改代码使用blue 蓝色, yellow 黄色等.学习文字的颜色

这段代码显示的结果如下：

第三章CSS语法

CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.

每个CSS选择符由1个或多个CSS属性组成.

CSS是大小写敏感的,在CSS语法中推荐使用小写.

第一节：外部引用CSS

CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).

使用link 标签引用CSS

示例

href -- 指定需要加载的资源(CSS文件)的地址URI

rel -- 指定链接类型

type -- 包含内容的类型,一般使用type="text/css"

使用@import 引用CSS

示例

相对路径与绝对路径

加载文件的时候可以使用相对路径或者绝对路径.

绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径.

https://www.360docs.net/doc/d76782069.html,/html/default.html就是绝对路径,/html/default.html也是绝对路径,C:winntsystem.sys也是绝对路径

相对路径:相对于我们查看文档的路径.

../default.html或者default.html或者../../default.html都是相对路径

小结

外部引用CSS中link与@import的区别

差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import 只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

第二节：内部引用CSS

示例

注意:style标签应该在head标签内部.

第三节：内联引用CSS

内联引用可以把CSS样式直接作用在XHTML标签中.

示例

使用CSS内联引用表现段落.

第四节：CSS 选择符-- CSS的名字

CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS 样式.

选择符语法

选择符名字

{

声明;

}

一个CSS选择符就定义了一个样式

比如下面这三个例子

p{font-size:12px;}

.dreamdublue{color:blue;}

#dreamdured{color:red;}

dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.

选择符取名规则

CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.

英文字母大写与小写A-Z a-z

数字0-9

连字号-

下划线_

冒号"

句号.

提示: CSS选择符只能以字母开头.

常用的三种选择符

(我感觉这是初级教程中最难的地方:)

xhtml标签选择符,比如p标签选择符(代表所有的段落都使用这个CSS样式),比如p{font-size:12px;}

id选择符,唯一性选择符,比如#dreamdured{color:red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).

class选择符,多重选择符,比如.dreamdublue{color:blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).

示例

梦之都xhtml标签选择符

梦之都id选择符

梦之都class选择符

梦之都class选择符2,出现了多次.

一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.

选择符用法总结

第五节：CSS 声明

CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.

语法

属性:属性值;

示例

font-size:12px;

font-size代表字体大小.

12px字体大小的值.

介绍两个常用的技巧

1,选择符的名字一样,声明是可以组合的

例如：

选择符名字{声明1;声明2; }

div

{

color:black;

font-size:12px;

}

2,明全部一样,选择符的名字也可以组合

例如：

选择符名字1,选择符名字2,选择符名字3{声明1;声明2;}

.dreamdudivwhite12px,h1,div

{

color:white;

font-size:12px;

}

h1, p, div

{

border:1px solid black;

}

第六节：CSS 注释

就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.

CSS注释的开始使用/*,结束使用*/

语法

/* 注释内容*/

示例

/* ----------文字样式开始---------- */

/* 梦之都白色12象素文字*/

.dreamduwhite12px

{

color:white;

font-size:12px;

}

/* 梦之都黑色16象素文字*/

.dreamdublack16px

{

color:black;

font-size:16px;

}

/* ----------文字样式结束---------- */

第四章CSS颜色CSS颜色表示方法

CSS预定义颜色表示法(就是使用颜色的英文):

color:red;

color:green;

color:blue;

CSS RGB颜色表示法:

color:rgb(255,0,0);

color:rgb(0,255,0);

color:rgb(0,0,255);

CSS 16进制颜色表示法:

color:#ff0000;

color:#00ff00;

color:#1199ff;

CSS 短16进制颜色表示法,属于web safe colors(网络安全色): color:#f00;

color:#0f0;

color:#00f;

短16进制颜色表示法就是当16进制颜色表示法中的两个表示颜色值的数字一样的时候的简写,比如color:#ff0000;就可以简写为color:#f00;

注意:

使用16进制表示颜色时,要使用#标记

#rgb等价于#rrggbb,例如:#fb0等价于#ffbb00

第五章CSS背景

背景(background),文字颜色可以使用color属性,但是包含文字的p段落,div层,page页面等的颜色与背景图片可以使用与background等属性.

通常使用background-color定义背景颜色,background-image定义背景图片,background-repeat 定义背景图片的重复方式,background-position定义背景图片的位置,background-attachment定义背景图片随滚动轴的移动方式.

第一节：CSS background-color 属性

background-color -- 背景色,定义背景的颜色

取值: | transparent | inherit

: 颜色表示法

transparent:透明

inherit: 继承

初始值: transparent

继承性: 是

适用于: 所有元素

background:背景.color:颜色.

示例

body

{

background-color:green;

}

第二节：CSS background-image 属性background-image -- 定义背景图片

取值: | none | inherit

none:无

inherit:继承

初始值: none

继承性: 否

适用于: 所有元素

background:背景.image:图片.

示例

body

{

background-image:url('html_table.png');

}

p

{

background-image:none;

}

div

{

background-image:url('list-orange.png');

}

第三节：CSS background-repeat 属性background-repeat -- 定义背景图片的重复方式

取值: repeat | repeat-x | repeat-y | no-repeat | inherit repeat:平铺整个页面,左右与上下

repeat-x:在x轴上平铺,左右

repeat-y: 在y轴上平铺,上下

no-repeat:图片不重复

inherit:继承

初始值: repeat

继承性: 否

适用于: 所有元素

background:背景.repeat:重复.

示例

body

{

background-image:url('list-orange.png');

background-repeat:no-repeat;

}

div

{

background-image:url('list-orange.png');

background-repeat:repeat-y;

background-position:right;

}

第四节：CSS background-position 属性

background-position -- 定义背景图片的位置

取值: [ [ | | left | center | right ] [ | | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit

水平left: 左center:中right:右

垂直top:上center:中bottom: 下

垂直与水平的组合x-% y-% x-pos y-pos

示例

body

{

background-image:url('list-orange.png');

background-repeat:no-repeat;

}

p

{

background-image:url('list-orange.png');

background-position:right bottom ;

background-repeat:no-repeat;

}

div

{

background-image:url('list-orange.png');

background-position:50% 20% ;

background-repeat:no-repeat;

}

background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

第五节: CSS background-attachment 属性

background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit

scroll:随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit:继承

示例

body

{

background-image:url('list-orange.png');

background-attachment:fixed;

background-repeat:repeat-x;

background-position:center center;

}

第六节：CSS background 属性

background -- 五个背景属性可以全部在此定义

取值: [ || || || || ] | inherit

[ || || || || ]: 背景颜色,图像等的一个属性或多个属性

inherit: 继承

示例

body

{

background:url('list-orange.png') repeat-x center;

}

第六章CSS文本

CSS文本属性用于定义文字,空格,单词,段落的表现等.

通常使用letter-spacing属性控制字母之间的距离,word-spacing属性控制文字间空格的距离,text-decoration属性定义文本是否有下划线,text-transform属性控制英文的大小写,text-align属性定义文本的对齐方式,text-indent属性定义文本首行的缩进,white-space属性定义文本与文档源代码的关系.

第一节: CSS text-decoration 属性

text-decoration -- 定义文本是否有划线以及划线的方式

取值:none | [ underline || overline || line-through || blink ] | inherit

none: 定义正常显示的文本

[underline || overline || line-through || blink]: 四个值中的一个或多个

underline:定义有下划线的文本

overline: 定义有上划线的文本

line-through:定义直线穿过文本

blink: 定义闪烁的文本

示例

p#underline

{

text-decoration:underline;

}

p#overline

{

text-decoration:overline;

}

p#line-through

{

text-decoration:line-through;

}

p#blink

{

text-decoration:blink;

}

p#underover

{

text-decoration:underline overline;

}

p#underoverthroughblink

{

text-decoration:underline overline line-through blink;

}

第二节: CSS white-space 属性

white-space -- 通过HTML文档的源代码的排版方式控制页面显示文本的排版方式

取值: normal | pre | nowrap | pre-wrap | pre-line | inherit

normal:正常无变化(默认处理方式.文本自动处理换行.假如抵达容器边界内容会转到下一行)

pre:保持HTML源代码的空格与换行,等同与pre标签

nowrap: 强制文本在一行,除非遇到br换行标签

pre-wrap: 同pre属性,但是遇到超出容器范围的时候会自动换行

pre-line: 同pre属性,但是遇到连续空格会被看作一个空格

inherit: 继承

示例

p#pre

{

white-space:pre;

}

第七章CSS字体

CSS字体属性用于定义文字的字体,大小,粗细的表现等.

通常使用font-family定义使用什么字体,font-size定义字体大小,font-style定义斜体字,font-variant定义小型的大写字体,font-weight定义字体的粗细,font统一定义字体的所有属性.

第八章CSS边框

每个内容或元素外面都可以有一个边框.

边框分为上边框(top),下边框(bottom),左边框(left),右边框(right).

每种边框有颜色(color),样式(style),宽度(width)三种属性.

如果上下左右的边框表现不一样,可以分别定义上下左右边框,如果一样可以统一使用border属性定义.

通常使用border-width属性定义边框的宽度,border-color属性定义边框的颜色,border-style属性定义边框的样式,border属性统一定义边框样式的几个属性.

第九章CSS边外补白

边框的外面可以有一层边外补白(margin),边外补白可以把块级元素分开.边外补白定义了围绕某种元素(elements)的空白.

可以查看盒模式,了解边外补白和边内补白.

边外补白分为上边外补白(top),下边外补白(bottom),左边外补白(left),右边外补白(right). 边外补白只有宽度width一种属性.

第一节: CSS margin 属性

margin边外补白可以取负值;边外补白是看不到的,因为它本身是白色的.

margin-right -- 定义右边外补白

margin-bottom -- 定义下边外补白

margin-left -- 定义左边外补白

第十章CSS边内补白

边框的里面面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距离.

边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right). 边内补白只有width一种属性.

padding -- 定义边内补白

padding边内补白不可以取负值;边内补白是看不到的,因为它本身是白色的.

padding-bottom -- 定义下边内补白

padding-left -- 定义左边内补白

padding-right -- 定义右边内补白

第十一章CSS属性索引第一节：CSS2.1属性按功能索引

CSS盒模式

border-collapse

border-color -- 边框颜色

border-spacing

border-style -- 边框样式

border-top -- 上边框

border-right -- 右边框

border-bottom -- 下边框

border-left -- 左边框

border-top-color -- 上边框颜色

border-right-color -- 右边框颜色

border-bottom-color -- 下边框颜色

border-left-color -- 左边框颜色

border-top-style -- 上边框样式

border-right-style -- 右边框样式

border-bottom-style -- 下边框样式

border-left-style -- 左边框样式

border-top-width -- 上边框宽度

border-right-width -- 右边框宽度

border-bottom-width -- 下边框宽度

border-left-width -- 左边框宽度

border-width -- 边框宽度

border -- 边框所有属性

margin-right -- 右边外补白宽度

margin-left -- 左边外补白宽度

margin-top -- 上边外补白宽度

margin-bottom -- 下边外补白宽度

margin -- 边外补白

padding-top -- 上边内补白

padding-right -- 右边内补白

padding-bottom -- 下边内补白

padding-left -- 左边内补白

padding -- 边内补白

CSS视觉格式模型

display -- 显示方式

position -- 元素的定位

bottom -- 下偏移属性

left -- 左偏移属性

right -- 右偏移属性

top -- 上偏移属性

float -- 元素漂浮

z-index -- z轴顺序

direction

unicode-bidi

max-height -- 最大高度

max-width -- 最大宽度

min-height -- 最小高度

min-width -- 最小宽度

height -- 盒子高度

width -- 盒子宽度

clear -- 清除

line-height -- 一段文字中每行文字的间距 vertical-align -- 垂直对齐方式

CSS视觉效果

clip -- 了盒子可显示的区域

overflow -- 盒子中内容的显示方式

visibility -- 元素是否可见

CSS列表

list-style-image -- 列表图像

list-style-position -- 列表位置

list-style-type -- 列表类型

list-style -- 列表所有属性

CSS背景

background-attachment -- 背景图片随滚动轴的移动方式 background-color -- 背景颜色

background-image -- 背景图像

background-position -- 背景图片的位置

background-repeat -- 背景图片的显示方式

background -- 背景

CSS字体

font-family -- 字体

font-size -- 字体大小

font-style -- 字体样式

font-variant -- 小型的大写字母字体

font-weight -- 字体粗细

font -- 字体所有属性

CSS文本

text-align -- 文本对齐方式

text-decoration -- 文本是否有划线以及划线的方式

text-indent -- 文本的首行缩进

text-transform -- 文本的大小写状态,此属性对中文无意义 white-space -- 文本的格式

word-spacing -- 以空格间隔文字的间距

letter-spacing -- 文本中字母的间距(中文为文字的间距) CSS颜色

color -- 颜色