2024年6月14日实训总结

今天我们学习了九个小块:

其中有三大块的知识:1.CSS复合选择器

2.标签显示模式

3.背景样式

1. CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

1.1 并集选择器

并集选择器（css选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器，id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

并集选择器和的意思，只要逗号隔开的，所有选择器都会执行后面样式。

1.2 后代选择器(重点)

后代选择器又称为包含选择器。

• 用来选择元素或元素组的子孙后代。

• 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写爷爷父亲，在写儿子孙子。

1.3 子元素选择器（重点）

子元素选择器只能选择作为某元素子元素的元素。

• 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

• 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

• 

• 这里的子指的是亲儿子不包含孙子,重孙子之类。
   

  1.4 复合选择器总结
  
   

  1.5 综合练习

  
  

  在不修改以上代码的前提下，完成以下任务：

• 主导航栏和侧导航栏里面文字都是18像素并且是微软雅黑。

• 链接登录的颜色为红色。

• 主导航栏里的列表中的文字颜色为深灰色。

• 收藏本站要求字体加粗。
  我们网页的标签非常多，在不同地方会用到不同类型的选择器，以便更好的完成我们的网页。
   

  2.标签显示模式（display）（重点）

  什么是标签的显示模式？

  标签以什么方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个

• 作用：

  我们网页的标签非常多，再不同地方会用到不同类型的标签，以便更好的完成我们的网页。

• 标签的类型(分类)

  HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。

  
   

2.1 块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

（1）总是从新行开始。

（2）高度、宽度、行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%。

（4）可以容纳内联元素和其他块元素。

2.2 行内元素(inline-level)

 

行内元素（内联元素）不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

行内元素的特点：

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊）

注意:

1. 只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

2. 链接里面不能再放链接。

2.3 行内块元素（inline-block）

在行内元素中有几个特殊的标签——<img />、<input />可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：

（1）默认宽度就是它本身内容的宽度。

（2）宽度，高度，行高、外边距以及内边距都可以控制。

                                

2.4 三种模式总结区别

 

2.5 总结-块级元素和行内元素分别有哪些？

1）行内元素有：a b span img input select strong（强调的语气） 2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p table form

2.6 标签显示模式转换 display

• 块转行内：display:inline;

• 行内转块：display:block;

• 块、行内元素转换为行内块： display: inline-block;

3. 背景样式（重点）

3.1 背景颜色

 

 

3.2 背景图片

 

 

3.3 图片重复方式

 

 

3.4 图片位置(重点)

 

3.4.2 为什么需要CSS精灵技术

 

图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。

然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。

现在我们来回答为什么需要精灵技术？

为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。

3.4.3 精灵技术

CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来。

我们需要使用CSS的

• background-image

• background-repeat

• background-position属性进行背景定位，

• 其中最关键的是使用background-position 属性精确地定位。

注意:

css精灵技术主要针对于背景图片，插入的图片img 是不需要这个技术的。

1. 精确测量，每个小背景图片的大小和 位置。

2. 给盒子指定小背景图片时， 背景定位基本都是负值。