css基础知识.docx
- 文档编号:9328221
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:105
- 大小:47.13KB
css基础知识.docx
《css基础知识.docx》由会员分享,可在线阅读,更多相关《css基础知识.docx(105页珍藏版)》请在冰豆网上搜索。
css基础知识
前言
1.什么是CSS?
1.1.使用CSS的优势
2.CSS入门例子
2.1.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.CSScolor属性--CSS前景色
4.1.CSSopacity属性
5.CSS颜色--五颜六色的世界
5.1.CSSRGB(A)颜色
5.2.CSSHSL(A)颜色
5.3.短16进制颜色与web安全色
6.CSS背景
6.1.CSSbackground-color属性
6.2.CSSbackground-image属性
6.3.CSSbackground-repeat属性
6.4.CSSbackground-position属性
6.5.CSSbackground-attachment属性
6.6.CSSbackground属性
7.CSS文本
7.1.CSSletter-spacing属性
7.2.CSSword-spacing属性
7.3.CSStext-decoration属性
7.4.CSStext-transform属性
7.5.CSStext-align属性
7.6.CSStext-indent属性
7.7.CSSwhite-space属性
8.CSS字体
8.1.CSSfont-family属性
8.1.1.CSSfamily-name系列性字体名称
8.1.2.CSSgeneric-family一般性字体名称
8.2.CSSfont-size属性
8.3.CSSfont-style属性
8.4.CSSfont-variant属性
8.5.CSSfont-weight属性
8.6.CSSfont属性
9.CSS列表
9.1.CSSlist-style-type属性
9.2.CSSlist-style-image属性
9.3.CSSlist-style-position属性
9.4.CSSlist-style属性
10.CSScursor属性--鼠标样式
11.CSS边框
11.1.CSSborder-width属性
11.2.CSSborder-color属性
11.3.CSSborder-style属性
11.4.CSSborder属性
12.CSSmargin属性--CSS边外补白
13.CSSpadding属性--CSS边内补白
14.CSS属性索引--按字母顺序
前言
CSS教程,分为CSS初级教程和CSS高级教程两个阶段.
CSS初级教程包括:
CSS语法,CSS颜色,CSS文本与CSS字体,CSS边框,CSS列表等基础知识.
CSS高级教程包括:
CSS选择符,CSS相关特性,CSS盒模式,标准网页设计与页面排版,CSS伪类与伪元素等.
通过梦之都的CSS教程,你将学会怎样使用CSS,怎么把CSS与XHTML有机的结合在一起,了解CSS最新的发展情况,并且你将学会标准网页的制作.
学习CSS教程之前我假定你已经学会了HTML语言,你可以通过此链接学习HTML语言教程.
教程主要介绍CSS2.1的特性,同时也简单介绍了CSS3的一些特性.由于CSS3的一些特性还不被主流浏览器支持,这里只是做一个前瞻性的介绍.
学习CSS之前,首先可以先准备几个浏览器测试其对CSS的兼容性.常用的浏览器有:
∙Firefox(
∙IE(
∙Opera(
CSS是非常简单,强大的,可以把网页表现的统一,漂亮,规范,使页面更加亲切.可以减少网页制作的代码量.
本教程会把所有CSS属性做一个总结,供大家以后查找参考.CSS属性索引
1.什么是CSS?
什么是CSS
∙CSS是用于布局与美化网页的.
∙CSS是CascadingStyleSheets的英文缩写,即层叠样式表.
∙CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
∙CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
∙CSS是大小写不敏感的,CSS与css是一样的.
∙CSS是由W3C的CSS工作组产生和维护的.
猴子提示:
可以通过简单的更改CSS文件,改变网页的整体表现形式,可以减少我们的工作量,所以她是每一个网页设计人员的必修课.
知道什么是CSS了,现在就开始学习CSS吧CSS入门例子
CSS的历史
∙1996年W3C正式推出了CSS1.
∙1998年W3C正式推出了CSS2.
∙CSS2.1是W3C现在正在推荐使用的.
∙CSS3现在还处于开发中.
参考
∙W3C的CSS主页http:
//www.w3.org/Style/CSS/
∙在w3c网站上校验CSS的正确性http:
//jigsaw.w3.org/css-validator/
1.1.使用CSS的优势
∙内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.
∙表现的统一,可以使网页的表现非常统一,并且容易修改.
∙CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
∙使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.
2.CSS入门例子
2.1.CSS入门视频教程
∙如果还不了解从输入域名到访问网站的过程,先看看这个吧,网络的运作方式
∙看看猴子为什么学习做网页,猴子买报的故事:
)
你可以先通过这个链接学习一下HTML的入门例子.
CSS入门例子示例--可以尝试编辑
∙定义文字的颜色
∙定义网页的背景颜色
∙定义网页的背景图片
∙定义文字的对齐方式
∙自定义列表样式
∙定于你的鼠标样式
∙定义一个带有颜色的边框
好通过上面的例子有点感觉了吧?
现在开始从头学习入门啦:
)
<1>打开记事本:
点击"开始"--选择"程序"--选择"附件"--选择"记事本"(或者打开你的Notepad++编辑器)
<2>输入下面代码(直接拷贝过去就可以啦)
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
欢迎来到梦之都
这是我的第一个网页,在这里
尽情学习CSS 吧!
点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.html"并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)
<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;
}
点击"文件"--选择"保存"--选择文件类型为"所有文件"--文件名输入"dreamdu.css"并选择文件保存地址.(记住一定要把文件的后缀存为.css,而且要和dreamdu.html在同一个目录下.)
<4>现在我们可以双击dreamdu.html这个文件.看看效果吧.
怎么样?
五颜六色的吧:
)
现在解释一下上面的例子
HTML文件就是一个文本文件,HTML文件要在head处加载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链接的样式,这个有点复杂了,大家可以先看看效果,高级教程中我再分析此链接样式(梦之都就是使用的这个链接样式:
)[大家可以下载梦之都的链接样式参考一下
几个问题
比如使用什么编辑器呀?
怎么显示扩展名等.大家可以参看HTML,XHTML入门例子
3.CSS语法--最基本的
CSS语法非常简单,组成CSS语法的元素只有CSS选择符与CSS属性.
每个CSS选择符由1个或多个CSS属性组成.
CSS是大小写不敏感的,在CSS语法中推荐使用小写.
HTML教程中我们学习了CSS在HTML文件中的几种加载方法,在这里我还要再全面的总结一下.
3.1.外部引用CSS--External
CSS外部引用使用了外接的CSS文件,一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件.
外部引用相对于内部引用和内联引用来说是高效的是节省宽带的.
外部引用是W3C推荐使用的.
外部引用CSS是最好的引入CSS的方式(可以使代码量最小,表现最统一,也是标准网页设计推荐的).内联引用(直接在HTML标签中使用)虽然是一种快捷的方式(除了层叠的情况,高级教程中我会介绍层叠),但是不利于以后的统一修改和表现的一致性,所以不提倡使用.
梦之都CSS教程中的大部分示例都使用内部引用CSS--Internal的方式,这样大家可以比较直观的看到CSS代码.
3.1.1使用link标签引用CSS
示例
延伸阅读
∙XHTMLlink标签
∙XHTMLrel属性
∙XHTMLhref属性
∙在HTML中嵌入CSS--定义CSS样式
∙外部引用CSS中link与@import的区别
3.1.2使用@import引用CSS
示例
相对路径与绝对路径
∙加载文件的时候可以使用相对路径或者绝对路径
∙绝对路径:
文件的完整路径,主页上的文件或目录在硬盘上真正的路径
∙
∙相对路径:
相对于我们查看文档的路径
∙../default.html或者default.html或者../../default.html都是相对路径
双表法
一些老式的浏览器不支持@import方法.网上流传着一种叫双表法的技术,就是利用了一些老式的浏览器不支持@import这个特性.
延伸阅读
∙XHTMLstyle标签
∙在HTML中嵌入CSS--定义CSS样式
∙外部引用CSS中link与@import的区别
∙相对路径和绝对路径
参考
∙W3CThe@importrule
3.2.内部引用CSS--Internal
可以使用style标签直接把CSS文件中的内容加载到HTML文档内部.
示例
[CDATA[ /*----------文字样式开始----------*/ /*梦之都白色12象素文字*/ .dreamduwhite12px { color: white; font-size: 12px; } /*梦之都黑色16象素文字*/ .dreamdublack16px { color: black; font-size: 16px; } /*----------文字样式结束----------*/ ]]> 猴子提示: style标签应该在head标签内部. 3.3.内联引用CSS--Inline 内联引用可以把CSS样式直接作用在HTML标签中. 示例 10px;color: #FFFFFF;"> 使用CSS内联引用表现段落. 3.4.CSS选择符--CSS的名字 CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢? 这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式. 选择符语法 选择符名字 { 声明; } 一个CSS选择符就定义了一个样式 比如下面这三个例子 p { font-size: 12px; } .dreamdublue { color: blue; } .dreamdu18px { font-size: 18px; } #dreamdured { color: red; } dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字. 选择符取名规则 CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号. ∙英文字母大写与小写A-Za-z ∙数字0-9 ∙连字号- ∙下划线_ ∙冒号: ∙句号. 猴子提示: CSS选择符只能以字母开头. 常用的三种选择符 (我感觉这是初级教程中最难的地方: ) ∙xhtml标签选择符,比如p标签选择符(代表所有的段落都使用这个CSS样式),比如p{font-size: 12px;} ∙id选择符,唯一性选择符,比如#dreamdured{color: red;},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了). ∙class选择符,多重选择符,比如.dreamdublue{color: blue;},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法). 示例 梦之都xhtml标签选择符
一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.
CSS选择符示例--可以尝试编辑
oCSS选择符示例
选择符用法总结
id与class选择符在CSS与HTML中的用法总结
CSS中的写法
XHTML中的写法
xhtml标签选择符
p{font-size:
12px;}
id选择符
#id_selector{font-size:
12px;}
class选择符
.class_selector{font-size:
12px;}
猴子提示:
CSS选择符还有好多种变化,在CSS高级教程中我再给大家介绍.
延伸阅读
oHTMLid属性
oHTMLclass属性
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:
1pxsolidblack;
}
通过上面的示例大家可以看出选择符组合的好处,border:
1pxsolidblack;这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.
CSS声明示例--可以尝试编辑
∙CSS声明示例
3.6.CSS注释
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
CSS注释的开始使用/*,结束使用*/
CSS注释语法
/*注释内容*/
示例
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
{
color:
white;
font-size:
12px;
}
/*梦之都黑色16象素文字*/
.dreamdublack16px
{
color:
black;
font-size:
16px;
}
/*----------文字样式结束----------*/
延伸阅读
∙HTML注释
∙JavaScript注释
4.CSScolor属性--CSS前景色
我们可以为网页上的文字赋予颜色,这就要使用到CSS的前景色.
前景色(foregroundcolor),可以使用color属性表示前景色,前景色通常使用在文字上.
与前景色相对应的是CSS背景色,后面我们将介绍CSS的背景色.
color--前景色定义文字的颜色
∙取值:
o
颜色表示法
oinherit:
继承
∙初始值:
依赖于用户的设备
∙继承性:
是
∙适用于:
所有元素
∙引用网址:
示例
p
{
color:
black;
}
span
{
color:
rgb(50,255,0);
}
CSScolor属性示例--可以尝试编辑
∙CSScolor属性示例
∙CSSopacity属性示例
延伸阅读
∙CSS教程中的属性取值正则表达式介绍
(一)
4.1.CSSopacity属性
opacity--不透明度
∙取值:
o
透明度取值(取值范围[0.0,1.0])
oinherit:
继承
∙初始值:
1(不透明)
∙继承性:
是
∙适用于:
所有元素
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 基础知识
![提示](https://static.bdocx.com/images/bang_tan.gif)