day07-css的基本语法
文章目录
-
-
- 一、知识回顾：
- 二、单元内容
- 7.1 CSS概述
-
- 7.1.1 CSS概述
- 7.2 CSS基本语法
-
- 7.2.1 CSS基本语法
- 7.3 CSS引入方式
-
- 7.3.1 CSS行内样式及练习
- 7.3.2 CSS内嵌式及练习
- 7.3.3 CSS链接样式及练习（外链式）
- 7.3.4 CSS导入样式及练习
- 7.4 CSS常见选择器
-
- 7.4.1 全局选择器
- 7.4.2 标签选择器
- 7.4.3 类选择器 ``
- 7.4.4 ID选择器 ` `
- 7.4.5 伪类选择器
- **三、课后作业：**
-
一、知识回顾：
-
1.1 表单标签
-
1.2 表单标签的输入标记
-
1.3下拉菜单
二、单元内容
-
7.1 CSS概述
-
7.2 CSS基本语法
-
7.3 CSS引入方式
-
7.4 CSS常见选择器
7.1 CSS概述
课堂游戏：通过你画我猜小游戏，讲师绘制内容学生进行猜，最后根据绘制内容和原图进行对比，引出今天CSS作业，就是对整个内容结构进行修饰装点美观的作用，见附录。
案例引入：我们现在很多人都在玩王者荣耀。那么，我们看下面的图，大家是不是都很熟悉呢？这是游戏中所有英雄的界面，在我们之前学的表单，列表，插入图片等标签可以做出其中的一部分效果，那么我们想要让所有的英雄人物按图中方式排列，对按钮进行边框等的设置要通过什么来可以实现呢？我们来一起看一下今天所学的内容：
案例效果图：
7.1.1 CSS概述
CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。 例如：化妆、装潢等
7.2 CSS基本语法
7.2.1 CSS基本语法
css选择器，也称为选择符，用于选择需要添加样式的元素
选择器{
属性:属性值;
…}
7.3 CSS引入方式
课堂游戏：通过抢答的方式选取几名同学，进行一个谁是卧底的游戏，在游戏的过程中，我们会通过不同 的方式方法来找到潜伏的卧底，通过这个游戏引出我们写CSS的时候呢，也有好几种不同的方式，我们大家一起来看一下：见附录
7.3.1 CSS行内样式及练习
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。
行内样式的使用方法：在html标记内，使用style属性定义css样式。
注：在标签内部设置（style）样式；
代码展示：
要求：使用行内样式将欢迎来到王者荣耀字体颜色写为红色
html代码：
欢迎来到王者荣耀
课堂互动：使用抢答的方式切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.3.2 CSS内嵌式及练习
内嵌式是将CSS样式集中写在网页的标签内的标签中。
语法如下：
代码展示：
要求：使用内嵌样式将文本内容写为红色：
html代码：
<head>
<meta charset="utf-8" />
<title>title>
<style>
p{color: red;}
style>
head>
<body>
<p>欢迎来到王者荣耀p>
body>
课堂互动：使用抢答的方式切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.3.3 CSS链接样式及练习（外链式）
链接样式的应用方法：在外部引入css样式表，它在网页的标签中使用标记来引入外部样式表文件。（常用）
（Href路径 rel样式 type类型）
语法：
代码展示：
要求：在html中引入CSS样式表代码展示：
html代码：
<head>
<meta charset="utf-8" />
<title>title>
<link rel="stylesheet" href="css/day4.css" />
head>
课堂互动：随机找两名同学通过切换屏幕共享或者QQ群分享代码，完成的同学给予表扬，直播间666来一波。
最后，总结知识点，通过抢答的方式了解学生的掌握情况，并给与表扬及鼓励！！！
7.3.4 CSS导入样式及练习
导入样式的应用方法：采用导入样式的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似于内嵌样式表效果。但是，导入样式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。（了解）
语法：
<head>
<style>
@import url( “./css/1.css”)
style>
head>
7.4 CSS常见选择器
课堂游戏:采用随机点名的方式，分别点名：班长、组长、组内几号同学等引入常见的几种选择器；见附录
7.4.1 全局选择器
课堂互动：所以的同学在直播间的聊天窗口扣1 ，这是争对全体同学的点名，因此，我们可以联想到全局选择器的使用。
全局选择器：设置所有标签使用同一样式，用*表示
语法:*{ 样式 }
案例效果图：
案例思路分析：
1、先写html结构效果
2、根据要求加CSS样式
代码展示：
html代码：
欢迎来到王者荣耀
王者大比拼
众多人物等你来选择
css代码：
*{color:orange;
font-size:6px;
font-family:“微软雅黑”;
}
课堂互动：使用当天日期选小组成员对应得排号切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.4.2 标签选择器
课堂互动：采用随机点击得方式：所以的班委在聊天窗口扣1，这是争对所有班委的点名，因此，我们可以带入标签选择器的讲解。
标签选择器：直接给标签设置样式的一种选择器，用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，h1选择器用于声明页面中所有h1标签的样式，img选择器用于声明页面中所有img标签的样式。
标签选择器的语法：标签名{ 属性:属性值; }
案例效果图：
案例思路分析：
1、先插入两张图片及文本
2、根据要求加CSS样式
代码展示：
要求： 给所有的图片加一个100*100的大小
html代码：
王者
CSS代码：
img{
width:100px;
height:100px;
}
课堂互动：使用随机点名选小组成员切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.4.3 类选择器
课堂互动：采用随机点击得方式：组长在聊天窗口扣1，这是争对组长的点名，因此，我们可以带入类选择器的讲解。
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器 。
类选择器的语法: .类名{ 样式 }
案例效果图：
案例思路分析：
1、先插入两张图片
2、给需要加样式的图片命一个class类名
3、写CSS样式
代码展示：
要求：将图片大小改为100*100
html代码：
CSS代码：
.img_1{
width:100px;
height:100px;
}
课堂互动：使用抢答的方式选小组成员切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.4.4 ID选择器
课堂互动：采用随机点击得方式：学委在聊天窗口扣1，这是争对学委的点名，因此，我们可以带入id选择器的讲解。
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{ 样式 }
案例效果图：
案例思路分析：
1、先写html标签
2、给需要加样式的标签命一个id名
3、写CSS样式
代码展示：
要求：给第一张图片设置100*100的大小
html代码：
CSS代码：
#img_1{
width:100px;
height:100px;
}
课堂互动：使用抢答的方式选小组成员切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
7.4.5 伪类选择器
课堂互动：伪类选择器呢，和我们前面说的几种选择器有点不一样，那么哪里不一样呢？我们来一起看看：
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。我们之前学过的标签中，哪一个标签的使用可以让我们看到他的一种状态呢？也就是我们点击的时候，会有跳转等状态的变化？
学生抢答，对回答出来的学生给你表扬及加分。
接下来我们一起来看看超链接的伪类如何使用。
a:link（未被访问过,访问之前的状态）
a:visited(访问过后的状态)
a:hover （鼠标滑过的状态）
a:active（鼠标按下时的状态）
注：使用顺序：L–V–H–A
案例参考图：
案例思路分析：
1、在html中写出超链接
2、在CSS中设置要求中的样式
代码展示：
要求：设置如图为未访问时是红色，鼠标滑过时是蓝色，鼠标按下时是紫色，访问过后是绿色效果
html代码：
游戏资料
内容中心
赛事中心
百态王者
社区互动
玩家支持
CSS代码：
a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: purple;
}
课堂互动：使用抢答的方式选小组成员切换屏幕共享或者QQ群分享学生代码，完成的同学给予表扬。
最后知识点总结，并且在课堂结束前对本节课积极回答问题的同学给予表扬，其他同学给予激励。所有人666刷屏！！！
三、课后作业：
1、必做题：按照图中效果，标题用h1标签定义，其余用p标签定义，其余图中颜色效果用CSS来实现
2、选做题：使用CSS来实现图中文本样式
