CSS（CSS3）知识点学习

最新推荐文章于 2023-03-09 21:03:02 发布
最新推荐文章于 2023-03-09 21:03:02 发布
阅读量5.2k 收藏 7
点赞数 3
分类专栏： CSS 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44628213/article/details/123250674
版权

文章目录

一、CSS的发展历程

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

css

二、CSS网页的美容师

CSS的出现，实现了 HTML 专注去做结构呈现。 而样式交给 CSS 。

网页添加 CSS和不添加CSS 的对比：

1.带有CSS的页面

2.没有CSS的页面

三、CSS初识

CSS（Cascading Style Sheets）

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

1.书写位置

CSS可以写到那个位置？是不是一定写到html文件里面呢？

（1）内部样式表（内嵌式）

内嵌式一般是将CSS代码集中写在HTML文档的head头部标签上，并且用style标签定义，其基本语法格式如下：

<head>
    <titile> 标题 </titile>
    <style type="text/css">
      选择器 {
    
          属性1:属性值1; 
          属性2:属性值2; 
          属性3:属性值3;
            }
    </style>
</head>
  • 语法中，style标签一般位于head标签中title标签之后，但也可以把他放在HTML文档的任何地方（但不可以写在标签里）。
  • type="text/css"表示我们书写的代码类型是CSS，在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

（2）内联样式（行内式）

内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

（3）外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是个单标签！！！

该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

  • href：定义所链接外部样式表文件的路径，可以是相对路径，也可以是绝对路径。
  • type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
  • rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

（4）三种样式表总结

样式表 优点 缺点 使用情况 控制范围
内部样式表（内嵌式） 部分结构和样式相分离 没有彻底分离 较多 控制一个页面（中）
行内样式表（行内式） 书写方便，权重高 没有实现样式和结构相分离 较少 控制一个标签（少）
外部样式表（外链式） 完全实现结构和样式相分离 需要引入 最多，强烈推荐（常用） 控制整个站点（多）

2.CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：

在上面的样式规则中:

  1. 选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式（声明）。
  2. 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
  3. 属性和属性值以“键值对”的形式出现。
  4. 属性和属性值之间用英文“:”连接。
  5. 多个“键值对”之间用英文“;”进行区分。

四、开发者工具（Chrome）

“按F12”/ “shift+ctrl+i”/ “右击网页空白区域–检查”：打开开发者工具

小技巧：

  1. 使用[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pH4sg7zB-1646280569857)(images\image-20200321175735665.png)]点击网页特定区域，在旁边即可看见相应的代码。
  2. Ctrl+滚轮可以放大开发者工具代码大小。
  3. 左边是HTML元素结构；右边是CSS样式。
  4. 在右边CSS样式中单击可修改代码数值（比如颜色）等信息，退出编辑后即可查看更改后的效果，但不会改变源文件中的代码。

五、CSS注释

/*需要注释的内容*/

例如：

p {
   
      font-size: 14px;                 /*所有的字体是14像素大小*/
}

注意：

  1. 在CSS中注释不能嵌套。
  2. 在CSS中单位“px”不可以省略。

六、选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

1.标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{
   
  属性1:属性值1; 
  属性2:属性值2; 
  属性3:属性值3; 
}  
或者
元素名{
   
  属性1:属性值1; 
  属性2:属性值2; 
  属性3:属性值3; 
}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。

2.类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{
   
  属性1:属性值1; 
  属性2:属性值2; 
  属性3:属性值3; 
}

标签调用的时候用 class=“类名” 即可。

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

小技巧：

  1. 长名称或词组可以使用中横线“-”来为选择器命名。
  2. 不建议使用下划线“_”来命名CSS选择器。
  3. 不建议使用纯数字、数字开头、中文（中文可能会乱码）等命名，尽量使用英文字母来命名。
  4. 命名要有意义（语义化）。
  5. 驼峰式命名：包括大驼峰式、小驼峰式

猜谜底游戏：

你猜？

命名是我们通俗约定的，但是没有规定必须用这些常用的命名。

课堂案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
    
        	font-size: 100px;
        }
        .blue {
    
        	color: blue;
        }
        .red {
    
        	color: red;
        }
        .orange {
    
			color: orange;
        }
		.green {
    
			color: green;
		}
        </style>
    </head>
    <body>
    	<span class="blue">G</span>
    	<span class="red">o</span>
    	<span class="orange">o</span>
    	<span class="blue">g</span>
    	<span class="green">l</span>
    	<span class="red">e</span>
    </body>

3.多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

注意：

  1. 样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。
  2. 各个类名中间用空格隔开。例如：class=“类名1 类名2 …”

多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安琪拉</div>
<div class="font14">貂蝉</div>

4.id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：

#id名{
   
  属性1:属性值1;
  属性2:属性值2;
  属性3:属性值3; 
}

例如：

<style>
	#cl-orange{
   
		color:orange;
	}
</style>
<body>
	<p id="cl-orange">我是橙色的文字</p>
</body>

id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

id的命名：为了后期配合JavaScript使用，建议标签属性值定义为唯一的标识

用法基本和类选择器相同。

5.类选择器和id选择器的区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class），好比人的名字，是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜。类选择器常用在CSS中。

id选择器，好比人的身份证号码，全中国是唯一的，不得重复，只能使用一次。id选择器常与JavaScript配合使用。

类选择器和id选择器最大的不同在于使用次数上。

6.通配符选择器

通配符选择器用“ * ”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

*{
    
  属性1:属性值1; 
  属性2:属性值2; 
  属性3:属性值3; 
}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

*{
   
  margin: 0;  /* 定义外边距*/                  
  padding: 0;  /* 定义内边距*/                 
}

注意：这个通配符选择器，就像我们的电影明星中的梦中情人，想想它就好了，但是它不会和你过日子。

7.伪类选择器

  1. 伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。
  2. 为了和我们刚才学的类选择器相区别，类选择器是一个点，比如 .demo {} ；而我们的伪类用英文下的冒号 ，比如 :link{}，且在“:”前方添加选择器的名称，比如 a:link{}

（1）链接伪类选择器

  • :link /* 未访问的链接（链接最初的样式，此属性将覆盖原属性） */
  • :hover /* 鼠标移动到链接上（鼠标放到此链接上的时候） */
  • :active /* 选定的链接（激活状态，鼠标按下没松手的时候） */
  • :visited /* 已访问的链接（链接被访问后的样式） */

注意写的时候，他们的顺序按照“lhav”的顺序，尽量不要颠倒。

a {
      
    /* a是标签选择器，代表所有的链接 */
    font-weight: 700;
    font-size: 16px; /*font-size用来调整字号大小，pc端默认大小16px*/
    color: gray;
}

a:hover {
      
    /* :hover是链接伪类选择器，鼠标经过 */
    color:red; /* 鼠标放到此链接上的时候，由原来的灰色gray变成了红色red */
}

（2）结构（位置）伪类选择器（CSS3）

  • :first-child :选取属于其父元素的首个子元素的指定选择器（选择器对应的元素是：他的父元素的第一个且是该类型的孩子，所说的该类型即是":"前的属性）
  • :last-child :选取属于其父元素的最后一个子元素的指定选择器（选择器对应的元素是：他的父元素的最后一个且是该类型的孩子，所说的该类型即是":"前的属性）
  • :nth-child(n)：匹配属于其父元素的第n个子元素，不论元素的类型（选择器对应的元素是：他的父元素的第n个且是该类型的孩子，所说的该类型即是":"前的属性）
  • :nth-last-child(n)：选择器匹配属于其元素的第n个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。（选择器对应的元素是：他的父元素的倒数第n个且是该类型的孩子，所说的该类型即是":"前的属性）
    上述括号内的n可以是数字、公式或关键词：
  • 公式：例如:nth-last-child(2n) ，即代表此类型下的所有偶数；:nth-last-child(2n-1) ，即代表此类型下的所有奇数
  • 关键词：例如:nth-child(odd)，即代表此类型下的所有奇数
li:first-child {
    
		/* 选择li标签的第一个孩子 */
    color: pink; 
}
li:last-child {
   
    /* 选择li标签的最后一个孩子 */
    color: purple;
}
li:nth-child(4) {
   
    /* 选择li标签的第4个孩子 */ 
	  color: skyblue;
}
li:nth-last-child(5) {
   
    /* 选择li标签的倒数第5个孩子 */ 
	  color: red;
}

（3）目标伪类选择器（CSS3）

:target：目标伪类选择器，此选择器可用于选取当前活动的目标元素

p:target {
   
		color:red;
		font-size:30px;
}
<body>
	<a href="#two">点我去第2章节</a>
	<br>
	<p style="height=800px">第1章节开始</p>
	<p style="height=1000px" id="two">第2章节开始</p>
	<p style="height=1000px">第3章节开始</p>
</body>

（还可使用其他选择器使p:target更换为.zhangjie:target、#two:target）

七、CSS字体样式属性

1.font-size:字号

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用相对长度单位中的像素单位px（pc端默认大小为16px，即font-size: 16px;），绝对长度单位使用较少。具体如下：

2.font-family:字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有p段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：

p{ font-family:“微软雅黑”;}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

常用技巧：

  1. 现在网页中普遍使用14px+。
  2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
  3. 各种字体之间必须使用英文状态下的逗号隔开。
  4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：p{font-family:“宋体”;}、p{font-family:SimSun;}
  5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：p{font-family: ‘Times New Roman’;}/p{font-family: “Times New Roman”;}。
  6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体：

在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp系统不支持类似微软雅黑的中文。

  • 方案一： 可以使用英文来替代。 例如：使用p{font-family:“Microsoft Yahei”;}，表示设置字体为微软雅黑。

  • 方案二： 在 CSS 中直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 编码代替写中文字体名称，浏览器是可以正确的解析的。例如：使用p{font-family: “\5FAE\8F6F\96C5\9ED1”;}，表示设置字体为微软雅黑。

可以通过escape()来测试属于什么字体。

字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53

为了照顾不同电脑的字体安装问题，我们尽量只使用宋体和微软雅黑中文字体

3.font-weight:字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（范围最大值：100的整数倍）。例如：font-weight:bold;

小技巧： 数字 400 等价于 normal，而 700 等价于 bold。但是我们更喜欢用数字来表示。

4.font-style:字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现，但是CSS 是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。例如：font-style:normal;

italic：浏览器会显示斜体的字体样式。例如：font-style:italic;

oblique：浏览器会显示倾斜的字体样式。例如：font-style:oblique;

小技巧：

平时我们很少给文字加斜体，反而喜欢给斜体标签（i 和em）改为普通模式。

5.font:综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法格式如下：

选择器{
   
  font:font-style对应的属性值 font-weight对应的属性值 font-size对应的属性值（字号大小的数值）/line-height对应的属性值 font-family对应的属性值;
}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序（其实也可以换，但只针对某几个），各个属性值之间要用空格隔开。

注意：其中不需要设置的属性可以省略（即：取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

八、CSS外观属性

1.color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

  1. 预定义的颜色值：如red，green，blue等。例如：color:red;
  2. 十六进制（共6位，数值上由数字09、字母af组成，前两位代表红色数值，纯红色#ff0000、中间两位代表绿色数值，纯绿色#00ff00、后两位代表蓝色数值，纯蓝色#0000ff）：如#000000（纯黑色），#FF6600，#29D794，#ffffff（纯白色）等。实际工作中，十六进制是最常用的定义颜色的方式。（6位中的两两位（r、g、b）在数值上相同的情况下，可进行省略，例如：color:#000000;可省略写为color:#000;）
  3. RGB（共3位，数值上在0~255上取值）代码：如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。例如：color:rgb(23,43,65);

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

2.line-height:行间距

line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高（字号大小font-size+文字上、下行间距的数值）。line-height常用的属性值单位有三种，分别为像素px、em、百分比%，实际工作中使用最多的是像素px，一般情况下，行间距比字号大7/8像素左右就可以了。

行间距数值上一般与高度（盒子的高度）设为一致，用来解决垂直居中的问题，案例：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dV262d2w-1646280569858)(C:\Users\23921\AppData\Roaming\Typora\typora-user-images\image-20200324090644809.png)]

3.text-align:水平对齐方式

text-align属性用于设置文本等内容的水平对齐，类似于html中的align对齐属性，但其可以作用在所有文本、图等身上，而不像html中的align局限作用于在表格等身上。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

注意：text-align属性作用的是在文本框中的left/right/center，例如在width内设置水平居中：{width:200px;text-align:center;}

4.text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度，如果是汉字的段落，1em就是一个汉字的宽度；pc端16px也是一个字的宽度，但是必须满足是汉字的段落且font-size为默认数值（16px）的情况下，16px才是一个汉字的宽度。

5.letter-spacing:字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。其属性值可为不同单位的数值，允许使用负值，默认为normal。

6.word-spacing:单词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。

word-spacing和letter-spacing均可对英文进行设置。不同的是letter-spacing定义的为字母之间的间距，而word-spacing定义的为英文单词之间的间距。

7.颜色半透明（CSS3）

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

color:rgba(r,g,b,a) /*a是alpha不透明度的意思，取值范围在0~1之间*/
color:rgba(0,0,0,0.3)
color:rgba(23,43,12,.5)

8.文字阴影（CSS3）

给文字添加阴影效果（shadow：影子）。text-shadow的属性值是以标签内的原文本为基准的

text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色;
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色,水平位置 垂直位置 模糊距离 阴影颜色;
1498467502625
  1. 前两项是必须写的，后两项可以选写。
  2. blur代表模糊的程度，不支持负值。
  3. 各个属性值之间要用空格隔开。
  4. 文字阴影并不会占盒子的位置，不会影响自身和其他元素等。
  5. 例如：p{text-shadow: 59px 23px 3px blue;}、div{text-shadow: 3px 4px 5px rgba(0,0,0,.5);}
1498467519665

案例

news

九、标签显示模式（display）

标签的类型（显示模式）

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

1.块级元素（block）

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

  • 常见的块元素：

<h1>~

、

、

、
、、
  • 、
    1. 、
    2. 、
      、 /
      等，其中
      标签是最典型的块元素。

  • 块级元素的特点：

（1）总是从新行开始。

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

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

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

2. 行内元素（inline）

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

  • 常见的行内元素：

<a>、、、、、、、、、等，其中标签最典型的行内元素。

  • 行内元素的特点：

（1）可与相邻 行内元素 在同一行上。

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

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

（4）行内元素可以容纳 文本 或 其他行内元素 。（a标签特殊）

注意：

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

3.块级元素和行内元素区别

  • 块级元素的特点：
    （1）总是从新行开始
    （2）高度，行高、外边距以及内边距都可以控制。
    （3）宽度默认是容器的100%
    （4）可以容纳行内元素和其他块元素。

  • 行内元素的特点：
    （1）和相邻行内元素在一行上。
    （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
    （3）默认宽度就是它本身内容的宽度。
    （4）行内元素只能容纳文本或则其他行内元素。（a标签特殊）

4.行内块元素（inline-block）

在行内元素中有几个特殊的标签——（图片）、（表单元素）、（表格元素），可以对它们设置宽度、高度和对齐属性，有些资料可能会称它们为行内块元素。

  • 行内块元素的特点：
    （1）和相邻行内元素（行内块元素）在一行上（即不占有独立的区域）,但是之间可能会有空白缝隙（见下方bug案例）。
    （2）默认宽度（width）、高度（height）就是它本身内容（文本）撑起来的宽度、高度。
    （3）行高、边框、内边距及外边距等都可以进行调整。

案例：

inline-block有一个bug：代码中若有换行或空格，在最后的结果中在之间也会有空格，而不是连在一起输出的（下例中的div已被修改为行内元素，不单独占一行）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BRgXZXqo-1646280569859)(images\image-20200326093157203.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZLuSZ7FH-1646280569859)(images\image-20200326093211732.png)]；[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nu9YgG3l-1646280569860)(images\image-20200326093239963.png)]/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wbmSMQbI-1646280569861)(images\image-20200326093436610.png)]–>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T53po1WN-1646280569861)(images\image-20200326093257509.png)]

5.标签显示模式转换display

行内转块：display:block;

块转行内：display:inline;

块、行内转行内块： display: inline-block;

十、CSS复合选择器

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

1.交集选择器

交集选择器由两个选择器构成，两个选择器之间不能有空格，例如：h3.special。

记忆技巧：

  1. 交集选择器是 并且 的意思。即是…又是…的意思。

    比如：p.one选择的是： 即是p标签，类名又是为 one（class=“one”）的标签。

    ​ p#one选择的是： 即是p标签，id名又是为 one（id=“one”）的标签。

  2. 用的相对来说比较少，不太建议使用。

2.并集选择器

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

记忆技巧：

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

比如：.one, p , #test {color: #F00;} 表示.one（class=“one”） 、p标签、#test（id=“test”） 这三个选择器都会执行颜色为#F00。 通常用于集体声明。

3.后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。标签嵌套时，内层标签就成为外层标签的后代。

子孙后代都可以这么选择。 或者说，它能选择任何包含在内的标签。

例如：div span {color:purple;}，说明span一定在div中，但位置不一定。

4.子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个>进行连接，且>左右两侧各保留一个空格。注意：不可以越级（儿子指的是 亲儿子 ，不包含孙子、重孙子之类）

例如：.demo > h3 {color: red;}，说明h3一定是demo亲儿子。demo 元素包含着h3且h3仅为demo的下一级。

测试题

<div class="nav">    <!-- 主导航栏 -->
  <ul>
    <li><a href="#">公司首页</a></li>  <!-- 一级链接 -->
		<li><a href="#">公司简介</a></li>  <!-- 一级链接 -->
		<li><a href="#">公司产品</a></li>  <!-- 一级链接 -->
最低0.47元/天 解锁文章
于公子
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS入门
YDDUONG的博客
01-29 509
基本概念： CSS主要用于修饰网页的，对HTML进行标签修饰和布局划分(网页划分一本不用table标签来做) 常见块标签<div>, <p>, <h1>…<h6>, <ol>, <ul>, <li>, <form>等(独占一行) 常见行标签<span>, <a>, <i>, <em>, <strong>, <front>等 CSS引入方式
用javascript控制css中style.height和style.width时应注意px单位问题
飞翔的熊blabla
10-22 3365
JavaScript在ie中解析时，可以这样写： 1、document.getElementById('div').style.height=100;    //这样写以IE里会正确执行，把ID为div元素高改为100象素。 2、但是读的时候，alert(document.getElementById('div').style.height+10);    //这样将会出错，因为读取s
【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-09 3395
一、背景颜色 1、语法说明 2、代码示例 二、背景图片 1、语法说明 2、代码示例 三、背景平铺
CSS3 nth-of-type(n)选择器
lorry的博客
05-29 355
“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是...
BASE64转换为图片格式，并上传图片
热门推荐
weixin_45739956的博客
09-29 4万+
# 将BASE64转换为图片格式 **服务名: tmk** **服务Git组：hcc-api** ## 代码 ```java public static final String JPG = ".jpg"; public MessageBody<?> generate(GenerateImageRequest request) { String pinyin = PinyinUtil.getPinyin(request.getName(), S
CSS3:CSS3 知识点提炼整理
05-08
CSS3核心知识点 CSS 选择器 背景 & 颜色 & 边框 字体 & 描边 & 倒影 动画 transform & transition & keyframes @media 媒体查询 flex 弹性盒 width: 50}, CSS进阶顺序 基础 能还原设计稿、兼容各种主流浏览器 盒子...
css3笔记知识点总结
06-24
css3笔记知识点总结
HTML+CSS3基础知识点资源
最新发布
03-14
整理了很久，分享给初学者学习，让更多人学习HTML+CSS3
html+css知识点总结
06-24
html+css知识点总结
CSS知识点汇总.docx
09-01
CSS 知识点汇总 CSS（Cascading Style Sheets）是一种用于描述 HTML 或 XML 文档样式的标记语言。它可以控制文档的布局、颜色、字体、间距等样式。下面是 CSS 知识点汇总： CSS 单位 在 CSS 中，单位是指用来度量...
CSS3知识点归纳
07-26
自己整理的，如有不好，多多包含
CSS3基础相关知识点.txt
03-08
让我们一个走进前端的奇妙世界，这一路走来，虽然经历了千辛万苦，但是我们不要放弃自己学习的动力，慢慢地爱上它，并克服它，共同学习，共同进步，加油，加油，加油，让青春不再失去最初的意义，最后达到了一个自己...
《CSS3》学习笔记大全
04-12
下面是 CSS3 的一些重要知识点： CSS3 简介 CSS3 主要就是在 CSS2 的基础上增加了一些选择器和属性，并且完全向后兼容。CSS3 的主要优势是能够使得网页变得更加炫酷，之前需要用 JavaScript 才能实现的效果现在用 ...
Css3常用知识点.txt
01-22
Css3
html和css知识点总结.docx
04-03
HTML 和 CSS 是构建网页的基本语言，它们在...这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
【HTML/CSS篇】牛客题库练习
weixin_50927106的博客
08-28 1686
< dl > < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder < dt > nowcoder < dd > nowcoder
ASP.NET Core 认证与授权[3]:OAuth & OpenID Connect认证
极客神殿
10-24 4689
本文简单介绍了OAuth和的基本概念以及它们在 ASP.NET Core 中作为认证客户端的实现，如果我们只需要 “访问第三方资源” 的授权，使用OAuth认证即可。而在我们需要对自己的多个应用进行统一的身份验证时，应该使用来实现，不仅包含身份验证，还包含OAuth的授权协议，是更加推荐的做法。JWTBearer，也是在现代Web应用中比较流行的认证方式。
CSS知识点总结
m0_60560321的博客
08-13 1914
CSS学习期间记录的部分知识点总结
CSS用法
m0_66163230的博客
01-14 614
1、什么是CSS CSS是"Cascading Style Sheet"的缩写，中文名为级联样式单（层叠样式单）,层叠就是样式可以层层叠加，可以对一个元素进行多次设置样式，后面定义的样式会对前面定义的样式进行重写，我们在浏览器中看到的效果是使用最后一次设置的样式。它是一种表现语言，是对网页结构语言的补充。 CSS主要用于网页的风格设计，其中包括字体、颜色、位置等方面的设计。在HTML网页中加入CSS，可以使网页展示更丰富的内容。 2、CSS样式单的使用方式 CSS样式单可以增强HTML文档的显示效果
html5和css笔记.docx
04-09
通过学习和掌握HTML5和CSS3，开发人员可以创建出各种各样的网页，从简单的个人博客到复杂的企业网站。因此，学习和了解HTML5和CSS3是每位Web开发人员必须要做的事情。希望我的笔记对大家有所帮助，如果有任何建议和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值