H5C3基础学习总结之CSS选择器、元素显示模式及CSS背景

目录

CSS选择器总结

CSS元素显示模式

块元素

行内元素

行内块元素

元素显示模式总结

元素显示模式的转换

CSS背景

背景图片

背景图像固定（背景附着）

背景总结

---

CSS选择器总结

CSS基础选择器

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p等	不能差异化筛选	较多	p {color:  red;}
类选择器	可以选出一个或多个标签	可以根据需求进行筛选	非常多	.nav {color:  red;}
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一下	一般搭配js	#nav {color:  red;}
通配符选择器	选择所有标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

CSS复合选择器

复合选择器	作用	特征	使用情况	用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	.nav(空格)a
子代选择器	选择最近一级的元素	只能是亲儿子（第一个子集）	较少	.nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	.nav, .header(逗号隔开)
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和a:hover{}
:focus选择器	选择获得光标的表单	跟链接相关	较少	input:focus{}

---

CSS元素显示模式

块元素

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

块级元素的特点：

1. 比较霸道，独占一行。
2. 可以控制：高度、宽度、外边距、内边距。
3. 宽度不设置，默认为容器（父级宽度）的100%。
4. 是一个容器及盒子，里面可以放行内元素或块级元素

但是需要注意如下细节：

• 文字类的元素中，不能使用块级元素。
• <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>标签。
• <h1>~<h6>等，都是文字类块级标签，里面都不能放其他块级元素。

行内元素

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

行内元素的特点：

1. 相邻行内元素在一行上，遗憾可以显示多个行内元素。
2. 高宽直接设置是无效的。
3. 默认宽度就是其本身内容的宽度。
4. 行内元素只能容纳文本或其他行内元素。

但是需要注意如下细节：

• 链接里面不能再放链接。
• 特殊情况，链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

行内块元素

在行内元素中有几个特殊标签，<img/>、<input/>、<td>，他们同时具有块元素和行内元素的特点，简称行内块元素。

行内块元素的特点：

1. 和相邻行内元素（行内块元素）在遗憾上，一行可以显示多个行内块元素（行内元素特点），但是他们之间会有白色缝隙。
2. 默认宽度就是其本身内容的宽度（行内元素特点）。
3. 高度，宽度，外边距和内边距都可以控制（块级元素特点）。

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽高	容器的100%	容器级可以包含任何标签
行内元素	一行可以放多个行内元素	不可以直接设置宽高（可以通过修改显示模式实现）	本身内容的宽度	容纳文本或者其他行内元素
行内块元素	一行可以放多个行内块元素	可以设置宽高	本身内容的宽度

元素显示模式的转换

在CSS代码中，选择对应标签添加如下代码：

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

---

CSS背景

通过CSS背景属性，可以给页面元素添加背景样式，包括背景颜色，背景图片，背景平铺，背景图片位置，背景图像固定等，下面进行部分介绍。

背景图片

background-image属性描述了元素的背景图像。是集开发常见于logo或者一些装饰性的小图片或是超大的背景图片，非常便于控制位置。（精灵图就是一种运用场景）

背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。可用于制作时差滚动的效果。

语法：

background-attachment: scroll | fixed

参数	作用
scroll	背景图像随对象内容滚动
fixes	背景图像固定

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值/十六进制/RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x/y坐标
background-attachment	背景附着	scroll（背景滚动）/fixes（背景固定）
背景复合写法	书写更简单（无特定书写顺序）	背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;
背景色半透明	背景颜色半透明	background:rgba(0,0,0,透明度); 前三个为RGB代码，透明度取值范围为0～1

上述总结对应如下代码，此代码书写在CSS对应的<style>标签中：

<style>
    /*原始写法*/
    background-image: url(images/bg.jpg);
    /*让图片不重复*/
    background-repeat: no-repeat;
    /*让图片顶部居中*/
    background-position: center top;
    /*让图片固定*/
    background-attachment: fixed;
    background-color: black;

    /*上述复合写法如下一行*/
    background: black url(image/bg.jpg) no-repeat fixed center top;
    
    color: #fff;
    font-size: 20px;
</style>