CSS核心基础PPT课件
合集下载
css的基本概念ppt课件
风格同时运用*/
</body>
</html>
ID选择器
留意：将ID选择器用于多个标志是错误的，由 于 每 个 标 志 的 ID 不 只 是 CSS 可 以 调 用 ， JavaScript等其他脚本言语同样可以调用。假 设一个HTML中有两个一样的id的标志，将导 致JavaScript在查找id时出错。网站建立者在 编写CSS代码时，应该养成良好的编写习惯， 一个id最多只能赋予一个HTML标志。
</html>
类别选择器
标志名. 类名{ 属性: 值…} 可以经过class选择器和标志选择器配合运用 表示标志名中的class属性为类名的标志符都
采用所定义的款式。
<head>
<title>标志选择器.class</title>
<style type="text/css">
<!--
h3{
}
-->
</style>
</head>
<body>
<h4>一种都不运用</h4>
<h4 class="one">同时运用两种class，只运用第一种</h4>
<h4 class="two">同时运用两种class，只运用第二种</h4>
<h4 class="one two">同时运用两种class，同时运用</h4>
伪类和伪元素 伪类和伪元素是特殊的类和元素，能自动地被 支持CSS的阅读器所识别。伪类区别开不同种 类的元素(例如，visited links(已访问的衔接) 和active links(可激活衔接)描画了两个定位锚 (anchors)的类型)。伪元素指元素的一部分， 例如段落的第一个字母。
第12讲CSS基础知识及设置精品PPT课件
三、页面属性的设置
• 页面属性是用来设置页面标题、页面背景图像或颜色、页 面默认的文本和链接颜色以及页面与网页元素之间的边距。
• 1、设置页面属性的方法： • 1）、选择修改→页面属性。找开设置页面属性外观窗口。
设置外观选项卡： • 字体 指定在网页中使用的默认字体。 • 大小 指定在网页中使用的默认字体大小。 • 文本颜色 指定显示字体的默认颜色。 • 背景颜色 指定页面使用的背景颜色。 • 背景图像 指定页面的背景图像。 • 左边距和右边距 指定左右页边距的大小。 • 上边距和下边距 指定上下页边距的大小。
• 下划线样式 指定了应用于链接的下划线样式。
• 3）、打开并设置“标题”选项窗口。
• 标题字体 指定各标题样式文本使用的字体 • B 字体加粗 • I 字体倾斜 • 标题1—标题6 设置各种标题字体的大小与
颜色
四、利用DW创建CSS
• 创建CSS，可以通过DW中的【CSS样式】 面板进行创建。具体操作如下：1、执行 【窗口】｜【CSS样式】命令，并在弹出 的面板中【新建CSS样式表】；
• <STYLE type="text/css"> • ...... • </STYLE>
外部样式表
• 如果很多网页需要用到同样的样式(Styles)，用什 么方法呢？
• 将样式 (Styles)写在一个以.css为后缀的CSS文件 里，然后在每个需要用到这些样式(Styles)的网页 里引用这个CSS文件。
• 2）打开并设置“链接页面属性”选项窗口。
• 字体 指定链接文本使用的默认字体。
• 大小 指定链接文本使用的默认的字体大小。
• 链接颜色 指定应用于链接文本的颜色。
CSS技术基本概述PPT课件
• 应用样式的场所 称之为p选择符
——也叫做“选择符”
这条CSS语句的作用：
选择页面上的所有<p>元素，
将内容的字体颜色 设置为red
p{ color : red;
}
第11页/共86页
• CSS语句里添加更多样式： • 可以添加若干条样式（属性名、属性值）
这条CSS语句的作用： 将页面上<p>元素的内容 的字体颜色设置为red，大小 设置为32像素;
示例 border-top-style: dashed; border-top-width:5px; border-top-color:green;
border-top: 10px dashed navy;
第36页/共86页
div{ border:5px solid blue; border-top:10px dashed navy;
1.1 CSS定义
• CSS（Cascade Style Sheet）
• 级联（层叠）样式表 • 是由W3C组织制定的一种用来定义样式规则（如字体、颜色和位置）
的语言 • 能让网页制作者有效地定制、改善网页的显示效果
第6页/共86页
1.2 CSS的产生
• HTML中，文本的格式化（样式设置）可以使用一些特定的标记，比如粗体标记<b>，<font>标记等 • 样式标记散落于HTML语言中，使得内容和格式化的代码混杂一起，难以区分。解决方法是改用独立的技
background-color: silver;
示例
第27页/共86页
CSS样式——背景
• background-image：设置元素的背景图像
示例
background-image: url( “” ) ;
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);
3、CSS核心基础
此方式尽量少使用
（或外部样式表）
将CSS样式写在<head>与</head> 之间，并且用<style>和</style>标记进行声明。
<html> <head> <title>页面标题</title> <style type="text/css"> P { color:#0000FF; text-decoration:underline; font-weight:bold; font-size:25px; } </style> </head> <body> <p>这是第1行正文内容……</p> <p>这是第2行正文内容……</p> </body> </html>
根据标签选择元素。
根据class的值选择元素。 根据id的值选择元素。 根据属性选择元素。 同时匹配多个选择器，取多个选择器的并集。 先匹配第二个选择器的元素，并且属于第一个选择器内。 匹配匹配第二个选择器，且为第一个选择器的元素的后 代。 匹配紧跟第一个选择器并匹配第二个选择器的元素，如 紧跟p元素后的a元素。 伪选择器不是直接对应HTML中定义的元素，而是向选 择器增加特殊的效果。
:first-letter 将样式应用到文本的首字符 :first-line 将样式添加到文本的首行 :before 在某个元素前插入内容 :after 在某个元素后插入内容
（1）font-size:字号大小 font-size属性用于设置字号，该属性的值可以使 用相对长度单位，也可以使用绝对长度单位。具 体如下：
《简介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基础篇最全PPT
❖ 规范化HTML文档 例：td{color:#F00;}
CSS是1996年由W3C审核通过，并且推荐使用的。
❖ 引导HTML向XML发展 在HTML中引入CSS的方法
CSS使用多种选择器来确定要定义的HTML标记 设置属性的不同的值来实现不同的显示效果
❖ HTML5草案的发布 多种方式引入CSS时，作用的优先级
❖ 使用内嵌样式
▪ 在HTML中，使用<style></style>标记，将样式写 在<style>标记内
▪ 注意：<style>标记要指定type属性为text/css
在HTML中引入CSS的方法
❖ 使用链接样式
▪ 将CSS写入单独的一个文件中，注意该文件的文 件扩展名为.css
▪ 在HTML文档中使用<link>标记引入css文件 ▪ <link>标记需要指定两个属性：type和rel
CSS标准
CSS（Cascading Style Sheet）中文译为层叠样式表，它是用于控制网页样式并允 许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过， 并且推荐使用的。简单的说，CSS的引入就是为了使HTML语言更好地适应页面的美 工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和 整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打 字机、投影仪和PDA等）来设置不同的样式风格。
第十一讲 C回顾
本讲重点
❖ HTML和XHTML概述 ❖ HTML发展 、HTML的缺点、XHTML出项的原因、HTML与XHTML的
区别、使用DOCTYPE ❖ CSS概述 ❖ CSS的基本概念、CSS与浏览器 ❖ CSS语法规则：选择器{属性，属性值} ❖ CSS属性分类概述 ❖ CSS注释 ❖ CSS选择器 ❖ 标记选择器、类别选择器、ID选择器 ❖ 在HTML中引入CSS的方法 ❖ 行内样式、内嵌式、链接式、导入样式、各种方式的优先级
CSS是1996年由W3C审核通过，并且推荐使用的。
❖ 引导HTML向XML发展 在HTML中引入CSS的方法
CSS使用多种选择器来确定要定义的HTML标记 设置属性的不同的值来实现不同的显示效果
❖ HTML5草案的发布 多种方式引入CSS时，作用的优先级
❖ 使用内嵌样式
▪ 在HTML中，使用<style></style>标记，将样式写 在<style>标记内
▪ 注意：<style>标记要指定type属性为text/css
在HTML中引入CSS的方法
❖ 使用链接样式
▪ 将CSS写入单独的一个文件中，注意该文件的文 件扩展名为.css
▪ 在HTML文档中使用<link>标记引入css文件 ▪ <link>标记需要指定两个属性：type和rel
CSS标准
CSS（Cascading Style Sheet）中文译为层叠样式表，它是用于控制网页样式并允 许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过， 并且推荐使用的。简单的说，CSS的引入就是为了使HTML语言更好地适应页面的美 工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和 整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打 字机、投影仪和PDA等）来设置不同的样式风格。
第十一讲 C回顾
本讲重点
❖ HTML和XHTML概述 ❖ HTML发展 、HTML的缺点、XHTML出项的原因、HTML与XHTML的
区别、使用DOCTYPE ❖ CSS概述 ❖ CSS的基本概念、CSS与浏览器 ❖ CSS语法规则：选择器{属性，属性值} ❖ CSS属性分类概述 ❖ CSS注释 ❖ CSS选择器 ❖ 标记选择器、类别选择器、ID选择器 ❖ 在HTML中引入CSS的方法 ❖ 行内样式、内嵌式、链接式、导入样式、各种方式的优先级
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-` 等。
第六章CSS概述25课件
行内式
行内式式所有样式方法中最为直接的一种，它直 接对HTML的标记使用style属性，然后将CSS代 码直接写在其中。
例如<p style=“color:#ff0000;font-size:20px;”> 欢迎</p>
内嵌式
内嵌式样式表就是将CSS写在<head>与</head> 之间，并用<style>和</style>标记进行声明。
可以看出所有CSS的代码被集中在了同一个区域， 方便了后期的维护。
链接式
链接式CSS样式是使用频率最高，也是最为实用 的方法。它将HTML页面本身与CSS样式风格分 离为两个或多个文件，实现了页面框架HTML代 码与美工CSS代码的完全分离，使得前期制作和 后期维护都十分方便。
语法： <head> <link href=“02.css” type=“text/css”
各 天个 忽相然互间关制定联出的来事的物。要标能准够都协是同在工实作际，应就用必过须程遵 守 中一 ，些经共过同市的场标 的准 竞来 争工 和作 考。 验，经过一系列的研究 ◇讨论“W和e协b标商准之”后也达是成互的联共网识领。域中的标准，实际 上，它并不是一个标准，而是一系列标准的集合。
1.1.1 Web标准
行内元素 对于文字这类元素，各个字母之间横向排列，到最右 端自动折行，这种元素叫“行内元素”。
<div>标记与<span>标记
为了能够更好地理解“块级元素”和“行内元素”，这 里介绍在CSS排版的页面中经常使用的<div>标记和 <span>
<div>（division）简单而言是一个区块容器标记，即 <div>与</div>之间相当于一个容器，可以容纳段落、 标题、表格、图片，乃至章节、摘要和备注等各种 HTML元素。
CSS学习资料.ppt
</head>
<body> <h1>在这里使用了H1标记</h1>
</body>
外 <head>
部 <link rel="stylesheet" href="h1.css"
样
type="text/css"> </head>
式 <body><h1>在这里使用了H1标记</h1></body>
h1.css
#title{color:blue;font-size:12;}
<style type="text/css">
.head{color:red;font-size:20;}
P {text-align:right}
div{color:green;font-size:30;}
</style>
</style>
</head>
</head>
<body >
<body> <div id="title" class="head"> 猜猜是什么样式在起作用
<p style="text-align:center"> 中国 </p>
</div>
</body>
</body>
</html>
</html> 效果演示
效果演示
CSS的属性
<body> <h1>在这里使用了H1标记</h1>
</body>
外 <head>
部 <link rel="stylesheet" href="h1.css"
样
type="text/css"> </head>
式 <body><h1>在这里使用了H1标记</h1></body>
h1.css
#title{color:blue;font-size:12;}
<style type="text/css">
.head{color:red;font-size:20;}
P {text-align:right}
div{color:green;font-size:30;}
</style>
</style>
</head>
</head>
<body >
<body> <div id="title" class="head"> 猜猜是什么样式在起作用
<p style="text-align:center"> 中国 </p>
</div>
</body>
</body>
</html>
</html> 效果演示
效果演示
CSS的属性
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2020年9月28日
13
CSS选择器
元素名
:root :first-child :last-child
:only-child 元素名
::ontnhly-c-ohfi-ldty(np)e::first-line :nth-last-child::(fnir)st-letter :nth-of-type(n::b) efore :nth-last-of-ty::pafet(enr) :link :visited :hover :active :focus :enabled (:disabled) :checked :default :valid (:invalid) :in-range (out-of-range)
}
2020年9月28日
7
初学者在书写CSS样式时，除了要遵循CSS样式规则，还 必须注意CSS代码结构中的几个特点，具体如下：
• CSS样式中的选择器严格区分大小写，属性和值不区 分大小写，按照书写习惯一般将“选择器、属性和值” 都采用小写的方式。
如果属性的值由多个单词组成且中间包含空格，则必 须为这个属性值加上英文状态下的引号。
张飞{ 身高:185cm; 体重:105kg; 性别:男; 性格:暴躁; 民族:汉族;
}
这是定义2级标题CSS样式后的文字效果
2级标题{ 字体:华文云彩; 大小:24像素; 颜色:红色; 装饰:下划线;
}
h2{ font-family:华文云彩; font-size:24px; color:red; text-decoration:underline;
删除线(表示删除)
<center>…</center> 居中文本
<ul>…</ul>
无序列表
<ol>…</ol>
有序列表
<li>…</li>
列表项目
<a href=”…”>…</a> 超链接
<font> <sub>
定义文本字体尺寸、颜色、大小 下标
<sup>
上标
<br>
换行
<p>
段落
2020年9月28日
12
CSS选择器
• 常用的CSS选择器
– CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几
类CSS选择器如下表所示。
选择器
通用选择器 标签选择器 类选择器 id选择器 属性选择器
并集选择器 后代选择器
子代选择器
兄弟选择器
代码
*
示例代码
*{}
元素名称
a{}、body{}、p{}
.<类名>
伪类选择器
伪元素选择器
描述
选择文档中的根元素，通常返回html。 父元素的第一个子元素。 父元素的最后一个子无素。
描述 父元素有且只有一个子元素。
匹配文父匹本元配块素父的有元首且素行只的。有第如一np个:个:f子i指rs元t定-l素i类n。e型表的示元选素中。p元素的首行。 匹配文匹本配内父容元的素首的字倒母数。第n个子元素。 在选中匹元配素父的元内素容定之义前类插型入的内第容n。个子元素。 在选中匹元配素父的元内素容定之义后类插型入的内倒容数。n个子元素。
可见的页面内容 注释
2020年9月28日
2
文本
<h1>...</h1> <b>...</b>
标题字大小（h1~h6） 粗体字
<strong>...</strong> 粗体字(强调)
<i>...</i>
斜体字
<em>...</em>
斜体字(强调)
<u>...</u>
下划线
<del>...</del>
CSS核心基础
2020年9月28日
1
基本
定义 HTML 文档
<html>…</html>
<head>…</head> 文档的信息
<meta>
HTML 文档的元信息
<title>…</title> <link>
文档的标题 文档与外部资源的关系
<style>…</style> 文档的样式信息
<body>…</body> <!--…-->
为了提高代码的可读性，书写CSS代码时，通常会加上 CSS注释。
在CSS代码中空格是不被解析的，花括号以及分号前后 的空格可有可无。因此，可以使用空格键、Tab键、 回车键等对样式代码进行排版，提高代码的可读性。
属性的值和单位之间是不允许出现空格的。
2020年9月28日
8
CSS规则主要由：选择器、属性、属性值3部分组成。
伪选择器
: :<伪元素>或 : <伪类>
p::first-line{}、 a:hover{}
说明
选择所有元素。 根据标签选择元素。 根据class的值选择元素。 根据id的值选择元素。
根据属性选择元素。
同时匹配多个选择器，取多个选择器的并集。
先匹配第二个选择器的元素，并且属于第一个选择器内。
匹配匹配第二个选择器，且为第一个选择器的元素的后 代。 匹配紧跟第一个选择器并匹配第二个选择器的元素，如 紧跟p元素后的a元素。 伪选择器不是直接对应HTML中定义的元素，而是向选 择器增加特殊的效果。
. beam {}
#<id值>
#logo{}
[<条件>] <选择器>,<选择器>
[href ]{}、 [attr=”val”]{}
em,strong{}
<选择器> <选择器> .asideNav li {}
<选伪择器选>择>器比较特殊，分为两 <选择种器>伪元素和伪类u两l>种li{。}
<选择器>+<选择器> p+a{}
3
图形
<img src=’”…”> 定义图像
<hr>
水平线
2020年9月28日
4
1 构造CSS规则 2 基本CSS选择器 3 在HTML中使用CSS的方法 4 本章小结
2020年9月28日
5
层叠样式表 HTML标签定义了网页元素内容 CSS定义了显示的样式
2020年9月28日
6
1 标记选择器 2 类别选择器 3 ID选择器
2020年9月28日
9
标记选择器是声明哪些HTML标记采取哪种CSS样式
声明
声明
h2 { font-size:24px; color:red; }
选择器
属性
值
属性 值
2020年9月28日
10
类别选择器的名称可以由用户自定义，声明时在选 择器名称前加上“.”符号
声明
பைடு நூலகம்
声明
.c { font-size:24px; color:red; }
选择器
属性
值
属性 值
2020年9月28日
11
ID选择器的名称也可以由用户自定义，声明时在选 择器名称前加上“#”符号
声明
声明
#ID { font-size:24px; color:red; }
选择器
属性
值
属性 值
2020年9月28日