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作业,就是对整个内容结构进行修饰装点美观的作用,见附录。

day07-css的基本语法_第1张图片

案例引入:我们现在很多人都在玩王者荣耀。那么,我们看下面的图,大家是不是都很熟悉呢?这是游戏中所有英雄的界面,在我们之前学的表单,列表,插入图片等标签可以做出其中的一部分效果,那么我们想要让所有的英雄人物按图中方式排列,对按钮进行边框等的设置要通过什么来可以实现呢?我们来一起看一下今天所学的内容:

案例效果图

day07-css的基本语法_第2张图片

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 ,这是争对全体同学的点名,因此,我们可以联想到全局选择器的使用。

全局选择器:设置所有标签使用同一样式,用*表示

语法:*{ 样式 }

案例效果图

day07-css的基本语法_第3张图片

案例思路分析

1、先写html结构效果

2、根据要求加CSS样式

代码展示:

html代码:

	

欢迎来到王者荣耀

王者大比拼

众多人物等你来选择

css代码: ​ *{color:orange; ​ font-size:6px; ​ font-family:“微软雅黑”; ​ }

课堂互动:使用当天日期选小组成员对应得排号切换屏幕共享或者QQ群分享学生代码,完成的同学给予表扬。

7.4.2 标签选择器

课堂互动:采用随机点击得方式:所以的班委在聊天窗口扣1,这是争对所有班委的点名,因此,我们可以带入标签选择器的讲解。

标签选择器:直接给标签设置样式的一种选择器,用于声明标记采用的样式。

例如,p选择器用于声明所有p标签的样式,h1选择器用于声明页面中所有h1标签的样式,img选择器用于声明页面中所有img标签的样式。

标签选择器的语法:标签名{ 属性:属性值; }

案例效果图

day07-css的基本语法_第4张图片

案例思路分析

1、先插入两张图片及文本

2、根据要求加CSS样式

代码展示:

要求: 给所有的图片加一个100*100的大小

html代码:

王者

CSS代码:

​ img{

​ width:100px;

​ height:100px;

​ }

课堂互动:使用随机点名选小组成员切换屏幕共享或者QQ群分享学生代码,完成的同学给予表扬。

7.4.3 类选择器

课堂互动:采用随机点击得方式:组长在聊天窗口扣1,这是争对组长的点名,因此,我们可以带入类选择器的讲解。

类选择器:class 用来为一系列标签定义相同的样式。

例如:当声明了p标签为红色时,页面中的所有p标签都显示为红色,如果希望其中的几个不是红色,就需要使用类别选择器 。

类选择器的语法: .类名{ 样式 }

案例效果图

day07-css的基本语法_第5张图片

案例思路分析

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名{ 样式 }

案例效果图

day07-css的基本语法_第6张图片

案例思路分析

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来实现

day07-css的基本语法_第7张图片

2、选做题:使用CSS来实现图中文本样式

day07-css的基本语法_第8张图片

你可能感兴趣的:(初始HTML页面,css,css3,html)