CSS美化元素
标签及
的使用
CSS概述及其基本语法
为HTML文档添加CSS样式的方式
CSS的常用选择器
使用CSS美化网页样式
字体、文本、超链接、列表、背景
盒子模型及其构成
浮动布局网页
定位布局网页
CSS概述及其基本语法
为HTML文档添加CSS样式的方式
CSS的常用选择器
使用CSS美化网页样式
字体、文本、超链接、列表、背景
盒子模型及其构成
浮动布局网页
定位布局网页
认识CSS
标签及
的使用
使用举例：
作用：可用作文本的容器，能让某几个文字或者某个词语凸显出来
行内元素
使用举例：
作用：可以把文档分割为独立的、不同的部分；排版网页内容；网页布局
块级元素
使用举例：
提示：请注意合法性.
作用：可用作文本的容器，能让某几个文字或者某个词语凸显出来
行内元素
使用举例：
网页内容…
作用：可以把文档分割为独立的、不同的部分；排版网页内容；网页布局
块级元素
CSS是什么及其作用
CSS概念
Csacading Style Sheet 级联样式表
表现HTML文件样式的计算机语言
样式定义如何显示HTML元素
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
CSS优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
CSS的基本语法
选择器{
声明1;
声明2;
......
}
声明：属性:值
span{
font-size:12px;
color:#F00;
}
经验
CSS的最后一条声明后的“;”可写可不写，但是，基于W3C标准规范
考虑，建议最后一条声明的结束“;”都要写上
在网页如何使用CSS
CSS代码写在<head>的<style>标签中
<style>
span{color:green}
</style>
CSS注释以“/*”开始，以“*/”结束
行内元素和块元素转换
display属性的使用
简单使用CSS实现
控制元素的显示和隐藏
块级元素与行内元素的转变
display值 说明
none 设置元素不会被显示
inline 元素会被显示为内联（行内）元素
block 元素会被显示为块级元素
inline-block 行内块元素
<html>
<head>
<!---->
<title>div与span</title>
<style>
/*添加CSS样式：span凸显出来*/
span{
/*字体、颜色*/
font-size: 12px;
color: red;
/*span隐藏*/
/*display: none;*/
/*span由行内元素转换为块级元素*/
/*display: block;*/
/*span转换为行内块元素*/
display: inline-block;
}
div{
/*div由块元素转换为行内元素*/
display: inline;
}
</style>
</head>
<body>
<span>第一个span</span>
<span>第二个span</span>
<p>欢迎访问网站，您好，请登录，<span>免费注册</span></p>
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>
总结
借助display属性可转换行内元素及块元素
block和none：二级菜单展示、TAB切换、焦点图轮播
inline和inline-block：使用列表制作横向导航、菜单等
引入CS
CSS代码写在的
在网页中引入CSS的三种方式
内部样式表
CSS代码写在<head>的<style>标签中
行内样式
使用style属性引入CSS样式
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px; color:green;">直接在HTML标签中设置的样式</p>
外部样式表
CSS代码保存在扩展名为.css的样式表中
链接式 <link href="style.css" rel="stylesheet" type="text/css"/>
导入式 @import url("style.css");
引入CSS不同方式的优先级
行内样式>内部样式表>外部样式表
就近原则
<html>
<head>
<title>div与span</title>
<!--链接式引入外部CSS文件-->
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>
/*导入式引入外部CSS文件*/
@import url("style.css");
/*内部样式表*/
h1{
color: green;
}
div{
color: pink;
}
</style>
</head>
<body>
<h1>CSS的不同引用</h1>
<p>欢迎访问网站，您好，请登录，<span style="color: hotpink;">免费注册</span></p>
<!--行内样式-->
<h1 style="color: red;">CSS的不同引用</h1>
<div>一个div</div>
</body>
</html>
div{
color:rgb(41, 187, 197);
font-size: 30px;
}
CSS基本选择器
CSS基本选择器的使用
标签选择器
HTML标签作为标签选择器的名称
如：
…
、
、
语法
p{font-size:16px}
类选择器
.class{font-size:16px}
ID选择器
#id{font-size:16px}
几种基本选择器的优先级
ID选择器>类选择器>标签选择器
选择器是否也遵循就近原则
不遵循
<html>
<head>
<title>div与span</title>
<!--链接式引入外部CSS文件-->
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<style>
/*导入式引入外部CSS文件*/
@import url("style.css");
/*内部样式表*/
h1{
color: green;
}
div{
color: pink;
}
/*类选择器*/
.blue{
color: blue;
}
/*ID选择器*/
#yellow{
color: yellow;
}
</style>
</head>
<body>
<h1 class="blue">CSS的不同引用</h1>
<p id="yellow">欢迎访问网站，您好，请登录，<span style="color: hotpink;">免费注册</span></p>
<!--行内样式-->
<h1 style="color: red;">CSS的不同引用</h1>
<div class="blue">一个div</div>
</body>
</html>
CSS高级选择器
层次选择器
选择器 类型 功能描述
EF 后代选择器 选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
属性选择器
选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素，并且属性值为val
E[attr^=val] 选则匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且的E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了定义了属性attr，其属性包含了“val”，换句话说，字
符串val与属性值中的任意位置相匹配
<html>
<head>
<title>高级选择器</title>
</head>
<style>
/*CSS高级选择器-层次选择器*/
/*后代选择器*/
/*body p{
背景色
background-color: red;
} */
/*子选择器*/
最低0.47元/天 解锁文章
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
