版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
css简介
css是什么？
css选择器
css基本语法
css样式
css盒状模型
css的定位
DIV+CSS
5
CSS是什么呢?
CSS是CascadingStyleSheets（级联样式表）的缩写。
CSS是一种样式表语言，用于为HTML文档定义布局。例如，CSS
涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
HTML可以用于为网站添加布局效果，但有可能被误用。而CSS则
提供了更多选择，而且更为精确、完善。现在所有浏览器都支持
CSSo
「HTML是定义网页内容，CSS则是定义内容样式，一般的话,
护样式分离，既可以方便维护，也可以实现代码重用。
◎在HTML中」。何引入CSS（1）
方法1：行内样式表（style属性）
使用HTML属性style
<html>
<head>
vtitle>例子〈/title〉
</head>
<bodystyle="background-color:#FFOOOO;,'>
vp>这个页面是红色的v/p>
</body>
</html>
◎在HTML中如何引入CSS（2）
方法2：内部样式表（style元素）
采用HTML元素style
<html>
<head>
〈title,例子v/title>
<styletype="text/css,,>
body{background-color:#FF0000;}
</style>
</head>
<body>
vp>这个页面是红色的v/p>
</body>
</html>
在HTML中如何引入CSSQ）
方法3：外部样式表（引用一个样式表文件）
外部样式表就是一个扩展名为css的文本文件。
例如，样式表文件名为style.css,它通常被存放于名为style的目录中
O
「1default.htm
Bstyle
<html>
<head>_Jstyle.css
〈title〉我的文档v/title>
<linkrehstylesheet"type="text/css"href="style/style.css”/>
</head>
<body>
html>
在HTML中如何引入CSSQ)
使用Vlink＞这种方法的优越之处在于：多个HTML文档可以同时引用、
•个样式表。换句话说，可以用一个CSS文件来控制多个HTML文档
的布局
\对外部样式表的修
style.css改将影响所有引用
它的HTML文档。
曾言晅11
引用同一个样式表的所有HTML文档
◎在HTML中如何引入CSS。）
外部样式表（引用一个样式表文件）
<html>
<head>
<itle>我的文档</title>
<1inkrel="stylesheet"type="text/css"
href="style.css"/>
</head>
<body>
<h1>我的第一个样式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
◎在HTML中如何引入CSS。）
外部样式表（引用一个样式表文件）
<html>
<head>
我的文档〈/title〉
<1inkrel="stylesheet"type="text/css
href="style.css"/>
</head>
<body>
<h1>我的第一个样式表</h1>
</body>
</html>
body{
background-color：#FF0000；
}
css选择器
selector{property:value
个
值：
选择器：
比如说
表明花括号
background-color
中的属性设
属性的值可以是
置将应用于
“和FOO。。”
哪些元素例如后于设置
HTML代表红色）.
例如徵权）背旻色的属性
ifbackgrc>und-colo『'
标记选择器
每一种HTML标记的名称都可以作为相应的标记选择器的名称。例
如，p选择器就是用于声明中所有<p>标记的样式风格。
<style>
P(
colonred;
font-size:25px;
)
</style>
屋性值屋性值
IIII
hlicolor:red;font-size:14px;}
选择器声明声明
派生选择器
派生选择器的结果是同时选中各个基本选择器所选择的范围。任何
形式的选择器（包括标记，class,id选择器等）都可以作为并集选择器
的一部分。通过依据元素在其位置的上下文关系来定义样式
Iistrong{
font-style：italic；
font-weight：normal；
)
|HTML|
<pxstrong>我是粗体字，不是斜体字，因为我不在列表m
中，所以这个规则对我不起作用</strongx/p>
<ol>
<1i><st「ong>我是斜体字。这是因为strong元素位于Ii
元素内。</strong></1i>
<li>我是正常的字体。</li>
</ol>
css选择器
id选择器
id选择器的使用方法与class选择器基本相同，不同之处在
与id选择器只能在HTML页面中使用一次，针对行更强。
#red{color：red；}
#green{color：green；}
<pid="「ed">这个段落是红色。</p>
<pid="green">这个段落是绿色。</p>
id选择器可以用于多个标记，但是一个id在一个HTML页面中最
多只能赋予一个HTML标记。
选择器为标有特定id的HTML元素指定特定的样式
选择器以来定义
id选择器与派生选择器
id选择器和派生选择器
在现代布局中，id选择器常常用于建立派生选择器
#sidebarp{
font-style：itaiic；
text-align：right；
margin-top：0.5em；
css选择器
类选择器
类别选择器的名称可以由用户自定义，属性和值跟标记选
择器一样，也必须符合css规范。
.center{text-align：center}
<h1class="center">
Thisheadingwi11becenter-aligned
</h1>
<pclass="center">
Thisparagraphwi11alsobecenter-aligned.
</p>
css选择器
类选择器------------------
类选择器
id一样，class也可被用作派生选择器
.fancytd{
color：#f60；
background：#666；
css选择器
类选择器
类选择器
元素也可以基于它们的类而被选择
td.fancy{
color：#f60；
background：#666；
)
<tdclass="fancy">
css选择器
通配选择器)-------------
通配选择器
样式应用于文档中的所有元素
*{property：value)
css选择器
伪类选择器A
伪类选择器
selector：pseudo-cIass{property：value}
HCSS选择器
f伪类选择器)-------------------------------------
、_________y
伪类
锚伪类一链接的不同状态：未被访问状态、已被访问状态、
鼠标悬停状态、活动状态
a：Iink{color：#FF0000}/*unvisitedIink*P
a：visited{color：#OOFFOO}/*visitedIink*/
a：hover{color：#FFOOFF}/*mouseoverIink*/
a：active{color：#OOOOFF}/*selectedIink*/
提示：1＞在CSS定义中，a:hover"必须被置于a:link和a:visited之后，才是有
效的
2、在CSS定义中，a:active必须被置于a:hover之后，才是有效的
3、伪类名称对大小写不敏感
K7T
css基本语法
属性值的单位
绝对量
像素(pixel,px)、英寸(inch,in)、厘米
(centimeter,cm)、毫米(millimeter,mm)、
磅(point,pt)、12点活字(pica,pc)
相对量
em(字母m的高度)、ex(字母x的高度)、%
(百分比)
______________________________________________________________7
ns基本语法
4s基本语法
颜色值
/*英文单词red*/
p{color:#red；}
/*使用十六进制的颜色值#ffOOOO*/
p{color：#ffOOOO；}
/*为了节约字节，我们可以使用CSS的缩写形式*/
p{color:#f00；}
/*我们还可以通过两种方法是用RGB值*/
p{color：rgb(255,0,0)；}
p{color：rgb(1OO%,O%,O%)；}
4s基本语法
记得写引号
/*如果值为若干单词，则要给值加引号*/
p{font-family："sansserif",arial；}
SS基本语法
多重声明
/*若定义不止一个声明，则需要用分号将每个声明分外
最后一条规则不需要加分号，因为分号在英语中是一个分
隔符号，不是结束符号。然而，大多数有经验的设计师会
在每条声明的末尾都加上分号，这么的好处是，当你从现
有的规则中增减声明时，会尽可能的减少出错的可能性*/
p{text-align：center；color：red；}
/*建议在每行只描述一个属性，以便增强可读性*/
P{
text-align：center；
color：black；
font-family：arial；
"S基本语法
格和大小不写敏感
多数规则包含不止一个声明
多重声明和空格的使用使得样式表更容易被编辑
是否包含空格不会影响CSS在浏览器的工作效果，同样，与
XHTML不同，CSS对大小写不敏感
不过存在一个例外：如果涉及到与HTML文档一起工作的
话，class和id名称对大小写是敏感的
body{
color：#000；
background：#fff；
margin：0；
padding：0；
font-family：Georgia,PaIatino,serif；
*s基本语法
选择器的分组
可以对选择器进行分组
这样被分组的选择器就可以分享相同的声明
用逗号将需要分组的选择器分开
h1,h2,h2,h3,h5,h6{
color：green；
}
y
c5s基本语法
颜色与背景
•color
•background-color
•background-image
•background-repeatuuuyi
•background-attachmentbackground-color：#FFCC66；
background-image：
•background-positionurlCbutterfly.gif"）；
•backgroundbackground-repeat：no-repeat；
background-attachment：fixed；
background-position：rightbottom；
}
hi{
color：#990000；
background-color：#FC9804；
}
字体属性
•font-family〃设置字体系列
•font-style〃设置字体风格
•font-variant〃以小型大写字体或者正常字体显示文本
•font-weight//设置字体粗细
•font-size〃设置字符尺寸
简写属性，将有关字体的所有属性设置在一个声明中
P{
font-style：italic；
font-weight：bold；
font-size：30px；
font-family：arial,sans-serif；
css基本语法
文本属性J-----------------
•text-indent〃缩进元素中文本首行
•text-align〃对齐元素中文本
•text-decoration〃向文本添加修饰
•letter-spacing〃设置字符间距
•text-transform〃控制元素中的字母
y
JS盒状模型
超链接属性A
a
color：blue；
text-decoration：none；
}
a：visited{
color：purple；
text-decoration：none；
)
a：active{
background-color：yeIlow；
text-decoration：none；
a：hover
color：red；
text-decoration：none；
*s盒状模型
盒状模型
•span和div元素用于组织和结构化文档，并经常联合class和id属
性一起使用
•用span组织元素
•span元素可以说是一种中性元素，因为它不对文档本身添加
任何东西
•但是与CSS结合使用的话，span可以对文档中的部分文本增
添视觉效果
•用div组织元素
8n的使用局限在一个块元素内，而div可以被用来组织一
或多个块元素
y
盒状模型
border
盒状模型(boxmodel)margin
用于描述一个为HTMLpadding
元素形成的矩形盒子
涉及为各个元素
调整外边距
(margin)、边
框(border)、element
内边距(padding)
内容的具体操
width
边框属性
dotted
•border-width
•border-color
dashed
•border-style
IIIthick
css定位
浮动元素(float)
•可以通过CSS属性float令元素向左或向右浮动
•也就是说，令盒子及其中的内容浮动到文档(或者是上层盒子)
的右边或者左边
—这个管子向左浮动
<-
<-
一Afloatingimage
…这里的空白由后面的盒子填充Istequidemveteresinterponeturhoneste,qui
velmensebreviveltotoestiunioranno.Utor
permisso,caudaequepilesutequinaepaulatim
vellounum,demoetiamunum,dumcadatelusus
Interdumvolgusrectumvidet,estubipeccat.
Siveteresitamiraturlaudatquepoetas,ut
nihilanteferat,nihililliscomparet,errat.
Siquaedamnimisantique,siperaquedure
Interdumvolgusrectumvidet,estubipeccatSiveteresitamiraturlaudatque
poetas,utnihilanteferat,nihililliscomparet,errat.Siquaedamnimisantique
siperaquedure
CSS定位
浮动元素(float)
#picture{
float：left；
width：100px；
)
HTML
<divid="picture">
<imgsrc="bi11.jpg"alt="Bi11Gates">
</div>
<p>causasnaturalesetantecedentes,
idciroetiamnostrarumvoluntatum...</p>
CSS定位
元素的绝对定位
•绝对定位
•position属性的值设为absolute
•相对于最近的已定位祖先或body的精确位置
•如果在祖先元素上添加“pos让ion:relative”，则绝对定位元
素相对于它进行偏移
•否则，元素相对与body进行偏移
css定位
元素的相对定位
相对定位
应将position属性的值设为relative
其位置是相对于它在文档中的原始位置计算而来的
#box_relative{
position：relative；
-------------1
left：30px；
top：20px；
top:20Px$
框1left:30px[框3
I______
框2
用z-index进
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 心理素质训练方法
- 安置拆迁协议书户主是谁
- 三方退股协议书范本
- 大数据与税务管理
- 企业治安防范协议书
- 中学生的行为规范
- 外科：创面感染护理流程
- 慢性肾病防治指南
- 2026湖北咸宁市消防救援支队招录政府专职消防员、消防文员70人备考题库带答案详解（黄金题型）
- 2026黑龙江五大连池市乡镇卫生院招聘医学相关专业毕业生1人备考题库及一套参考答案详解
- 民用建筑外门窗应用技术标准
- 人类辅助生殖技术规范1；2
- 校园活动应急预案模板策划
- 装饰装修工程验收资料表格
- 【教案】伴性遗传第1课时教学设计2022-2023学年高一下学期生物人教版必修2
- 广州地铁3号线市桥站-番禺广场站区间隧道设计与施工
- LY/T 2602-2016中国森林认证生产经营性珍稀濒危植物经营
- GB/T 36024-2018金属材料薄板和薄带十字形试样双向拉伸试验方法
- GB/T 19518.2-2017爆炸性环境电阻式伴热器第2部分：设计、安装和维护指南
- 简化的WHOQOL表WHOQOL-BREF-生活质量量表
- JJG 700 -2016气相色谱仪检定规程-（高清现行）
评论
0/150
提交评论