css基础知识Word下载.docx
- 文档编号:22464291
- 上传时间:2023-02-04
- 格式:DOCX
- 页数:105
- 大小:47.13KB
css基础知识Word下载.docx
《css基础知识Word下载.docx》由会员分享,可在线阅读,更多相关《css基础知识Word下载.docx(105页珍藏版)》请在冰豆网上搜索。
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/
∙内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.
∙表现的统一,可以使网页的表现非常统一,并且容易修改.
∙CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
∙使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.
2.CSS入门例子
∙如果还不了解从输入域名到访问网站的过程,先看看这个吧,网络的运作方式
∙看看猴子为什么学习做网页,猴子买报的故事:
)
你可以先通过这个链接学习一下HTML的入门例子.
CSS入门例子示例--可以尝试编辑
∙定义文字的颜色
∙定义网页的背景颜色
∙定义网页的背景图片
∙定义文字的对齐方式
∙自定义列表样式
∙定于你的鼠标样式
∙定义一个带有颜色的边框
好通过上面的例子有点感觉了吧?
现在开始从头学习入门啦:
<
1>
打开记事本:
点击"
开始"
--选择"
程序"
附件"
记事本"
(或者打开你的Notepad++编辑器)
2>
输入下面代码(直接拷贝过去就可以啦)
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
html>
<
head>
<
title>
欢迎来到梦之都<
/title>
linkrel="
stylesheet"
type="
text/css"
href="
dreamdu.css"
/>
/head>
body>
h1>
欢迎来到梦之都<
p>
这是我的第一个网页,在这里
<
ahref="
尽情学习CSS
/a>
吧!
/p>
/body>
/html>
文件"
保存"
--选择文件类型为"
所有文件"
--文件名输入"
dreamdu.html"
并选择文件保存地址.(记住一定要把文件的后缀存为.html或.htm,否则网页无法显示)
3>
再新建一个文件,输入下面代码(直接拷贝过去就可以啦)
/*段落样式*/
p
{
color:
purple;
font-size:
12px;
}
/*标题样式*/
h1
olive;
text-decoration:
underline;
/*链接样式*/
a:
link
#006486;
visited
{
#464646;
hover
#fff;
background:
#3080CB;
active
white;
#3080CB;
并选择文件保存地址.(记住一定要把文件的后缀存为.css,而且要和dreamdu.html在同一个目录下.)
4>
现在我们可以双击dreamdu.html这个文件.看看效果吧.
怎么样?
五颜六色的吧:
现在解释一下上面的例子
HTML文件就是一个文本文件,HTML文件要在head处加载css样式<
.
CSS文件也是一个文本文件.
代表p标签所包含的内容都是以紫红色color:
12px大小font-size:
的字体显示.
代表h1标签所包含的内容都是以橄榄色color:
带下划线text-decoration:
代表了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
styletype="
@importurl(
相对路径与绝对路径
∙加载文件的时候可以使用相对路径或者绝对路径
∙绝对路径:
文件的完整路径,主页上的文件或目录在硬盘上真正的路径
∙
∙相对路径:
相对于我们查看文档的路径
∙../default.html或者default.html或者../../default.html都是相对路径
双表法
一些老式的浏览器不支持@import方法.网上流传着一种叫双表法的技术,就是利用了一些老式的浏览器不支持@import这个特性.
∙XHTMLstyle标签
∙相对路径和绝对路径
∙W3CThe@importrule
3.2.内部引用CSS--Internal
可以使用style标签直接把CSS文件中的内容加载到HTML文档内部.
[CDATA[
/*----------文字样式开始----------*/
/*梦之都白色12象素文字*/
.dreamduwhite12px
12px;
/*梦之都黑色16象素文字*/
.dreamdublack16px
black;
16px;
/*----------文字样式结束----------*/
]]>
/style>
style标签应该在head标签内部.
3.3.内联引用CSS--Inline
内联引用可以把CSS样式直接作用在HTML标签中.
pstyle="
font-size:
10px;
#FFFFFF;
使用CSS内联引用表现段落.
3.4.CSS选择符--CSS的名字
CSS选择符就是CSS样式的名字,当在HTML文档中表现一个CSS样式的时候,就要用到一个CSS.怎么用呢?
这时就通过CSS选择符(CSS的名字)来指定此HTML标签使用此CSS样式.
选择符语法
选择符名字
声明;
一个CSS选择符就定义了一个样式
比如下面这三个例子
.dreamdublue
blue;
.dreamdu18px
18px;
#dreamdured
red;
dreamdublue和dreamdured都是CSS的选择符,也就是CSS的名字.
选择符取名规则
CSS选择符可以使用英文字母的大写与小写,数字,连字号,下划线,冒号,句号.
∙英文字母大写与小写A-Za-z
∙数字0-9
∙连字号-
∙下划线_
∙冒号:
∙句号.
CSS选择符只能以字母开头.
常用的三种选择符
(我感觉这是初级教程中最难的地方:
∙xhtml标签选择符,比如p标签选择符(代表所有的段落都使用这个CSS样式),比如p{font-size:
}
∙id选择符,唯一性选择符,比如#dreamdured{color:
},就是在名字前增加了一个#,id选择符在一个页面中只能出现一次,在整个网站中也最好出现一次(这样有利于程序员控制此元素,有多个一样名称的元素,就无法分开不好控制了).
∙class选择符,多重选择符,比如.dreamdublue{color:
},就是在名字前增加了一个.,class选择符在一个页面中可以出现多次(注意下面的示例中class选择符的用法).
梦之都xhtml标签选择符<
pid="
dreamdured"
梦之都id选择符<
pclass="
dreamdublue"
梦之都class选择符<
dreamdubluedreamdu18px"
梦之都class选择符2,出现了多次.<
一个p元素使用了两个class选择符,他们之间用空格分开,而且class选择符可以在一个页面出现多次.
CSS选择符示例--可以尝试编辑
oCSS选择符示例
选择符用法总结
id与class选择符在CSS与HTML中的用法总结
CSS中的写法
XHTML中的写法
xhtml标签选择符
p{font-size:
id选择符
#id_selector{font-size:
id_selector"
梦之都<
class选择符
.class_selector{font-size:
class_selector"
CSS选择符还有好多种变化,在CSS高级教程中我再给大家介绍.
oHTMLid属性
oHTMLclass属性
3.5.CSS声明
CSS声明是由"
属性"
"
冒号(:
)"
属性值"
和"
分号(;
组成的.
语法:
属性:
属性值;
∙font-size代表字体大小.
∙12px字体大小的值.
下面介绍两个常用的技巧
1,选择符的名字一样,声明是可以组合的
例如:
声明1;
声明2;
声明3;
可以组合为:
div
与下面的是等价的
2,声明全部一样,选择符的名字也可以组合
选择符名字1
选择符名字2
选择符名字3
选择符名字1,选择符名字2,选择符名字3
.dreamdudivwhite12px
.dreamdudivwhite12px,h1,div
CSS的语法是比较简单的,声明也比较直接,难点是选择符的名字,有很多种变化,高级教程中我将详细介绍.
lightblue;
h1,p,div
border:
1pxsolidblack;
通过上面的示例大家可以看出选择符组合的好处,border:
1pxsolidblack;
这段代码只写了一次,就定义了三种HTML标签,这样使代码更统一,便于以后的修改,减少了代码量.
CSS声明示例--可以尝试编辑
∙CSS声明示例
就像HTML教程中描述的一样,在CSS文档中注释也起到很重要的作用,可以帮助我们记起CSS的含义,加载在HTML文档的位置等.
CSS注释的开始使用/*,结束使用*/
CSS注释语法
/*注释内容*/
.dreamduwhite12px
.dreamdublack16px
∙HTML注释
∙JavaScript注释
4.CSScolor属性--CSS前景色
我们可以为网页上的文字赋予颜色,这就要使用到CSS的前景色.
前景色(foregroundcolor),可以使用color属性表示前景色,前景色通常使用在文字上.
与前景色相对应的是CSS背景色,后面我们将介绍CSS的背景色.
color--前景色定义文字的颜色
∙取值:
color>
|inherit
o<
:
颜色表示法
oinherit:
继承
∙初始值:
依赖于用户的设备
∙继承性:
是
∙适用于:
所有元素
∙引用网址:
black;
span
rgb(50,255,0);
CSScolor属性示例--可以尝试编辑
∙CSScolor属性示例
∙CSSopacity属性示例
∙CSS教程中的属性取值正则表达式介绍
(一)
opacity--不透明度
alphavalue>
透明度取值(取值范围[0.0,1.0])
1(不透明)
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- css 基础知识