Download presentation
Presentation is loading. Please wait.
1
网页样式表CSS 1. CSS的特点和用途 2. CSS的基本语法 3. CSS的网页使用方法 4. CSS的优先级 5. CSS的属性单位
7. <div>与<span>标记 8. 列表标记 9. CSS布局和定位
2
1. CSS的特点和用途 样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。
CSS（Cascading Style Sheets）,层叠样式表单，简称样式表，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 样式就是格式，在网页中，文字的大小、色彩及图片位置等，都是设置显示内容的样式。 层叠是指在HTML文档中引用多个定义样式的样式文件（CSS文件）时，若多个样式文件间所定义的样式发生冲突，将依据层次顺序处理。
3
2. CSS的基本语法 CSS控制网页外观（网页样式）是由一系列规则组成，包括构成、选择符（selector）等。
其实，选择符就是某一个样式的名称。当HTML文档中某个元素要使用该样式时，必须使用该名称选择样式。 样式表文件是文本文件，和编写xhtml文件一样，可以用任何可以编写文本文件的编辑器进行编写。也可以嵌在xhtml文件中。 与 XHTML 不同，CSS 对大小写不敏感。
4
CSS的定义由三部分构成：选择符（selector）、属性（properties）和属性的取值（value）。 基本格式如下：
选择符 {属性1: 属性值1; …属性n:属性值n} 如果值包括多个单词, 则用双引号括起来 p {font-family: "sans serif“}
5
选择符的基本类型 标签选择符 ID选择符 类选择符 特殊选择符 除了基本类型外，还可以把基本类型的选择符组合或者包含进行使用。
6
类(class)选择符 作用：可以为一种HTML标记定义不同的样式或者为不同的标记定义相同的样式 格式：
标记.类名称 {属性:属性值; 属性:属性值 …} .类名称 {属性:属性值; 属性:属性值 …} 使用方法： <标记 class=“类名称"> 实例
7
ID选择符 <标记 id=“id名"> 作用：为HTML标记设定单独的样式 格式：
使用方法： <标记 id=“id名"> 实例
8
组合选择符（并集） 包含选择符（后代） 将多个选择符以逗号隔开归为一组
如， h1,h2,h3,h4,h5,h6 {color: green} 包含选择符（后代） 选择符还可以有包含关系 如， p b { font-weight:bold;}
9
特殊选择符 作用：又称为伪选择符，对链接在不同状态下定义不同的样式效果 格式： a:hover {color: #00FF00} 实例 9
10
属 性 说 明 a:link 超链接的普通样式，即正常浏览状态的样式 a:visited 被点击过的超链接的样式 a:hover
属 性 说 明 a:link 超链接的普通样式，即正常浏览状态的样式 a:visited 被点击过的超链接的样式 a:hover 鼠标指针经过超链接时的样式 a:active(较少用) 在超链接上点击时，即“当前激活”时超链接的样式 设定基本顺序 严格按照上述的顺序进行，否则可能效果显示不正确
11
3. CSS的网页使用方法 Dreamweaver中使用CSS样式： “窗口”|“CSS样式”命令。 CSS的创建 CSS的调用
11
12
小结 Css定义样式的基本格式 Css选择符的类型 网页中使用css样式的方法 如何定义和使用id选择符和类(class)选择符
以下定义的含义: P.first #first #front img
13
3. Css的网页使用方法 前面讲述了样式的几种选择符的定义方式，那么如何在网页中引用这些定义了不同样式的选择符，以美化网页内容呢，有四种方法可以做到： 样式表内嵌HTML文件中 样式表内联到HTML文件行中 外部样式表链接到HTML文件中 外部样式表导入到HTML文件中
14
<head></head>
方法 格式 位置 范围 内部样式 <style type="text/css"> <!-- 选择符1{属性:属性值; …} > </style> <head></head> 整个xhtml文档 行内样式 <标记 style=“属性:属性值; …”> 定义的标记内 定义的标记 链接外部样式 <head> … <link rel="stylesheet“ href=“ outerstyle.css" type="text/css" /> … </head> 多个网页 导入外部样式 <style type="text/css"> <!-- @import url("outerstyle1.css"); 其他样式表的声明 -->
15
5. CSS的属性单位 长度、百分比单位 进行文字、排版、边界等设置时，常常会在属性值后加上长度单位或者百分比单位。 1．长度单位
相对长度单位是指以该属性前一个属性的单位值为基础，来完成目前的设置。 绝对长度单位，将不会随着显示设备的不同而改变。 由于相对长度单位确定的是一个相对于另一个长度属性的长度，因而它能更好地适应不同的媒体，所以是首选的。
16
长度、百分比单位 2．百分比单位 百分比单位也是一种常用的相对类型。百分比值总是相对于另一个值来说的，该值可以是长度单位或其他单位。每一个可以使用百分比值单位指定的属性，同时也自定义了这个百分比值的参照值。在大多数情况下，这个参照值是该元素本身的字体尺寸。 并非所有属性都支持百分比单位。 一个百分比值由可选的正号“+”或负号“”，接着一个数字，后跟百分号“%”组成。例如， p{ line-height: 150% } /* 本段文字的高度为标准行高的1.5倍 */ 注意：CSS中值为0时可以不带单位，其它时候都必须带单位
17
色彩单位 1．用十六进制数表示色彩值 2．用rgb函数表示色彩值
格式为：rgb(R,G,B)。三个参数可取正整数值或百分数值，正整数值的取值范围为0～255，百分数值的取值范围为色彩强度的百分比0.0%～100.0%。例如， div { color: rgb(12%,200,50%) } 3．用色彩名称表示色彩值 CSS只提供了16种色彩名称。例如， div {color: red }
18
6. CSS的常用属性 类型属性：设置文字外观 背景属性：设置网页元素的背景颜色或背景图像 区块属性：设置段落文本的格式
方框属性：设置块级元素的尺寸、填充大小、空白边尺寸及其浮动位置 边框属性：设置方框的边框粗细、颜色及线条样式 列表属性：设置列表项目符号类型以及缩进方式 定位属性：设置块元素定位方式和显示方式 扩展属性: 设置打印页面时分页、鼠标样式和滤镜特殊效果
19
margin:外边距可以是负值，而且在很多情况下都要使用负值的外边距。百分数是相对于父元素的 width 计算的 。
border: display： padding:可以设置长度值或百分比值，但不允许使用负值。百分比值是相对于其父元素的 width 计算的 。上下内边距与左右内边距一致，也会相对于父元素宽度设置，而不是相对于高度。 cursor:
20
盒子 (容器) 盒子里由外至里依次是： margin 边距,默认是透明的 border 边框 padding 间隙 (也有人称做补丁)
content (内容，比如文本，图片等) CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。 CSS 边框属性 (border) 用来设定一个元素的边线。 CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。 CSS 背景属性指的是 content 、 padding和border 区域。 CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
21
Float（浮动）的使用 Position(定位)的使用 格式：Float：none|left|right
通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列 格式：Float：none|left|right 作用：能将一个对象周围用文字包裹，不仅能包裹图像、表格，还能包裹整块的文字 格式：Clear：none|left|right|both 作用：不允许有浮动对象的边 Position(定位)的使用
22
body ul li li li
23
属性的快捷方式 比如：margin设置边距属性 margin: auto | length
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。 body { margin: 36pt 24pt 36pt 25pt;} 如果只提供一个，将用于全部的四边。 body { margin: 11.5%; } 如果提供两个，第一个用于上－下，第二个用于左－右。 body { margin: 36pt 24pt;} 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。 body { margin: 36pt 24pt 36pt;}
24
颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000; #f2f2f2是不可以缩写的 盒模型的边框 border-width:1px; border-style:solid; border-color:#000; 可以缩写为一句： border:1px solid #000; 背景 background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0; background:#f00 url(background.gif) no-repeat fixed 0 0;
25
字体 font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif; 可以缩写为一句： font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif; 注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。 列表 list-style-type:square; list-style-position:inside; list-style-image:url(image.gif); list-style:square inside url(image.gif);
26
7. <div>与<span>标记
块标记，用来定义网页上的一个特定区域，在该区域的范围内可包含文字、图片、表格、窗体及其他<div>标记等。在<div>标记内的所有内容都将调用此标记所定义的样式，且区域与区域之间是彼此独立的。在定义区域间使用不同样式时，可使用<div>标记。格式为： <div id="样式名">...</div> <div class="样式名">...</div> 使用<span>标记 行标记，也用来定义区域，但一般用于网页中某一个小问题段落，其格式为： <span id="样式名">...</span> <span class="样式名">...</span> Span不可以设置宽度，但是可以设置行高
27
8. 列表标记 无序列表标记 有序列表标记 格式化的列表标记（DL、DT、ＤＤ）
<ul type=“符号类型”> <li type=“符号类型1”>第一项</li> … </ul> Type的取值：disc，circle，square 有序列表标记 <ol type=“符号类型”> <li type=“符号类型1”>第一项</li> … </ol> Type的取值：1，A，a，I，I 可以自身嵌套，也可以彼此嵌套 格式化的列表标记（DL、DT、ＤＤ） 28
28
实例:CSS制作导航菜单 <ul type=“符号类型” > <li>第一项
<li>第一项一一</li> </ul> </li> <li>第一项二</li> </li> <li>第二项</li> 实例:CSS制作导航菜单 29
29
普通流 9. CSS布局和定位 默认的定位。各标签在页面上的位置是由标签在html代 码中的位置和自身的属性（块级标签或者内联标签）决定的。
块级标签水平方向自适应浏览器宽度,垂直方向:自动换行
30
定位 相对定位无论是否移动，元素仍然占据原来的空间；
绝对定位不占据空间，绝对定位的标签位置相对于最近 已定位的父标签，如果不存在，则相对于body； IE中如果相对于右(right)和底部(bottom)设置绝对定位，需要确定相对定位的框设置了尺寸。
31
定位(相对定位)
32
定位(绝对定位)
33
浮动 当元素浮动时，它将不再处于文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框。 块级元素float以后就没有默认的100%宽度。
浮动元素脱离文档流，包含图片和文本的div不占据空间，所以要在这个div的某个地方清除浮动。
34
浮动
37
清除浮动(clear) 根据浮动的特点,会产生环绕的效果,但是当不需要环绕时可以通过清除属性还原块的基本属性.
39
父容器不能自适应高度的解决方法: 1.设定高度 2.设定overflow 和zoom属性
40
布局方式 两列定位布局 三列定位布局 container 设置 position : relative属性。 一列设置宽度或边距，让开空间。
另外一列绝对定位。 三列定位布局 一列设置宽度和边距，让开空间。 另外两列绝对定位。
41
布局 练习 一列固定宽度 一列宽度自适应 二列固定宽度 二列宽度自适应（分左右） 两列右列宽度自适应 三列浮动中间列宽度自适应 高度自适应
42
<a onclick="this. style. behavior='url(#default#homepage)';this
<a onclick="this.style.behavior='url(#default#homepage)';this.setHomePage(' href="#">加为首页</a> a href="javascript:window.external.AddFavorite('
43
圆角框 简单
44
宽高自适应
45
滑动门技术
Similar presentations
