📄 css教程.txt
字号:
前言
1. CSS简介
1.1. 什么是CSS?
1.2. 使用CSS的好处
2. CSS入门例子
3. CSS语法 -- 最基本的
3.1. 外部引用CSS
3.1.1. 使用 link 标签引用CSS
3.1.2. 使用 @import 引用CSS
3.2. 内部引用CSS
3.3. 内联引用CSS
3.4. CSS 选择符
3.5. CSS 声明
3.6. CSS 注释
4. CSS前景色
4.1. CSS color 属性
4.2. CSS opacity 属性
5. CSS颜色 -- 五颜六色的世界
5.1. CSS RGB(A) 颜色
5.2. CSS HSL(A) 颜色
5.3. 短16进制颜色与web安全色
6. CSS背景
6.1. CSS background-color 属性
6.2. CSS background-image 属性
6.3. CSS background-repeat 属性
6.4. CSS background-position 属性
6.5. CSS background-attachment 属性
6.6. CSS background 属性
7. CSS文本
7.1. CSS letter-spacing 属性
7.2. CSS word-spacing 属性
7.3. CSS text-decoration 属性
7.4. CSS text-transform 属性
7.5. CSS text-align 属性
7.6. CSS text-indent 属性
7.7. CSS white-space 属性
8. CSS字体
8.1. CSS font-family 属性
8.1.1. CSS family-name 系列性字体名称
8.1.2. CSS generic-family 一般性字体名称
8.2. CSS font-size 属性
8.3. CSS font-style 属性
8.4. CSS font-variant 属性
8.5. CSS font-weight 属性
8.6. CSS font 属性
9. CSS列表
9.1. CSS list-style-type 属性
9.2. CSS list-style-image 属性
9.3. CSS list-style-position 属性
9.4. CSS list-style 属性
10. CSS鼠标样式
10.1. CSS cursor 属性
11. CSS边框
11.1. CSS border-width 属性
11.2. CSS border-color 属性
11.3. CSS border-style 属性
11.4. CSS border 属性
12. CSS边外补白
12.1. CSS margin 属性
13. CSS边内补白
13.1. CSS padding 属性
总结
CSS代码 示例 -- 可以自己编辑的示例代码
1.1. 什么是CSS?
什么是CSS
CSS是Cascading Style Sheets(层叠样式表)的简称.
CSS语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
在标准网页设计中CSS负责网页内容(XHTML)的表现.
CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
CSS是由W3C的CSS工作组产生和维护的.
CSS的历史
1996年W3C正式推出了CSS1.
1998年W3C正式推出了CSS2.
CSS2.1是W3C现在正在推荐使用的.
CSS3现在还处于开发中.
1.2. 使用CSS的好处
内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.
表现的统一,可以使网页的表现非常统一,并且容易修改.
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.
2 . CSS入门例子
你可以先通过这个链接学习一下HTML的入门例子.
CSS入门例子示例 -- 可以尝试编辑
定义文字的颜色
定义网页的背景颜色
定义网页的背景图片
定义文字的对齐方式
自定义列表样式
定于你的鼠标样式
定义一个带有颜色的边框
好通过上面的例子有点感觉了吧?现在开始从头学习入门啦:)
<2>输入下面代码(直接拷贝过去就可以啦)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html>
<head>
<title> 欢迎来到梦之都 </title>
<link rel="stylesheet" type="text/css" href="dreamdu.css" />
</head>
<body>
<h1>欢迎来到梦之都<h1>
<p>这是我的第一个网页,在这里
<a href="http://www.dreamdu.com/css/">
尽情学习CSS
</a>吧!
</p>
</body>
</html>
<3>再新建一个文件,输入下面代码(直接拷贝过去就可以啦)
/*段落样式*/
p
{
color: purple;
font-size: 12px;
}
/*标题样式*/
h1
{
color: olive;
text-decoration: underline;
}
/*链接样式*/
a:link
{
color:#006486;
}
a:visited
{
color:#464646;
}
a:hover
{
color: #fff;
background: #3080CB;
}
a:active
{
color:white;
background: #3080CB ;
}
<4>现在我们可以双击dreamdu.html这个文件.看看效果吧.
怎么样?五颜六色的吧:)
现在解释一下上面的例子:
HTML文件就是一个文本文件,HTML文件要在head处加载css样式<link rel="stylesheet" type="text/css" href="dreamdu.css" />.
CSS文件也是一个文本文件.
p
{
color: purple;
font-size: 12px;
}
代表p标签所包含的内容都是以紫红色color: purple;,12px大小font-size: 12px;的字体显示.
h1
{
color: olive;
text-decoration: underline;
}
代表h1标签所包含的内容都是以橄榄色color: olive;,带下划线text-decoration: underline;的字体显示.
a:link
{
color:#006486;
}
a:visited
{
color:#464646;
}
a:hover
{
color: #fff;
background: #3080CB;
}
a:active
{
color:white;
background: #3080CB ;
}
几个问题:
比如使用什么编辑器呀? 怎么显示扩展名等.大家可以参看HTML,XHTML入门例子
定义文字的颜色
html>
<style type="text/css" media="all">
p
{
color:red;
}
</style>
<body>
<p>color就代表颜色,我们使用红色 red 为文字颜色.</p>
<p>你可以修改代码使用 blue 蓝色, yellow 黄色等.学习<a href="http://www.dreamdu.com/css/property_color/">文字的颜色</a></p>
</body>
</html>
定义网页的背景颜色
<html>
<style type="text/css" media="all">
body
{
background-color:yellow;
}
</style>
<body>
<p>background-color就代表网页的背景颜色,我们使用黄色 yellow 为网页背景.</p>
<p>你可以修改代码使用 red 红色, blue 蓝色等.学习<a href="http://www.dreamdu.com/css/property_background/">网页背景颜色</a>.</p>
</body>
</html>
定义网页的背景图片
<html>
<style type="text/css" media="all">
body
{
background:transparent url('http://www.google.com/intl/en_ALL/images/logo.gif') repeat scroll center center;
}
</style>
<body>
<p>background也可以定义网页的背景图片,我们以google的图片问网友背景图片.</p>
<p>学习<a href="http://www.dreamdu.com/css/property_background/">网页背景图片</a>.</p>
</body>
</html>
定义文字的对齐方式
<html>
<style type="text/css" media="all">
p#left
{
text-align: left;
}
p#right
{
text-align: right;
}
p#center
{
text-align: center;
}
</style>
<body>
<p id="left">left左对齐</p>
<p id="right">right右对齐</p>
<p id="center">center居中,学习<a href="http://www.dreamdu.com/css/property_text_align/">文字对齐</a></p>
</body>
</html>
自定义列表样
<html>
<style type="text/css" media="all">
ul
{
list-style-image:url("/images/list-orange.png");
}
</style>
<body>
<ul>
<li>使用图片显示列表样式</li>
<li>本例中使用了 list-orange.png 图片</li>
<li>我们还可以使用 list-green.png top.png 或 up.png 图片</li>
<li>学习<a href="http://www.dreamdu.com/css/property_list_style_image/">列表样式</a></li>
</ul>
</body>
</html>
3 . CSS语法 -- 最基本的
3.1. 外部引用CSS
3.1.1 使用 link 标签引用CSS
3.1.2 使用 @import 引用CSS
3.2. 内部引用CSS
3.3. 内联引用CSS
3.4. CSS 选择符
3.5. CSS 声明
3.6. CSS 注释
CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.
每个CSS选择符由1个或多个CSS属性组成.
CSS是大小写敏感的,在CSS语法中推荐使用小写.
3.1.1 使用 link 标签引用CSS
示例
<head>
<link rel="stylesheet" type="text/css" href="http://www.dreamdu.com/style.css" />
</head>
3.1.2 使用 @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都是相对路径.
3.2. 内部引用CSS -- Internal
可以使用style标签直接把CSS文件中的内容加载到XHTML文档内部.
示例
<style type="text/css"><![CDATA[
/* ----------文字样式开始---------- */
/* 梦之都白色12象素文字 */
.dreamduwhite12px
{
color:white;
font-size:12px;
}
/* 梦之都黑色16象素文字 */
.dreamdublack16px
{
color:black;
font-size:16px;
}
/* ----------文字样式结束---------- */
]]></style>
3.3. 内联引用CSS -- Inline
内联引用可以把CSS样式直接作用在XHTML标签中.
示例
<p style="font-size: 10px; color: #FFFFFF;">
使用CSS内联引用表现段落.
</p>
3.4. CSS 选择符 -- CSS的名字
CSS选择符就是CSS样式的名字,当在XHTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?这时就通过CSS选择符(CSS的名字)来指定此XHTML标签使用此CSS样式.
选择符语法
选择符名字
{
声明;
}
一个CSS选择符就定义了一个样式
比如下面这三个例子
p
{
font-size:12px;
}
.dreamdublue
{
color:blue;
}
.dreamdu18px
{
font-size:18px;
}
#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选择符的用法).
示例
<p>梦之都xhtml标签选择符</p>
<p id="dreamdured">梦之都id选择符</p>
<p class="dreamdublue">梦之都class选择符</p>
<p class="dreamdublue dreamdu18px">梦之都class选择符2,出现了多次.</p>
一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.
选择符初级教程示例
选择符用法总结
id与class选择符在CSS与XHTML中的用法总结 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>
3.5. CSS 声明
CSS声明是由"属性","冒号(:)","属性值"和"分号(;)"组成的.
语法:
属性:属性值;
示例
font-size:12px;
font-size代表字体大小.
12px字体大小的值.
下面介绍两个常用的技巧
1,选择符的名字一样,声明是可以组合的
例如:
选择符名字
{
声明1;
}
选择符名字
{
声明2;
}
选择符名字
{
声明3;
}
可以组合为:
选择符名字
{
声明1;
声明2;
声明3;
}
示例
div
{
color:black;
}
div
{
font-size:12px;
}
与下面的是等价的
div
{
color:black;
font-size:12px;
}
2,声明全部一样,选择符的名字也可以组合
选择符名字1
{
声明1;
声明2;
}
选择符名字2
{
声明1;
声明2;
}
选择符名字3
{
声明1;
声明2;
}
可以组合为:
选择符名字1,选择符名字2,选择符名字3
{
声明1;
声明2;
}
示例
.dreamdudivwhite12px
{
color:white;
font-size:12px;
}
h1
{
color:white;
font-size:12px;
}
div
{
color:white;
font-size:12px;
}
与下面的是等价的
.dreamdudivwhite12px,h1,div
{
color:white;
font-size:12px;
}
CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.
示例
h1
{
color:red;
}
p
{
color:black;
font-size:12px;
}
div
{
color:lightblue;
font-size:16px;
}
h1, p, div
{
border:1px solid black;
}
通过上面的示例大家可以看出选择符组合的好处,border: 1px solid black;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.
CSS声明示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title>CSS 声明示例 -- CSS教程</title>
<style type="text/css" media="all">
h1
{
color:red;
}
p
{
color:black;
font-size:18px;
}
div
{
color:lightblue;
font-size:16px;
}
h1, p, div
{
border: 1px solid black;
}
</style>
</head>
<body>
<p>梦之都 <a href="http://www.dreamdu.com/css/">CSS教程</a>,<strong><a href="http://www.dreamdu.com/css/selector_novice/">声明</a></strong>示例</p>
<h1>梦之都CSS声明教程</h1>
<p>第一讲:声明的组合</p>
<div>第一讲:选择符的组合</div>
<p>注:通过声明的组合与选择符的组合,可以有效的减少代码量,方便以后的修改.</p>
</body>
</html>
3.6. CSS 注释
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
CSS注释的开始使用/*,结束使用*/
语法
/* 注释内容 */
示例
/* ----------文字样式开始---------- */
/* 梦之都白色12象素文字 */
.dreamduwhite12px
{
color:white;
font-size:12px;
}
/* 梦之都黑色16象素文字 */
.dreamdublack16px
{
color:black;
font-size:16px;
}
/* ----------文字样式结束---------- */
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -