版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
CSS定义CSS：
cascading
style
sheet议程CSS发展历史CSS用法常用的CSS属性CSS调试工具未出现CSS之前最初的web设计师使用视觉相关的tag
(如：FONT,
B,
BR,TABLE
etc.)
和
来进行页面的视觉效果设计。任何页面的修改都是一项很枯燥繁琐的工作，因为每个HTML页面都得需要修改。跨浏览器支持也是一项很的任务.CSS是什么？Cascading
Style
Sheets
（层叠样式表）内置HTML的渲染规则：+
=HTML
CSS
W
geCSS用于将具体渲染逻辑从HTML内容中剥离出来。CSS–历史简述Style
sheets
have
existed
in
one
form
oranother
since
the
beginnings
of
SGML
inthe
1970s.In
1996,
CSS
level
1
mendationwas
published
in
December.CSS
level2
was
published
as
a
W3Cmendation
on
May
12,
1998CSS
level3
is
still
under
development.议程CSS发展历史CSS用法常用的CSS属性CSS调试工具CSS
语法样式表的语法:selector
{property:
value}§
选择器{属性名:属性值}§
选择器{属性名1:属性值1;属性名2:属性值2…}其中:§
selector:HTML的§
property:CSS属性名§
value:CSS属性值多个样式属性定义之间用分号“;”隔开(tag
{p1:
v1;
p2:
v2;
…})注：最后一个“；”可有可无。上面四个定义都是合法的例子p
{color:
green}§
使
<p>
中的文本内容采用绿色字体显示p{text-align:
center;
color:
green}§
一起设置多个属性
(<p>
居中对齐，绿色字体)h1,h2,h3,h4,h5,h6,p
{text-align:
center;
color:
green}§
一起为多个
设置相同的样式CSS的属性分类定位与布局相关.背景相关.字体和文本相关相关.列表相关.表格相关.CSS的属性分类（简单方式）显示属性§
display、list-style、position、float、clear盒子属性§
width、height
、margin、padding、border、background文本属性§
color
、font、text-decoration、text-align、vertical-align、white-space、other
text、content13CSS
属性值单词:text-align:center;.数字:数字的后面往往还跟着计量单位名称.font-size:12px;12
是数值，px
是计量单位（在此指“像素”）.§
绝对值–in,
pc,px,cm,mm,pt§
相对值–em,ex,%颜色值:color:#336699
或color#369
或white
或rgb(3,32,3)red
green
blue
范围都是0-255h4
{
background-color:
white;
}p
{
background-color:
#1078E1;
}ul{
background-color:
rgb(
149,
206,
145);
}如何使用CSS（1）行内样式：§可以将css样式表通过
的属性名style直接绑定到某个tag
上<p
style=“color:
red;
background-color:
yellow”>这是黄色背景下的红字.</p>语法：<tag
style="p1:v1;
p2:v2">如何使用CSS（2）页内样式：§
通过style
嵌入到HTML页面中<head><title>Simple
CSS
Test</title><style
type="text/css">h1,h2,h3,h4,h5,h6,p{text-align:
center;
color:
green}p {color:
red;
background-color:
yellow;}h1
{text-align:
center;}</style></head>如何使用CSS（3）外链样式：§
通过link
到外部样式表文件<head><link
href="website.css"
rel="stylesheet"
type="text/css">...</head>文件：website.cssp
{color:
red;
background-color:
yellow;}h1
{text-align:
center;}课堂练习在现在的页面中嵌入样式表§
选择tags ,
改变字体颜色§
在浏览器中重新刷新页面创建一个外部样式表文件§到现有的页面中思考：通过style属性名的直接绑定的方式定义CSS，这种方式有什么缺点？CSS
Class类一个tag不能仅有一种样式§
E.g.<p>
非常常见class类可使一个tag
同时有多种样式§
语法:selector.class
{property:value}p.right
{text-align:
right}p.center
{text-align:
center}用法:<p
class=“right”>本文字向右对齐</p><p
class=“center”>本文字居中对齐</p>Selector选择器和class类都是可选的§
缺selector选择器:将渲染具有指定class类值的全部tag§
缺class类:
将渲染指定tag
的所有实例
相当于
*.classname§
*
是一种特殊的选择器，表示命中所有tag
。例子<html><head><title>Simple
CSS
Test</title><style
type="text/css">.global
{color:
darkred}p
{color:
green}p.center
{text-align:
center}p.right
{text-align:
right}p.left
{text-align:
left}</style></head><body><h1
class="global">Heading
for
this
page</h1><p
class="center">Cool
Main
Title
in
the
Center</p><p
class="left">Interesting
text
on
the
left</p><p
class="right">other
stuff
on
the
right</p><h4>is
this
blue?</h4></body></html>好，先总结一下已经知道了如何使用CSS好处很大–只需一个CSS文件就可以控制站点上的很多页面§
可方便地对
的样式进行更新下面看看有哪些可以设置的CSS属性议程CSS发展历史CSS用法常用的CSS属性CSS调试工具23背景还可以使用CSS属性background
在任何块元素（包括div）上放一个背景图，该块元素下的内容将叠加显示在此背景图上。背景图不是元素的实际内容。背景图可以是…小
：可以横向或者纵向反复平铺充满整个背景区域，或者一个单独的大图：可以填满一个固定大小区域。例给页面加背景<style
type="text/css">body
{background:
url(bgimage.jpg);color:
red;}</style>Background背景CSS属性名描述取值background-atta
ent背景
在屏幕滚动时，是否一起滚动scroll
fixedbackground-color背景颜色color-rgbcolor-#color-nameTransparentbackground-image背景urlbackground-position背景图定位top
righttop
leftcenter
center百分比像素…background-repeat是否平铺repeatrepeat-x…Background-size设置背景
大小（css3)<length>
|
<percentage>
|auto
]{1,2}
|
cover|contain例给页面加全屏背景图<style
type="text/css">body
{background:
url(background-photo.jpg)center
center
cover
no-repeat
fixed;color:
white;}</style>例1<html><head><title>Simple
CSS
Test</title><style
type="text/css">p.bcolor
{background-color:
lightgrey}p.bgimage
{background-image:
url('main_logo.gif');background-position:
center;background-repeat:no-repeat;}</style></head><body><h1>CSS
TEST</h1><p
class="bcolor">This
is
a
simple
test
of
style
sheets</p><p
class="bgimage">This
is
<br>
another
<br>
simple<br>
test
<br>
of
style
<br>
sheets</p></body></html>例2<html><head><title>Simple
CSS
Test</title><style
type="text/css">p.lgrey
{background-color:
lightgrey}p.orange
{text-align:
center;color:
orange;font-weight:
bolder;}body
{background-image:
url('
…/Logo.gif');background-position:
center;background-repeat:
no-repeat;}</style></head><body><h1>CSS
TEST</h1><p
class="lgrey">This
is
a
simple
test
of
style
sheets</p><p
class="orange">This
is
<br>
another
<br>
simple
<br>
test<br>
of
style
<br>
sheets</p></body></html>29使用背景
tips背景
在做页面的板块设计时非常有用，可以将内容划分为构成清晰的图层。对图像的平铺和同一图像在多个地方的复用，都可以极其有效地应用
。只要有可能，背景图应与背景颜色一同使用。30背景图:固定位置（FixedPosition）背景图通常会跟随所在的盒元素和其他页面元素一起滚动（scroll）但是，他们也可以是固定的“fixed”,当其余的内容滚动时，背景图可以一直固定在布局中的同一位置。#sidebar
{float:
right;width:
300px;margin-left:
25px;background-image:
url(images/harbour.jpg);background-atta ent:
fixed;}Border边框CSS属性名描述取值border-color边框颜色colorborder-style边框线型none,
hidden,dotted,
dashed,solid,
double,groove,
ridge,inset,
outsetborder-width四边线型宽度thinmediumThickpxborder-
X-YYYY边框设置X={left,right,
top,bottom}YYYY={color,style,
width}例子<html><head><title>Simple
CSS
Test</title><style
type="text/css">th
{
border-width:
thick;
border-style:
ridge;
}td
{
border-style:
dashed;
border-color:
darkslategray;
}p
{
border-bottom-style:
outset;background-color:
lightyellow;
color:
darkslategray;}</style></head><body><p>CS301
-
Internet
Application
Development</p><table><tr>
<th>Title</th>
<th>Author</th>
<th>Track</th>
</tr><tr>
<td>Foundation
Flash
CS3
for
Designers</td><td>T.
Green,
D.
Stiller</td>
<td>Flash</th>
</tr><tr>
<td>ASP.NET
3.5
Unleashed</td><td>S.
Walther</td>
<td>ASP.NET</th>
</tr></table></body></html>内容区CSS属性名描述取值height高度auto
（默认值）length%width宽度auto
（默认值）length%line-height行高normalnumberlength%例子<html><head><title>Simple
CSS
Test</title></head><body><h1
style="text-align:
center;
color:
darkred">Go
Bucs!</h1><p
style="text-align:
center"><img
src="main_logo.gif"></img></p><p
style="text-align:
center"><img
src="main_logo.gif"
style="width:
50;
height:
50"></img><img
src="main_logo.gif"
style="width:
100;
height:
100"></img><img
src="main_logo.gif"
style="width:
150;
height:
150"></img><img
src="main_logo.gif"
style="width:
200;
height:
200"></img></p></body></html>TextCSS属性名描述取值color文本颜色color-rgbcolor-#color-nametext-align文本对齐方向leftrightcenterjustifyletter-spacing字符之间的宽度normalLengthword-spacing单词之间的宽度normallength例子<html><head><title>Simple
CSS
Test</title><style
type="text/css">p.squish
{letter-spacing:
-5px}p.expand
{letter-spacing:
25px}p.wrdspace
{
word-spacing:
20px}</style></head><body><h1>CSS
TEST</h1><p
class="squish">This
is
a
simple
test</p><p
class="expand">This
is
a
simple
test</p><p
class="wrdspace">This
is
another
simple
test</p></body></html>FontCSS属性名描述取值font-family字体列表，按从高到低顺序执行优先级family-namegeneric-namefont-size字体大小xx-small…xx-largefont-style字体的风格normalitalicobliquefont-variant较小的大写字母风格normalsmall-capsfont-weight字的笔画粗细normalboldbolderlighterfont-size例子<html><head><title>Simple
CSS
Test</title><style
type="text/css">body
{font-family:"Bookman
Old
Style",
Arial,
Helvetica,sans-serif}p.ariel{font-family:黑体}p.code{font-family:
courier}</style></head><body><h1>CSS
TEST</h1><p
class=“ariel”>This
is
a
simple
test
黑体of
stylesheets</p><p
class="code">This
is
a
simple
test
of
style
sheets</p><p>This
is
another
simple
test
of
style
sheets</p></body></html>Lists列表属性CSS属性名描述取值list-style-image条目左侧的标记图noneurllist-style-position左右缩进insideoutsidelist-style-type条目左侧的标记类型none,
disc,
circle,square,
decimal,decimal-leading-zero,lower-roman,upper-roman,lower-alpha,upper-alpha,lower-greek,lower-latin,upper-latin,
hebrew,armenian,
ge
ian,cjk-ideographic,hiragana,
katakana例子<html><head><title>NFL
Standings</title><style
type="text/css">ul{list-style-type:
hebrew
}ul.nfc
{list-style-image:
url('NFC.gif')}ul.afc
{list-style-image:url('AFC.gif')}</style></head><body><h1>NFL
Standings
as
of
21
December
2006</h1>Conferences:<ul><li>NFC<ul
class="nfc"><li>NFC
East</li>
<li>NFC
North</li><li>NFC
South</li>
<li>NFC
West</li></ul></li><li>AFC<ul
class="afc"><li>AFC
East</li>
<li>AFC
North</li><li>AFC
South</li>
<li>AFC
West</li></ul></li></ul></body></html>CSS
Reset
注意事项list-style:none
outside
none解决IE兼容问题§
http:
/jzxy/201006/86007.htmldiv
tag
在样式调整中的作用<div>tag
可以将多个HTML元素合并为一组，对其进行整体定位和渲染。.classes
{position:fixed;width:170px;top:250px;font-style:oblique;}.p rs
{text-align:left;position:relative;left:190px;}<div
class="classes"><p><a
href="#top">top</a>
<br><a
href="#CS374_2008">CS374:
Fal
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 【正版授权】 ISO 14404-2:2024 EN Calculation method of carbon dioxide emission intensity from iron and steel production - Part 2: Steel plant with electric arc furnace (EAF)
- 2024年秋新冀教版物理八年级上册课件 第三章 代数式 3.2.2 列代数式解决简单的实际问题
- 灵璧离婚协议书模板
- 述职报告部队士官履职尽责方面（8篇）
- 湖南省湖南师大附中2024届高三下学期模拟考试（一）政治试题含答案解析
- 人民人寿年金分红险畅享人生培训
- 议论文布局谋篇(ks5u高考资源网)
- 部编九上历史月考卷
- 初三英语听力材料
- 2023年喷洒车辆项目需求分析报告
- (12)益盟操盘手全套指标公式
- 苏教版七年级数学上册知识点(详细全面精华)
- 云计算系统的实现毕业设计
- 教师课程教学质量同行评价表(新)
- 变压器：变压器带电试运签证
- 手卫生依从性PDCA循环管理
- 工程招投标流程图
- 新人教版七年级英语下册：短文填词专练
- 光导照明系统的介绍
- 全季酒店施工方案
- 网球教学计划表
评论
0/150
提交评论