当前位置：文档之家 › CSS样式教程.ppt

CSS样式教程.ppt

  • 格式：ppt
  • 大小：211.01 KB
  • 文档页数：32

下载文档原格式

  / 32

合集下载

CSS样式代码基础教程 ppt课件

CSS样式代码基础教程 ppt课件
<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>

DW第八讲CSS样式.ppt

DW第八讲CSS样式.ppt

创建
1. 打开CSS样式面板(Shift+F11) 2. 单击”新建”按钮
(1). 自定义样式: 作用: – 定义某个特定对象的样式,如一段文本的大小,首行缩进,行距,光标 样式,滤镜效果等. 步骤: – 在名字输入框中输入.name – 在弹出的样式表属性定义对话框中设置. – 设置完成后在样式面板上会出现此样式名称. – 应用: 选中要应用样式的对象,单击面板上的样式名即可. 掌握： – 文字常用9pt大小,20px间距(类型/大小、行高) – 精确首行缩进(区块/文字缩进) • 注意:只能在一个具体空间内部(如在一个单元格或层内)的全体 文本上,或者是一段文本(<p>…</p>)才能应用. – 光标/滤镜(扩展/光标、过滤器)
元素 BODY
说明 网页文档的主体元素，所有的可见范围都在元素内
BUTTON
DIV IMG INPUT MARQUEE SPAN TABLE TD TEXTAREA TFOOT TH THEAD TR
表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式
定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 图片元素，通过指定“src"属性来指定图片的来源 输入表单域 移动字幕效果 定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 表格 表格数据单元格 文本区域 多行输入文本框 表格标题单元格 表格标题 表格行
（2）重定义HTML标签： 作用： – 对HTML标签的重新定义。 步骤： – 在标签列表中选择要重新定义的标签 – 在弹出的样式表属性定义对话框中设置. – 设置完成后自动应用。名称不会出现在样式面板上。 掌握： – 背景图像平铺问题（重定义<body>标签） – 表单元素样式（<input>) – 表格<table>(<td>)、图像<img>等。

css教程 ppt课件

css教程 ppt课件
2.放到 < HEAD> 和 < /HEAD> 中去。 3.整个页面中产生作用，
< 2021/3/26 /HTML>
css教程 ppt课件
5
注意，
1. < STYLE> 标记中包括了 TYPE ＝ “text/css” ， 这是让浏览器知道你是使用 CSS1 样式规则。 2. 加入 < !-- 和 --> 这一对注释标记是防止有些老式 的浏览器不认识样式表规则，可以把该段代码忽略 不计。
少了 < STYLE> 和注释标记。 保存为 example.css 。
2021/3/26
css教程 ppt课件
9
有两种办法可以实现引用外部样式表。 （一）使用 < LINK> 标记链接外部样式表
< LINK REL=STYLESHEET HREF="example.css">
HREF 中应包含路径信息。
2021/3/26
css教程 ppt课件
6
在使用样式表时，经常会有多标志用同一个属性
比如：
B { color: red} I { color: red} H1 { color: red} 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 {color: red}
同一个 HTML 标志，可能定义到多种属性，例如，我们规定把 从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：
定义语法为：
标志.类名 {标志属性：属性值；
标志属性：属性值； …… 标志属性：属性值}
引用方法是： < 标志 CLASS="类名">

[PPT模板]CSS+DIV_教程

[PPT模板]CSS+DIV_教程

:link {color: #000000} :visited {color: #cccccc} :hover {color: #000000; font-style:italic} :active {color: #aaaaaa}
例5-6.htm
Internet与网页设计CSS样式表
12
CSS样式表
selector{property1:value1; property2:value2;…}
需要应用的 样式的内容
样式的属性
样式的属性 的值
Select的五种合法的类别：HTML标记符、用户定义的类 Class、用户定义的ID、虚类和虚元素 P119
Internet与网页设计CSS样式表
9
CSS样式表
选择符的类别
HTML标记符
应用比较多，注意继承性、组合性和关联性（P119）的 应用。
用户定义的类选择1、符 两种定义形式的区
可以使用任何名别 2、称？在命标名签类中。使用类选择 <body>里所有符的样元式素的都使可用以方定式义如“何类”。 语法如下： ？
selector.classname{property1:value1; property2:value2;…} .classname{property1:value1; property2:value2;…}
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
5-2.htm
Internet与网页设计CSS样式表
5
CSS样式表
一、CSS的基本概念
样式的继承：若子元素未定义，则它将继承上级元素的 样式的定义。但存在少数属性不能继承，见P119。

CSS教学课件PPT

CSS教学课件PPT
20
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }

CSS代码学习入门.ppt

CSS代码学习入门.ppt

test.htm
方法三：导入外部样式表文件
<head> <style type="text/css"> <!-@import "style.css"; 其它CSS样式定义 --> </style> </head>
方法四：定义内联CSS样式
内联CSS样式是在某个HTML标记内使用style属 性定义适用于该标签的个别样式。
第六章 使用CSS样式
6.1 CSS样式的基本使用方法 6.2 设置CSS样式属性 6.3 CSS滤镜
退出
CSS（Cascading Style Sheet）样式是 一系列格式设置规则，是用于（增强） 控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言。使用 CSS样式可以非常灵活并更好地控制具 体的页面外观，从精确的布局定位到 特定的字体和样式等。
• Dreamweaver的CSS样式提供了丰富的滤镜 效果，使用这些滤镜能够创建出文本和图像 的3D、阴影和淡入淡出等效果。
例子
CSS滤镜属性只能用在HTML控件元素上。
所谓的HTML控件元素就是它们在页面上定义了 一个矩形空间，浏览器窗口可以显示这些空间。
HTML控件元素包括<body>、<button>、<div> 、<img>、<input>、<marquee>、<span>、 <table>、<tr>、<td>、<th>、<tfoot>、<thead> 和<textarea>。
设置CSS样式属性（类型）

CSS样式课堂讲解-PPT课件


首页 末页 向上 向下 返回 结束
链接外部CSS样式
通过链接外部CSS样式可 将其他网页中的样式应用到当 前网页中。
首页 末页 向上 向下 返回 结束
应用CSS滤镜效果
CSS滤镜是CSS的一个扩展，能把可视化的滤 镜和转换效果添加到一个标准的HTML元素上，使应 用样式的对象产生模糊、反转、发光等特殊效果。 在Dreamweaver 8中，可直接在对话框中添加滤镜的 参数，而不用编写复杂的代码。
首页 末页 向上 向下 返回 结束
方框设置
“方框”设置可以定义控制 元素在页面上的放置方式和属性等。
首页 末页 向上 向下 返回 结束
边框设置
“边框”设置包括定义元素 周围边框的样式、宽度及颜色等。
首页 末页 向上 向下 返回 结束
列表设置
“列表”设置主要用于控制列表内 各项元素的属性，如项目符号类型、项 目符号图像和项目符号位置。
首页 末页 向上 向下 返回 结束
第6章 CSS样式
课堂讲解 上机实战
首页 末页 向上 向下 返回 结束
课堂讲解
CSS样式简介 创建CSS样式 设置CSS样式 管理CSS样式 应用CSS滤镜效果 扩展的CSS支持
首页 末页 向上 向下 返回 结束
CSS样式简介
CSS（Cascading Style Sheets） 样式又叫层叠样式，使用它可以对 网页中的布局元素，如表格、字体、 颜色、背景、链接效果和其他图文 效果实现更加精确的控制。CSS样 式不仅可以在一个页面中使用，而 且可以用于其他多个页面。
首页 末页 向上 向下 返回 结束
类型设置
首页 末页 向上 向下 返回 结束
背景设置

第4章 CSS.ppt

5
CSS设计
1.3 分项声明
如以下声明方式并不会互相抵触，因为所声 明的性质是不同。如果对同样一个性质作了重 复的声明，以后声明的值为准。 标记A{性质名称1: 设定值1; 性质名称2: 设定值 2; } 标记A{性质名称3: 设定值3; 性质名称4: 设定值 4; } TD { COLOR: BLUE; font-size: 30pt} TD { font-family: "Arial"; line-height: 150%}
CSS设计
4.2 文本属性(续)
text-indent 文本缩进属性,设定文本首行缩进。其值有以下 设定方法：长度，可以用绝对单位;百分比，相当 于父对象宽度的百分比。 例： .p1 {text-indent: 8mm} .d1 {width:300px}/*宽度占300像素*/
24
CSS设计
31
CSS设计
4.4 边框属性
border-style 设定上下左右边框的风格，值如下： none (无边框，无论边框宽度设为多大) dotted (点线式边框) dashed (破折线式边框) solid (直线式边框) double (双线式边框) groove (槽线式边框) ridge(脊线式边框) inset (内嵌效果的边框) outset (突起效果的边框)
6
CSS种类
2 CSS按其位置可以分成三种： 内嵌样式(Inline Style) 内部样式表(Internal Style Sheet) 外部样式表(External Style Sheet)
7
CSS设计
2.1 内嵌样式：
将STYLE属性直接加在某别的标记内。 <标记 STYLE="性质1: 设定值1; 性质2: 设定 值2; ...} <TD STYLE="COLOR:BLUE; font-size:30pt; font-family:Arial; line-height:150%"> 优点：可灵巧应用样式于各个标签中 缺点：整篇文件缺乏"统一性"

CSS基础知识学习(含实例)PPT课件


五、CSS 的继承性
❖ 继承性是指：如果某个属性具有继承性，则属性作用在父 元素的同时，也会作用于其包含的子元素。
❖ 常用的具有继承性的属性：
▪ font-family ▪ font-size ▪ font-style ▪ line-height ▪ color ▪ text-align ▪ text-indent ▪ a:link a:visited a:hover a:active
六、层叠和特殊性
❖ 选择符的特殊性分成四个等级：
选择符 行内样式 ID选择符 类选择符、伪类选择符 类型选择符
1000 100 10 1
特殊性
▪ 用行内样式具有最高特殊性。 ▪ “ID选择符”比“类选择符”特殊。 ▪ “类选择符”比“类型选择符”特殊。
六、层叠和特殊性
❖ 练习
选择符
style=“”
二、在网页中应用 CSS
❖ 行内样式：在 HTML 标记的 style 属性中设置 CSS 样式。
例： <html> <head> <title>泡泡潜水俱乐部欢迎你</title> </head> <body> <h1>s泡tyl泡e=潜“c水olo俱r:乐#F部F<F/FhF1>F; background-color: #000080” >泡泡潜水俱乐部</h1> <P>泡泡潜水俱乐部为你量身打造一流的潜水服务，……</p> </body> </html>
例：
body { font: 0.75em/1.5 "宋体"; background: #E0E0E0 url(images/bg.gif);

CSS布局与定位PPT课件


第3章 CSS布局与定位
3.5 外边距（margin）
#outerBox{ margin-top:6px; margin-right:2px; margin-bottom:6px; margin-left:8px;
}
第3章 CSS布局与定位
（1）自动居中 margin属性有一个很实用的功能就是让元素自
margin-bottom:50px margin-top:30px
第3章 CSS布局与定位
3.8 嵌套div尺寸的计算
例：index0107.html
第3章 CSS布局与定位
实验3——元素的父子关系（IE，火狐） ，例：516.html,5-18.html
注意：如果在父元素的宽度或高度小于其子元素的时候，在IE浏览 器中会自动调整宽度或高度的大小，以适应其子元素，而另外一 些浏览器则不会。
第3章 CSS布局中有一个非常重要的属性 position，这个单词要翻译为中文，也是定位的意思， 然而要使用CSS进行定位操作的手段，并不仅仅通过 择个属性来实现，因此不要把把二者混淆。
第3章 CSS布局与定位
static：这是默认的属性值，也就是该盒子按照标 准流（包括浮动方式）进行布局。
第3章 CSS布局与定位
3.3 边框（border）
边框是在见面制作过程中应用最多的一类属性。例 如，在每一行下面都加上一条下画线，就可以完全用 边框来实现。
第3章 CSS布局与定位
常见边框属性
border-color: red green border-width:1px 2px 3px; border-style: dotted dashed border-top border-right border-bottom border-left
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
当有多种位置不同的样式时，如果规定的样式 没有冲突，则叠加；如果有冲突，则最先考虑 行内样式表显示，如果没有，再考虑内嵌样式 显示，如果还没有，最后采用外部样式表显示， 否则就按HTML的默认样式显示；
当有多种选择器样式时，先使用html选择器样 式，再使用类选择器样式，再使用ID选择器样 式，再使用style属性样式。
p:first-letter{font-size:26px; color:#FF0066;}
p:first-line{font-size:26px; color:#FF0066;}
16
3.6 常用的样式属性及值（续）
鼠标的样式Cursor: auto :默认值。浏览器根据当前情况自动确定鼠标 光标类型。 default :客户端系统的默认光标。通常是一个箭头。 hand :竖起一只手指的手形光标。就像通常用户将 光标移到超链接上时那样。 pointer :和 hand 一样。竖起一只手指的手形光标。 就像通常用户将光标移到超链接上时那样。 col-resize :有左右两个箭头，中间由竖线分隔开的 光标。用于标示项目或标题栏可以被水平改变尺寸。 all-scroll :有上下左右四个箭头，中间有一个圆点 的光标。用于标示页面可以向上下左右任何方向滚 动。
重用样式表，不同的HTML文件可以使用同一个CSS样 式文件
可以降低网站的流量费用，不同的HTML文件使用同一 个CSS样式文件，只需下载一次CSS样式文件就可；
由于样式的重用及下载流量的减少可以使页面载入更快； CSS使站点可以更好地被搜索引擎找到； 不同的HTML文件可以使用同一个CSS样式文件，要想
20
3.6 常用的样式属性及值（续）
滚动条
scrollbar-3dlight-color :设置或检索滚动条亮边框颜 色。
2
3.1 CSS带来的好处
改变浏览器的默认显示风格使站点对浏览者和浏览器更具 亲和力，使整个站点保持视觉的一致性
页面内容和显示样式分离，只要建立定义样式的CSS文件， 并且让所有的HTML文件都来使用CSS文件所定义的样 式，如果要改变HTML文件中任意部分的显示风格时， 只要把CSS文件打开，更改样式就可以了
注意：注释不能嵌套。
12
3.6 常用的样式属性及值
字符(font)格式
设置字族科font-family:“宋体”, “黑体”,”仿 宋”;
设置字大小font-size:12px; 设置字风格font-style:normal|italic|oblique; 设置行高line-height:normal(值); 设置粗细font-
color:red; font-size: 24px; } --> </STYLE>
<!--…… -->隐藏标记：避免了因浏览器不支持 CSS而导致错误，加上这些标记后，不支持CSS的 浏览器，会自动跳过此段内容，避免一些错误
8
3.2.2 CSS样式表的分类(续)
外部样式 链接式：可以单独放到一个文件里，这个文件的扩展 名是.css，在使用的时候通过在html页的head里 <link rel=“styleSheet” href=“?” type=“text/css” /> 导入式：也可以通过@import fileName.css引用其 它样式文件，句未一定要加分号。
改变这些页面的显示方式，只改一个CSS样式文件就可 以，所以方便网站维护，使设计师在修改设计时更有效率， 而代价更低。
3
3.2 认识CSS样式
CSS Cascading Style Sheet(层叠样式表)的缩写 <p style=“font-family:黑体;fontsize:20px;color:blue;text-align:center;lineheight:20px”>##########</p>
text :用于标示可编辑的水平文本的光标。通常是大写 字母 I 的形状。
vertical-text :用于标示可编辑的垂直文本的光标。通 常是大写字母 I 旋转90度的形状。
wait :用于标示程序忙用户需要等待的光标。通常是沙 漏或手表的形状。
*-resize :用于标示对象可被改变尺寸方向的箭头光 标。 w|s|n|e|ne|sw|se|nw
not-allowed :禁止标记(一个被斜线贯穿的圆 圈)光标。用于标示请求的操作不允许被执行。
progress :带有沙漏标记的箭头光标。用于标 示一个进程正在后台运行。
18
3.6 常用的样式属性及值（续）
row-resize :有上下两个箭头，中间由横线分隔开的光 标。用于标示项目或标题栏可以被垂直改变尺寸。
weight:normal|bold|bolder|lighter|值; 设置变体font-variant:normal|small-caps;
13
3.6 常用的样式属性及值（续）
font属性是一种复合属性，可以同时对文字设置多 个属性。包括字体族科、大小、风格、加粗及字体 变体。
基本语法： font: font-style font-weight font-variant font-
ID 选择器（#id号） 伪类选择器
设置超链接 a:link a:hover a:visited a:active 选择段元素的首字母或首行进行格式化
▪ P:first-letter ▪ P:first-line 复合选择器 后代选择器 table h1.myCls {……} 组合选择器 table, h1. myCls, p.specia {……}
5
3.2.1样式说明、规则及特征(续)
继承是CSS的一个主要特征，许多 CSS属性不但影响选择符所定义的元 素，而且会被这些元素的后代继承。 例如一个body定义了字符的颜色， 这个颜色也会应用到段落的文本中。
6
3.2.2 CSS样式表的分类
选择器不同
基本选择器 HTML标记 选择器
CLASS 类选择器(.className)
17
3.6 常用的样式属性及值（续）
crosshair :简单的十字线光标。
move :十字箭头光标。用于标示对象可被移 动。
help :带有问号标记的箭头。用于标示有帮助 信息存在。
no-drop :带有一个被斜线贯穿的圆圈的手形 光标。用于标示被拖起的对象不允许在光标的 当前位置被放下。
样式规则 样式表的每个规则都有两个主要部分：选择器（selector）和 声明（declaration）。选择器决定哪些因素要受到影响，声 明由一个或多个属性:值对组成。 基本语法：selector{属性:属性值[[;属性:属性值]…]} 语法说明： selector表示希望进行格式化的元素； 声明部分包括在选择器后的大括号中； 用“属性:属性值”描述要应用的格式化操作； 声明中的多个属性值对之间必须用分号隔开。
url(url) :用户自定义光标。使用绝对或相对 url 地址 指定光标文件(后缀为 .cur 或者 .ani )。
19
3.6 常用的样式属性及值（续）
设置列表的样式
设置列表项所使用的预设标记 List-style-type: 无序列表
disc :默认
size/line-height font-family 语法说明： 如果要利用font属性，同时设置多个文字属性时，属性
与属性之间必须利用空格隔开； 前三个属性次序不定或者省略，默认为normal； 大小和字体族科必须显式地指定，先设置大小，再设置
字体族科，字体族科如果有多个，以逗号分割； 行高必须直接出现在字体大小后面，中间用斜杠分开，
P{ font-family:黑体; font-size:20px; color:blue; text-align:center; line-height:20px;
}
4
3.2.1样式说明、规则及特征
样式就是格式，对于网页来说，像网页显示的文字、图片、段落、 列表等以什么样的方式显示出来。层叠就是指当HTML文件引用 多个CSS样式时，如果CSS的定义发生冲突，浏览器将依据层次 的先后顺序来应用样式，如果不考虑样式的优先级时，一般会遵 循“最近优选原则”。
行高是可选的属性； font属性是继承的。
14
3.6 常用的样式属性及值（续）
设置文本(text)的样式 单词与单词之间的间距Word-spacing:值 字母与字母之间的间距Letter-spacing:值 垂直对齐Vertical-align:值|baseline|sub|super|top|texttop|middle|bottom|text-bottom 水平对齐Text-align:left|center|right|justify 首行缩进Text-index:值 设置字大小写texttransform:capitalize|uppercase|lowercase|none); 设置颜色color:red; 设置字装饰效果text-decoration: underline|overline|line-through|blink|none; 注blink只在非IE中可用。 设置空格字符的处理方式 Whitespace:normal|pre|nowrap 设置是否显示及如何显示 Display:none|block 换行word-wrap ： normal | break-word
有序列表
decimal :默认值，阿拉伯数字 lower-roman :小写罗马数字 upper-roman :大写罗马数字 lower-alpha :小写英文字母 upper-alpha :大写英文字母
none :不使用项目符号 可以把自己制作的图片设为项目符号
list-style-image:url(images/li.gif)
7