广告位

CSS基础教程

 

第一章 CSS简介

第一节:什么是CSS?

什么是CSS

Ø         CSSCascading Style Sheets(层叠样式表)的简称.

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

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

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

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

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

参见

Ø        W3CCSS主页http://www.w3.org/Style/CSS/

Ø        w3c网站上校验CSS的正确性http://jigsaw.w3.org/css-validator/

第二节:使用CSS的优势

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

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

第二章  CSS入门例子

示例

Ø         定义文字的颜色

<html>

       <style type="text/css" media="all">

              p {color:red;}

              p1 { color:blue;}

       </style>

       <body>

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

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

       </body>

</html>

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

第三章  CSS语法

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

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

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

第一节:外部引用CSS

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

使用 link 标签引用CSS

示例

<head>

       <link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" rel="external nofollow" />

</head>

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

Ø         rel -- 指定链接类型

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

使用 @import 引用CSS

Ø         示例

<head>

       <style type="text/css">@import url(http://www.dreamdu.com/style.css);</style>

</head>  

相对路径与绝对路径

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

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

http://www.dreamdu.com/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:兼容性的差别。由于@importCSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

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

第二节:内部引用CSS

Ø         示例

<style type="text/css">

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

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

.dreamduwhite12px

{

       color:white;

       font-size:12px;

}

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

.dreamdublack16px

{

       color:black;

       font-size:16px;

}

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

</style>

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

第三节:内联引用CSS

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

Ø         示例

<p style="font-size: 10px; color: #FFFFFF;">

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

</p>

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

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

选择符语法

选择符名字

{

       声明;

}

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

比如下面这三个例子

p{font-size:12px;}

.dreamdublue{color:blue;}

#dreamdured{color:red;}

dreamdubluedreamdured都是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选择符的用法).

示例

<p>梦之都xhtml标签选择符</p>

<p id="dreamdured">梦之都id选择符</p>

<p class="dreamdublue">梦之都class选择符</p>

<p class="dreamdublue dreamdu18px">梦之都class选择符2,出现了多次.</p>

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

选择符用法总结

       

idclass选择符在CSSXHTML中的用法总结

 

CSS中的写法

XHTML中的写法

xhtml标签选择符

p{font-size:12px;}

<p>www.dreamdu.com</p>

id选择符

#id_selector{font-size:12px;}

<p id="id_selector">梦之都</p>

class选择符

.class_selector{font-size:12px;}

<p class="class_selector">梦之都</p>

第五节: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 -- 背景色,定义背景的颜色

Ø         取值: <color> | transparent | inherit

Ø         <color>: 颜色表示法

Ø         transparent: 透明

Ø         inherit: 继承

Ø         初始值: transparent

Ø         继承性:

Ø         适用于: 所有元素

Ø         background:背景.color:颜色.

示例

body

{

       background-color:green;

}

第二节:CSS background-image 属性

background-image -- 定义背景图片

Ø         取值: <url> | 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 -- 定义背景图片的位置

Ø         取值: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | 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属性是通过平面上的xy坐标定位的,所以通常取两个值.

第五节: 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 -- 五个背景属性可以全部在此定义

Ø         取值: [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>] | inherit

Ø         [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>]: 背景颜色,图像等的一个属性或多个属性

Ø         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-top -- 定义上边外补白

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

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

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

第十章 CSS边内补白

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

Ø         边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right).

Ø         边内补白只有width一种属性.

padding -- 定义边内补白

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

padding-top -- 定义上边内补白

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 -- 颜色

本博客所有文章如无特别注明均为原创。作者:fyq复制或转载请以超链接形式注明转自 免费精品资源分享
原文地址《CSS基础教程

相关推荐

广告位

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)