css快速入门.ppt
合集下载
CSS的样式PPT课件
知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
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>
这种样式表只会对使用它的元素起作用，而不会影响 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>
CSS、bootstrap详解ppt课件
8
2 子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子 元素的元素。 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子 元素，请使用子元素选择器。
h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
所以前面的css样式优先级就不难理解了： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文 件中）。
24
4、重要性 我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权
值，怎么办？这时候我们可以使用!important来解决。
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来 显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习 惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级 为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记 住!important优先级样式是个例外，权值高于用户自己设置的样式。
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
18
外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
hr { color: sienna }
p{ margin-left: 20px }
li + li {font-weight:bold;}
2 子选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子 元素的元素。 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子 元素，请使用子元素选择器。
h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：
所以前面的css样式优先级就不难理解了： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文 件中）。
24
4、重要性 我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权
值，怎么办？这时候我们可以使用!important来解决。
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来 显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习 惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级 为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记 住!important优先级样式是个例外，权值高于用户自己设置的样式。
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
18
外部样式表可以在任何文本编辑器进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
hr { color: sienna }
p{ margin-left: 20px }
li + li {font-weight:bold;}
CSS教程
第四讲CSS 技术4.1 CSS 入门4.2在网页中使用CSS 4.3 CSS样式定义4.4 CSS属性4.5 CSS过滤器效果4.1 CSS 入门4.1.1什么是CSS4.2在网页中使用CSS4.2.1 在标记符中直接嵌套样式信息以下代码显示了在标记符中直接嵌套样式信息的用法，效果如图6-1所示。
图6-1 在标记符中直接嵌套样式信息<HTML><HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE></HEAD><BODY><H1style="font-family:楷体_GB2312;text-align:center">一代人</H1><P style="font-size:24px;text-align:center">黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY></HTML>4.2.2 在STYLE 标记符中定义样式信息以下代码使用了在网页中定义样式信息的方式，效果与图6-1一样。
<HTML><HEAD><TITLE>在标记符中直接嵌套样式信息</TITLE><STYLE><!--P{font-size:24px;text-align:center}H1{font-family:楷体_gb2312;text-align:center}--></STYLE></HEAD><BODY><H1>一代人</H1><P>黑夜给了我黑色的眼睛<BR>我却用它寻找光明</P></BODY></HTML>4.2.3 链接外部样式表中的样式信息4.3 CSS样式定义4.3.1 HTML 标记符<p> <H1> <BODY> 4.3.2 具有上下文关系的HTML 标记符4.3.3 用户定义的类Class4.3.4 用户定义的ID4.4 CSS属性4.4.1 字体与文本属性4.4.1.1 字体属性4.4.1.2 文本属性4.4.2 颜色与背景属性4.4.3 布局属性4.4.3.1 页面元素周围的空白以下示例可以显示出这三种空白的区别，效果如图6-5 所示（A 表示边界、B 表示边框、C 表示填充）。
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="类名">
< 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="类名">
《HTML+CSS基础教程(课件PPT版)》
边框和边缘样式
1
边框样式
学习如何设置元素的边框样式、宽度和颜色。
2
内边距和外边距
了解内边距和外边距的区别，学习如何为元素添加间距。
3
边框圆角
掌握如何为元素的边框添加圆角效果，制作更具吸引力的页面。
标题和列表样式
标题样式
学习如何设置标题的样式，使其与页面风格一致。
列表样式
了解如何使用CSS样式为无序列表和有序列表定制符号 和样式。
4 样式优先级
了解CSS样式优先级的计算规则，学习如何解决样式冲突。
基本标签及其用法
div标签
了解div标签的作用，并学习如何使用它创建容器。
header和footer标签
学习如何使用header和footer标签来定义网页的页 眉和页脚。
span标签
掌握span标签的使用方法，如内联元素的容器。
《HTML+CSS基础教程 （课件PPT版）》
介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择 器，以及它们的基本用法。
HTML基础语法和标签
1 HTML是什么？
2 HTML标签
了解HTML的定义和作用，学 习HTML文档的基本结构。
掌握常用的HTML标签，如标 题、段落、图片、链接等。
ቤተ መጻሕፍቲ ባይዱ
跳转。
3
链接到外部网页
学习如何创建超链接，并链接到其他网页。
下载文件链接
掌握如何创建下载链接，提供文件下载功能。
CSS样式和样式表
1 内联样式
2 内部样式表
3 外部样式表
了解如何在HTML标签内部 添加样式，实现单个元素的 样式设置。
学习如何在HTML文档内部 使用style标签，定义多个元 素的样式。
CSS教程PPT
在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元 素定义特别的 class 或 id，代码更加简洁。
CSS基础
CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生选择器 CSS id 选择器 CSS 类选择器 CSS 属性选择器 CSS 创建
派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在
CSS1 中，称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关 系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但作用都是相同的。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样 定义一个派生选择器：
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数 字 4 拥有最高的优先权。 1，浏览器缺省设置 2，外部样式表,内部样式表（位于 <head> 标签内部） 3，内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先 于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏 览器中的样式声明（缺省值）。
在这里，与页面中的其他 p 元素明 显不同的是，sidebar 内的 p 元素得到 了特殊的处理，同时，与页面中其他所 有 h2 元素明显不同的是，sidebar 中 的 h2 元素也得到了不同的特殊处理。
注意：id 属性只能在每个 HTML 文档中出现一次。
CSS基础
CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生选择器 CSS id 选择器 CSS 类选择器 CSS 属性选择器 CSS 创建
Css详解PPT
外部样式 根据样式文件与网页的关联方式又分为：
链接（LINK ）外部样式表 导入（import）外部样式表样式文件 P
{ ….. }
网页1
网页2
网页3
链接外部样式表
使用LINK（链接）标签 ，语法： <HEAD> <LINK rel = “stylesheet” type = ”text/css” 第一步：创建样式表文件newstyle.css </HEAD> 第二步：把样式文件和网页关联
. myClass { color : #4499ee ; } ID选择器
#title { font-family : "幼圆" }
类别选择器
复合选择器
“交集”选择器 div.divClass {……} div#divId {……} “并集”选择器 div, h1#htitle, p.pClass {……} 后代选择器 div h1#htitle div, h1#htitle, p.pClass {……}
HTML&XHTML
（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存 在三个 主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直 接显示HTML；由于HTML代码不规范、臃肿，浏览器需 要足够智能和庞大才能够正确显示 HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要 发展才能解决这个问题，于 是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁。 （2）XML是web发展的趋 势，所以人们急切的希望加入XML的潮流中。XHTML是当前替 代HTML4标记语言的标准，使用XHTML 1.0，只要你小心遵守一些简单规则，就可以设计出既 适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使 用 XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到 XML。 （3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊， 早期的浏览器接受私有的HTML标签，所以人们在页面设 计完毕后必须使用各种浏览器来检测 页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览 器。 （4）XHTML是能与其它基 于XML的标记语言、应用程序及协议进行良好的交互工作。 （5）XHTML是Web标准 家族的一部分，能很好在无线设备等其它用户代理上。 （6）在网站设计方 面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测 试页面工作的习惯
第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设计
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);
第7章 CSS介绍与基本概念
• .center {text-align:center;} • 你也可以指定特定的HTML元素使用class。在以下实例中, 所有的 p 元素使用
class="center" 让该元素的文本居中: • p.center {text-align:center;} • 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
选择器
• STYLE属性
• 尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只 具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或 多个CSS声明。
• 通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的 STYLE元素内（或在外部进行链接）。但是，使用STYLE属性能够绕过样式表将声明直接放置到文 档的开始标记中。
• ②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属 性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
语言基础
• ③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如 white-space属性就只适用于块级元素。white-space属性可以取normal、pre和 nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一 个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续 的空白字符被忽略，而且不自动换行。
（3）多页面应用
• CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上 不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
class="center" 让该元素的文本居中: • p.center {text-align:center;} • 注意：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
选择器
• STYLE属性
• 尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只 具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或 多个CSS声明。
• 通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的 STYLE元素内（或在外部进行链接）。但是，使用STYLE属性能够绕过样式表将声明直接放置到文 档的开始标记中。
• ②该属性的默认值（initial value）。当在样式表单中没有规定该属性，而且该属 性不能从它的父级元素那儿继承的时候，则浏览器将认为该属性取它的默认值。
语言基础
• ③该属性所适用的元素（Applies to）。有的属性只适用于某些个别的元素，比如 white-space属性就只适用于块级元素。white-space属性可以取normal、pre和 nowrap三个值。当取normal的时候，浏览器将忽略掉连续的空白字符，而只显示一 个空白字符。当取pre的时候，则保留连续的空白字符。而取nowrap的时候，连续 的空白字符被忽略，而且不自动换行。
（3）多页面应用
• CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上 不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
《简介CSS技术》PPT课件
• CSS的基本属性主要包括背景属性、文本属 性、字体属性、边界属性、边框属性、边 距属性、列表属性和定位属性等。
• CSS中有关背景的属性有对背景颜色的设置属性和对 背景图片的设置属性，主要包括 ：
• background-color 用于设置背景颜色，其属性设置语 法为： background-color：颜色 | transparent • background-image 用于设置要加载的背景图片，其属 性设置语法为： background-image：url(背景图片的地址) | none • background-repeat 用于设置背景图片的排列方式，其 属性设置语法为： background-repeat：repeat | repeat-x | repeat-y | no-repeat
• CSS中主要使用margin属性来控制元素边界与网页 其他内容的水平和垂直间距（百分比和数值）。 其属性设置语法为：
• • • • margin：距离（四个方向一样） margin：距离1（上下） 距离2（左右） margin：距离1（上） 距离2（左右） 距离3（下） margin：距离1（上） 距离2（水平右） 距离3（下） 距离4（水平左） 距离可以为具体数字或百分比。
• 将网页的内容结构和格式控制分开。 • 可以精确控制页面的所有元素。 • 页面显示效果更加丰富。 • 支持多种浏览器。
CSS定义的基本语法格式为： 选择符{规则列表}
• 选择符是指要使用该样式的对象（我们将在3.2.3节详细 介绍），它可以是一个或多个HTML标记、ClASS选择符或 ID选择符，如果为多个则使用逗号“,”进行分隔。 • 规则列表是由一个或多个属性定义语句组成的样式规则， 各语句间使用分号“;”进行分隔。 • 属性定义语句的语法格式为：“属性名：属性值”。 • 如：h3{font-family:隶书;color:blue} • h2,h3{font-family:宋体;color:red } • myfont{font-size:20pt} • #myfont{font-size:20pt}
css课件
多列布局
多列布局允许您创建多列的页 面布局。
您可以使用CSS的多列属性（ column-count、columnwidth、column-gap等）来定 义列数、列宽和列间距。
多列布局常用于创建杂志、报 纸等类型的页面布局。
04
CHAPTER
CSS动画与过渡效果
动画效果
01
02
03
关键帧动画
通过定义关键帧，可以创 建复杂的动画效果。
背景大小
使用`background-size`属性设置背景 图片的大小，可以指定具体的像素值 或使用相对单位。
背景图片
使用`background-image`属性设置 背景图片，可以指定图片路径或使用 URL。
背景位置
使用`background-position`属性设 置背景图片的位置，可以指定像素值 或使用位置关键词（如`top`、 `bottom`、`left`、`right`等）。
文字效果
通过text-align、text-transform、text-decoration等属性，控 制文本的对齐方式、大小写和装饰效果。
响应式网页设计
媒体查询
通过媒体查询（media query） 技术，根据不同设备的屏幕尺寸 和分辨率，应用不同的CSS样式
。
弹性布局
使用flexbox或grid布局，实现元 素的灵活排列和分布。
流式布局
使用百分比宽度等流式布局技术， 实现元素的自适应布局。
06
CHAPTER
CSS常见问题与解决方案
CSS兼容性问题
不同浏览器对CSS属性的 支持程度不同，导致页面 显示效果不一致。
使用CSS3特性时，添加浏 览器前缀，如 `-webkit-` 、`-moz-`、`-ms-` 等。
[PPT模板]CSS+DIV_教程_OK
![[PPT模板]CSS+DIV_教程_OK](https://img.taocdn.com/s3/m/017f42f3de80d4d8d05a4f24.png)
</STYLE>
作为选择符。
</HEAD>
5-1.htm
CSS样式表
4
一、CSS的基本概念
• 3、CSS样式的组合、继承和关联性 样式的组合：把具有相同声明定义的选择符组合在一 起，并用逗号隔开。 －例如：段落元素p、单元格元素td和类c1可以使用相同样式：
p,td,.c1{font-size:12pt;font-family:黑体;color:red}
CSS样式表
23
鼠标属性
• 让鼠标移到不同对象上面，显示不同形状。 – Cursor属性，取值如下 • Auto：自动按默认显示 • Crosshair：“＋” • Hand:手形 • Text：文本I形 • Wait：等待 • ……
CSS样式表
24
练习：
• 1、若要在网页上使用使用统一的页面风格： – 背景为浅蓝灰色（#cdcdfe）， – 文本为深蓝色（#000066）， – 所有网页都不留边(Margin)， – 且列表项目、表格及段落文本中的字体均为10.5pt；颜色：绿色；文本对 齐：居中；字体：楷体,Times New Roman；文字格式：加粗。
CSS样式表
7
一、CSS的基本概念
• 4、注释
➢ CSS文字的注释形式与C语言类似。
p{font-size:12pt} /*P标签的样式定义*/
CSS样式表
8
一、CSS的基本概念
• 5、选择符
➢ 样式表的基本语法形式：
selector{property1:value1; property2:value2;…}
CSS样式表
25
练习：
• 2、编辑一个外联样式表，它使所有网页中表格的文本显示为如下风格： – 文字大小：10.5pt; – 颜色：绿色； – 文本对齐：居中； – 字体：楷体 – 文字格式：加下划线
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS快速入门 1. CSS样式面板
2.属性面板
3. CSS布局可视化助理
选择符 1.类选择符 .center
2.标签选择符
写入center便行
3. ID选择符
于ID中定义:如输入P#title01,确定。 如：定义了#title01{ }
运用为:<p id=“title01”>XXXX</P>
DIV为:
#divright { background-color: #FFF5CE;
height: 250px; width: 250px; border: 10px solid #FFCC00; margin-left: 300px; }
均用绝对方式表示：
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; position: absolute; left: 10px; top: 12px; }
利用CSS定位属性也可以实现两列自适应布局:
#divleft { background-color: #FFCC66; float: left; height: 250px; width: 30%; position: relative; }
#divright { background-color: #FFF5CE; height: 250px;
运用为: <div id=“div3”> ……. </div>
CSS布局 插入两DIV
设置2 #div1 #div2
定位属性:有相对…… 在定位内
浮动属性:
在方框内的浮动。
单行单列结构:
1.宽度固定
建一个#main01的DIV。
#main01 { background-color: #F2FAD1; height: 250px; width: 250px; border: 10px solid #CCFF00; }
5.标签指定式选择符 在高级中定义: 如:h1.words{…..}为所有class为words的h1标签设置样式。 H1#navbar{…..}为所有id为navbar的h1标签设置样式。
6.包含选择符 在高级中定义: 如:table a{…..}表示table标签内的a对象的样式。
7.选择符组 高级中定义: 如:h1,h2,h3,h4,h5,h6{color:#0000FF} 每个标题元素均为该值。
#divright { background-color: #FFF5CE; height: 250px; width: 250px; border: 10px solid #FFCC00; margin-left: 300px; position: absolute; }
两列自适应宽度
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 25%; border: 10px solid #CCFF00;
#divright { background-color: #FFF5CE; float: left; height: 250px; width: 250px; border: 10px solid #FFCC00;
}
Position、left、top为在定位中设。类型、定位..
可定义DIV为:
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; position: absolute; left: 10px; top: 0px;
如下:
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 25%;
} #divright {
background-color: #FFF5CE; height: 250px; width: 75%;
float: right; }
2.宽度自适应
方框内设宽%。
#main01 { background-color: #F2FAD1; height: 250px; width: 75%; border: 10px solid #CCFF00; }
3.单列居中 方框中设置。-边界。
#main01 { background-color: #F2FAD1; height: 250px; width: 75%; border: 10px solid #CCFF00; margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px;
8.组合选择符 于高级中设置
如:a img{……},在高级中输入a img
A 标签上的所有img标签的样式。 #topbar .words{…….}
Id为topBar的标签一的所在有class为words的标签的样式。
属性面板:慢慢了解吧。
背景 区块 方框 边框 列表 定位 扩展
CSS盒模型
如在高级中定义了#div3 #div3{…………………}
margin: 10px; } #divright { background-color: #FFF5CE; height: 250px; width: 60%; border: 10px solid #FFCC00; margin: 10px; float: right; }
布满浏览器的效果,避免使用边框和边界属性。
}
二列式布局
1.二列固定宽度
建两DIV
Float为在方框中设置。Border为在边框中设置。
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; }
2.属性面板
3. CSS布局可视化助理
选择符 1.类选择符 .center
2.标签选择符
写入center便行
3. ID选择符
于ID中定义:如输入P#title01,确定。 如：定义了#title01{ }
运用为:<p id=“title01”>XXXX</P>
DIV为:
#divright { background-color: #FFF5CE;
height: 250px; width: 250px; border: 10px solid #FFCC00; margin-left: 300px; }
均用绝对方式表示：
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; position: absolute; left: 10px; top: 12px; }
利用CSS定位属性也可以实现两列自适应布局:
#divleft { background-color: #FFCC66; float: left; height: 250px; width: 30%; position: relative; }
#divright { background-color: #FFF5CE; height: 250px;
运用为: <div id=“div3”> ……. </div>
CSS布局 插入两DIV
设置2 #div1 #div2
定位属性:有相对…… 在定位内
浮动属性:
在方框内的浮动。
单行单列结构:
1.宽度固定
建一个#main01的DIV。
#main01 { background-color: #F2FAD1; height: 250px; width: 250px; border: 10px solid #CCFF00; }
5.标签指定式选择符 在高级中定义: 如:h1.words{…..}为所有class为words的h1标签设置样式。 H1#navbar{…..}为所有id为navbar的h1标签设置样式。
6.包含选择符 在高级中定义: 如:table a{…..}表示table标签内的a对象的样式。
7.选择符组 高级中定义: 如:h1,h2,h3,h4,h5,h6{color:#0000FF} 每个标题元素均为该值。
#divright { background-color: #FFF5CE; height: 250px; width: 250px; border: 10px solid #FFCC00; margin-left: 300px; position: absolute; }
两列自适应宽度
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 25%; border: 10px solid #CCFF00;
#divright { background-color: #FFF5CE; float: left; height: 250px; width: 250px; border: 10px solid #FFCC00;
}
Position、left、top为在定位中设。类型、定位..
可定义DIV为:
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; position: absolute; left: 10px; top: 0px;
如下:
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 25%;
} #divright {
background-color: #FFF5CE; height: 250px; width: 75%;
float: right; }
2.宽度自适应
方框内设宽%。
#main01 { background-color: #F2FAD1; height: 250px; width: 75%; border: 10px solid #CCFF00; }
3.单列居中 方框中设置。-边界。
#main01 { background-color: #F2FAD1; height: 250px; width: 75%; border: 10px solid #CCFF00; margin-left: auto; margin-top: 0px; margin-right: auto; margin-bottom: 0px;
8.组合选择符 于高级中设置
如:a img{……},在高级中输入a img
A 标签上的所有img标签的样式。 #topbar .words{…….}
Id为topBar的标签一的所在有class为words的标签的样式。
属性面板:慢慢了解吧。
背景 区块 方框 边框 列表 定位 扩展
CSS盒模型
如在高级中定义了#div3 #div3{…………………}
margin: 10px; } #divright { background-color: #FFF5CE; height: 250px; width: 60%; border: 10px solid #FFCC00; margin: 10px; float: right; }
布满浏览器的效果,避免使用边框和边界属性。
}
二列式布局
1.二列固定宽度
建两DIV
Float为在方框中设置。Border为在边框中设置。
#divleft { background-color: #F2FAD1; float: left; height: 250px; width: 250px; border: 10px solid #CCFF00; }