码上快乐

相关内容   简体   繁体

04-前端核心技术-CSS基础属性

本文转载自  查看原文  2021-11-20 15:45  163    前端课件

第04章-前端核心技术-CSS基础属性

学习目标

  1. 了解CSS是什么

  2. 掌握CSS的简单使用

  3. 掌握CSS样式创建和引入的方法重点

  4. 掌握CSS背景的使用重点

  5. 掌握CSS文本的样式重点

  6. 掌握CSS连接的样式重点

CSS简介

什么是 CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 定义如何显示 HTML 元素
  • 多个样式定义可层叠为一

CSS 语法

CSS 规则由两个主要的部分构成：**选择器**，以及一条或多条声明:

image-20210901174753526

  • 选择器通常是您需要改变样式的 HTML元素。
  • 每条声明由一个属性和一个值组成。
  • 属性（property）是您希望设置的样式属性（style attribute）。
  • 每个属性有一个值。属性和值被冒号分开。

CSS 创建（引入方式）

插入样式表的方法有三种:

  1. 外部样式表(External style sheet)
  2. 内部样式表(Internal style sheet)
  3. 内联样式(Inline style)

外部样式表

外部样式需要创建独立的css文件，并且使用link标签引入，推荐使用

1
2
3
<head>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>

内部样式表

内部样式直接在html文件内部使用style标签引入，通常放在head标签中

1
2
3
4
5
6
7
<head>
	<style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> 
</head>

内联样式

内联样式直接在某个标签上通过style属性的引入，必须依赖与某个标签，不通用，但是优先级最高

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式优先级

（内联样式）> （内部样式）>（外部样式）> 浏览器默认样式

注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。**

CSS简单选择器

选择器用于选择哪些元素

元素选择器（选一种元素）

1
2
3
p { text-align:center; }

设置HTML文档中所以 p 标签的文字居中对齐。

案例01

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> p{ color: red; } </style>
	</head>
	<body>
		<p>前端学习之CSS 元素选择器</p>
		<p>前端学习之CSS 元素选择器</p>
		<p>前端学习之CSS 元素选择器</p>
	</body>
</html>

所有p标签，无论在哪里都会被修改为红色字体

效果展示

image-20210901175557124

id 选择器（选一个）

id 选择器可以为标有特定id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器。CSS 中 id 选择器以 # 来定义。

1
2
3
4
css
#abc { text-align:center; }

案例02

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #text{ color: red; } </style>
	</head>
	<body>
		<div id="text">前端学习之CSS id选择器</div>
	</body>
</html>

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

效果展示

image-20210901175743301

class 选择器（选多个）

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示，在 CSS中，类选择器以一个点.号显示：

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

案例03

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .text{ color: red; } </style>
	</head>
	<body>
		<div class="text">
			前端学习之CSS class选择器
		</div>
		<div class="text">
			第二个DIV
		</div>
		<div class="text">
			三个DIV都是同一个text类，所以文字都是红色
		</div>
	</body>
</html>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

效果展示

image-20210901175818799

三种选择器优先级

id选择器（选一个） > class选择器（选多个） > 元素选择器 （选一种元素）

CSS 尺寸

尺寸主要指宽度和高度属性

属性 描述
height 设置元素的高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

注：width: 200px; margin: auto;可以让 区块元素 居中。

注：给上级元素添加text-align: center属性可以让 内联元素 居中，因为内联元素等同于文字处理。

案例04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> .text1{ width: 200px; height: 50px; background-color: #DC143C; } </style>
	</head>
	<body>
		<div class="text1">
			宽度为200px|高度为50px
		</div>
	</body>
</html>

效果展示

image-20210901180355250

CSS 背景颜色

属性 描述
background-color 设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）

rgb

RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。

  • 红色（R）
  • 绿色（G）
  • 蓝色（B）

hsl

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

  • 色相（H）是色彩的基本属性，就是平常所说的颜色名称，如红色、黄色等。
  • 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取 0-100% 的数值。
  • 亮度（L），取 0-100%，增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化。
值 描述
hue - 色相 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度 定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度 定义亮度 0% 为暗, 50% 为普通, 100% 为白

案例05

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #bg{ height: 200px; /* 1.颜色单词 */ background-color: red; /* 2.三位16进制 */ background-color: #F56; /* 3.六位16进制 */ background-color: #0000FF; /* 4.rgb(255,255,255) */ background-color: rgb(10,255,125); /* 5.rgba(255,255,255,1) */ background-color: rgba(10,255,125,1); /* 6.hsl(360,100%,100%) */ background-color: hsl(0,100%,50%); /* 7.hsla(360,100%,100%,1) */ background-color: hsla(0,100%,50%,0.1); } </style>
	</head>
	<body>
		<div id="bg"></div>
	</body>
</html>

效果展示

image-20210901181614524

CSS 背景图片

背景图片包括多个属性，可以分别设置也可以合并设置

属性 描述
background-color 设置背景颜色（red、#00aaff、#0af、rgb(0,255,0)、rgba(0,255,0,1)、hsl(360,10%,1%)）
background-image 设置背景图片（url(img/logo.png)）
background-repeat 设置背景图片是否重复（no-repeat、repeat）
background-attachment 设置背景图片是否固定（scroll、fixed）
background-position 设置背景图片的位置（left、right、top、bottom、center、%、px）
background-size（不可合并） 设置背景的大小（px、%、cover、contain）

注意：background属性设置多个背景时，用逗号分隔开来。

background-size属性

值 描述
像素 设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
百分比 将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为“auto(自动)”
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。

如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css"> #bg{ background-color: #8B0000; background-color: url('image/banner.jpg'); background-repeat: no-repeat repeat; background-attachment: fixed; background-position: center top; } </style>
或者
<style type="text/css"> #bg{ background: #ffffff url('banner.jpg') no-repeat fixed center top; } </style>

案例06

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> #bg{ background: #8B0000 url('image/banner.jpg') no-repeat fixed center top; background-size: 80% 200px; } </style>
	</head>
	<body>
		<div id="bg">
			<br/><br/><br/><br/><br/>
			哈哈
			<br/><br/><br/><br/><br/>
		</div>
	</body>
</html>

效果展示

image-20210926090252861

CSS 文本

文本属性有很多，常用的如下，描述中括号内的内容需要重点记忆

属性 描述
color 设置文本颜色（纯文字）
direction 设置文本方向（ltr：[left to right]；rtl）
unicode-bidi 设置文本是否被重写（bidi-override）
letter-spacing 设置字符间距 （像素单位px，百分比单位）
word-spacing 设置字（单词间的空格）间距（像素单位px，百分比单位）
white-space 设置元素中空白的处理方式（pre：保留空格和换行；pre-line：只保留换行；nowrap：不保留空格和换行；normal：默认）
vertical-align 设置元素的垂直对齐（表格、图片、内联元素）（top、middle、bottom）
text-align 水平对齐元素中的文本（内联子元素）（left、right、center）
text-decoration 向文本添加上、中、下划线（overline、line-through、underline、none）
text-indent 缩进元素中文本的首行（像素单位px，百分比单位）
text-transform 控制元素中的字母（lowercase、uppercase）

案例07

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>

<span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>HTML CSS样式<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>&gt;</span><span class="css">
		<span class="hljs-id">#direction</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">direction</span>:<span class="hljs-value"> rtl</span></span>;<span class="hljs-comment">/*direction和unicode-bidi必须同时使用*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">unicode-bidi</span>:<span class="hljs-value"> bidi-override</span></span>;<span class="hljs-comment">/*只有使用该属性重写文字，文字方向才会改变*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">letter-spacing</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;<span class="hljs-comment">/*字母间距10像素*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">word-spacing</span>:<span class="hljs-value"> <span class="hljs-number">10px</span></span></span>;<span class="hljs-comment">/*单词间距10像素*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value"> pre-wrap</span></span>;<span class="hljs-comment">/*控制是否正常显示空格和换行*/</span>
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> blueviolet</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#direction</span> <span class="hljs-tag">span</span><span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> crimson</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">18px</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-decoration</span>:<span class="hljs-value"> line-through</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"direction"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">span</span>&gt;</span>天地不仁<span class="hljs-tag">&lt;/<span class="hljs-title">span</span>&gt;</span> Hello world
	<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>



</html>

效果展示

image-20210901182419430

CSS3 文字阴影

语法：

text-shadow: h-shadow v-shadow blur color;

注意： text-shadow属性设置多重阴影文本，用逗号分隔开来。

属性值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。

案例08

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>HTML CSS样式</title>
		<style type="text/css"> #content { 
			<span class="hljs-rule"><span class="hljs-attribute">background</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#ffffff</span> <span class="hljs-function">url</span>(<span class="hljs-string">'bg.jpg'</span>) no-repeat fixed <span class="hljs-number">100%</span> <span class="hljs-number">100%</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">background-size</span>:<span class="hljs-value"> <span class="hljs-number">100%</span> <span class="hljs-number">100%</span></span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">word-break</span>:<span class="hljs-value"> break-word</span></span>;<span class="hljs-comment">/*文字自动换行*/</span>
		<span class="hljs-rule">}</span></span>
		<span class="hljs-tag">h1</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">5</span>, <span class="hljs-number">66</span>, <span class="hljs-number">77</span>, <span class="hljs-number">0.8</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-shadow</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FF0000</span> <span class="hljs-number">5px</span> <span class="hljs-number">5px</span> <span class="hljs-number">2px</span></span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-tag">h4</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">55</span>, <span class="hljs-number">66</span>, <span class="hljs-number">5</span>, <span class="hljs-number">0.6</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> wheat</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-class">.desc</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">rgba</span>(<span class="hljs-number">55</span>, <span class="hljs-number">123</span>, <span class="hljs-number">77</span>, <span class="hljs-number">0.7</span>)</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> white</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
		<span class="hljs-rule">}</span></span>
		<span class="hljs-id">#content</span> <span class="hljs-class">.pre</span> <span class="hljs-rules">{
			<span class="hljs-rule"><span class="hljs-attribute">text-align</span>:<span class="hljs-value"> center</span></span>;
			<span class="hljs-rule"><span class="hljs-attribute">white-space</span>:<span class="hljs-value"> pre-line</span></span>;
		<span class="hljs-rule">}</span></span>
	</span><span class="hljs-tag">&lt;/<span class="hljs-title">style</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
	<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">id</span>=<span class="hljs-value">"content"</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>HTML CSS样式<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">h4</span>&gt;</span>第一部分 Web前端入门必备<span class="hljs-tag">&lt;/<span class="hljs-title">h4</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">p</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"desc"</span>&gt;</span>本阶段主要学习Web前端开发的基础技能，包括HTML5、CSS3、JavaScript，学习掌握Web网页的基本布局、排版、特效、动画等。HTML是目前最流行的网页制作语言。CSS样式表在网页设计中变得越来越重要。JavaScript是动态脚本语言，是实现网页动态效果的核心。三者搭配，网页必成。<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
		<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"pre"</span>&gt;</span>
			01、HTML 基本标签及W3C标准
			02、HTML 语法|标签|属性
			03、HTML 文本格式化|实体字符
			04、HTML 图像|表格|列表|超链接
			05、HTML 框架|表单|表单元素
			06、HTML5音视频多媒体
			07、CSS 基础语法|简单选择器
			08、CSS 背景|文本|字体
			09、CSS 列表|超链接|表格样式
			10、CSS 盒子模型|边框|轮廓|边距
			11、CSS 尺寸|定位|显示|浮动
			12、CSS 伪类|复杂选择器
			13、JS  基本语法|变量|运算|选择结构|循环结构
			14、JS  函数|对象|正则表达式|内置对象
			15、JS  DOM对象|BOM对象|浏览器适配
			16、实战：制作天猫商城网页
		<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
	<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>

 
</html>

效果展示

image-20210926090339893

CSS 字体

CSS字体属性定义字体，加粗，大小，文字样式。

Property 描述
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size/line-height 指定文本的字体大小
font-style 指定文本的字体斜体（斜体：italic）
font-weight 指定字体的粗细（100：不加粗；900：加粗【bold】）。
font-variant 以小型大写字体或者正常字体显示文本。（small-caps）

font属性合并写法的顺序：

  1. font-style

  2. font-variant

  3. font-weight

  4. font-size/line-height

  5. font-family

如果行高和高度一样，可以简单的让单行文字垂直居中。

1
2
height:50px;
line-height:50px;

字体系列

font-family 属性应该设置几个字体名称作为一种“后备”机制，如果浏览器不支持第一种字体，他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”。多个字体系列是用一个逗号分隔指明：

1
2
3
p{ font-family:"楷体","微软雅黑"; }

CSS单位

绝对单位：（像素单位）

设置一个指定大小的文本，不允许用户在所有浏览器中改变文本大小，确定了输出的物理尺寸时绝对大小很有用

1
2
3
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

相对大小：(可变单位)

  1. Em**：相对于**直接上级的元素的字体大小来设置大小
  2. Rem：相对于html的元素字体大小来设置大小
  3. 百分比：相对于元素自身的大小来设置大小

  4. vw : 1vw 等于视口宽度的1%

  5. vh : 1vh 等于视口高度的1%

  6. vmin : 选取 vw 和 vh 中最小的那个

  7. vmax : 选取 vw 和 vh 中最大的那个

浏览器默认大小和普通文本段落一样，是16像素（16px=1em）。

如果上级元素的字体大小为20px，则（20px=1em）。

1
2
3
4
css
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

上面的例子，em的文字大小是与前面的例子中像素一样。

不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。

CSS 超链接属性

链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。

这四个链接状态是：

  • a:link - 正常，未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

注意： a:hover 必须在 a:link 和 a:visited 之后写，需要严格按顺序才能看到效果。

注意： a:active 必须在 a:hover 之后。

案例09

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style> a:link { color: #000000; } /* 未访问链接*/ a:visited { color: #00FF00; } /* 已访问链接 */ a:hover { color: #FF00FF; } /* 鼠标移动到链接上 */ a:active { color: #0000FF; } /* 鼠标点击时 */ </style>
	</head>
	<body>
		<a href="" target="_blank">这是一个链接</a>
	</body>
	</body>
</html>

效果展示

image-20210901183514940

CSS后代选择器

后代选择器（descendant selector）又称为包含选择器。使用符合空格

后代选择器可以选择作为某元素后代的元素。

举例来说，如果您希望只对 ul 元素中的 li元素应用样式，而不对ol元素中的li元素应用样式，可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css"> ul li { line-height: 50px; } </style>
	</head>
	<body>
		<ul>
			<li><a href="">系统管理</a></li>
			<li><a href="">会员管理</a></li>
		</ul>
	</body>
</html>

作业

制作如下艺术字效果

image-20210901183821124

制作如下按钮效果

image-20210901183842376

制作如下按钮button效果

要求实现hover和active状态的样式

image-20210901183905654

实现如下菜单效果

要求实现hover和active状态的样式，整体宽度为200px

一级菜单：

背景颜色rgba(0,0,0,0.2)

​ Hover:背景rgba(255,0,0,0.8)

​ Active：背景rgba(0,0,0,0.3)

二级菜单

背景颜色rgba(0,0,0,0.1)

​ Hover:背景rgba(0,0,255,0.8)

​ Active：背景rgba(0,0,0,0.3)

分割线：rgba(0,0,0,0.3)

image-20210901183933603

实现如下进度条

要求：颜色分别是红绿蓝，进度颜色透明0.6

image-20210901184002542

实现如下效果

要求:

hover:整体背景为rgba(0,0,255,0.8);

上面文字为颜色为：wheat

下面文字为颜色为：white

image-20210926090418749

实现如下通讯录界面

要求：整个html，body最大宽度为750px

image-20210901184050234

    </article>


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 05-前端核心技术-CSS排版属性 06-前端核心技术-CSS布局属性 07-前端核心技术-CSS动画特效 01-前端核心技术-HTML基础 09-前端核心技术-JavaScript基础语法 《CSS核心技术详解》 Web前端三大核心技术之HTML 11-前端核心技术-JavaScript Redis核心技术与实战(基础部分) Spring 核心技术（1）
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM