admin 管理员组文章数量: 1086019
2024年3月21日发(作者：unicode是用16位来表示一个字)
CSS基础教程
CSS教程目录 .................................................................................................................................. 1
第一章 CSS简介 ............................................................................................................................ 3
第一节：什么是CSS? ............................................................................................................. 3
什么是 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
共20页 第1页
示例 ................................................................................................................................. 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
共20页 第2页
第一章 CSS简介
第一节：什么是CSS?
什么是CSS
CSS是Cascading Style Sheets(层叠样式表)的简称.
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语
言).
在标准网页设计中CSS负责网页内容(XHTML)的表现.
CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文
件名后缀.
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以
她是每一个网页设计人员的必修课.
CSS是由W3C的CSS工作组产生和维护的.
参见
W3C的CSS主页/Style/CSS/
在w3c网站上校验CSS的正确性/css-validator/
第二节：使用CSS的优势
内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.
使用CSS可以减少网页的代码量,增加网页的浏览速度
第二章 CSS入门例子
示例
定义文字的颜色
共20页 第3页
color就代表颜色,我们使用红色 red 为文字颜色.
这段代码显示的结果如下：
第三章 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
示例
相对路径与绝对路径
加载文件的时候可以使用相对路径或者绝对路径.
共20页 第4页
绝对路径:文件的完整路径,主页上的文件或目录在硬盘上真正的路径.
/html/就是绝对路径,/html/也是绝对路
径,C:也是绝对路径
相对路径:相对于我们查看文档的路径.
../或者或者../../都是相对路径
小结
外部引用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
示例
共20页 第5页
注意: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
连字号 -
下划线 _
冒号 "
句号 .
共20页 第6页
提示: 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选择符可以在一个页面
出现多次.
选择符用法总结
id与class选择符在CSS与XHTML中的用法总结
CSS中的写法 XHTML中的写法
梦之都
梦之都
xhtml标签选择符 p{font-size:12px;}
#id_selector{font-size:12px
;}
.class_selector{font-size:1
2px;}
id选择符
class选择符
共20页 第7页
第五节：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注释的开始使用/*,结束使用*/
共20页 第8页
语法
/* 注释内容 */
示例
/* ----------文字样式开始---------- */
/* 梦之都白色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;
共20页 第9页
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
继承性: 是
适用于: 所有元素
background:背景.color:颜色.
示例
body
{
background-color:green;
}
共20页 第10页
第二节：CSS background-image 属性
background-image -- 定义背景图片
取值:
none: 无
inherit: 继承
初始值: none
继承性: 否
适用于: 所有元素
background:背景.image:图片.
示例
body
{
background-image:url('html_');
}
p
{
background-image:none;
}
div
{
background-image:url('');
}
第三节：CSS background-repeat 属性
background-repeat -- 定义背景图片的重复方式
取值: repeat | repeat-x | repeat-y | no-repeat | inherit
repeat: 平铺整个页面,左右与上下
repeat-x: 在x轴上平铺,左右
repeat-y: 在y轴上平铺,上下
no-repeat: 图片不重复
inherit: 继承
初始值: repeat
继承性: 否
适用于: 所有元素
共20页 第11页
background:背景.repeat:重复.
示例
body
{
background-image:url('');
background-repeat:no-repeat;
}
div
{
background-image:url('');
background-repeat:repeat-y;
background-position:right;
}
第四节：CSS background-position 属性
background-position -- 定义背景图片的位置
取值: [ [
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('');
background-repeat:no-repeat;
}
p
{
background-image:url('');
background-position:right bottom ;
background-repeat:no-repeat;
}
div
共20页 第12页
{
background-image:url('');
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('');
background-attachment:fixed;
background-repeat:repeat-x;
background-position:center center;
}
第六节：CSS background 属性
background -- 五个背景属性可以全部在此定义
取值: [
[
属性
inherit: 继承
示例
共20页 第13页
body
{
background:url('') 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;
共20页 第14页
}
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;
}
共20页 第15页
第七章 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
边外补白可以取负值;边外补白是看不到的,因为它本身是白色的.
共20页 第16页
margin-top -- 定义上边外补白
margin-right -- 定义右边外补白
margin-bottom -- 定义下边外补白
margin-left -- 定义左边外补白
第十章 CSS边内补白
边框的里面面可以有一层边内补白(padding),边内补白定义了边框与边框里面内容的距
离.
边内补白分为上边内补白(top),下边内补白(bottom),左边内补白(left),右边内补白(right).
边内补白只有width一种属性.
padding -- 定义边内补白
padding边内补白不可以取负值;边内补白是看不到的,因为它本身是白色的.
共20页 第17页
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 -- 左边外补白宽度
共20页 第18页
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 -- 列表类型
共20页 第19页
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 -- 颜色
共20页 第20页
版权声明：本文标题：CSS入门基础经典教程 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1711032694a585055.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论