第三章.CSS重难点详解(上)

小刘的前端之路

已于 2022-04-01 10:25:35 修改

阅读量350

点赞数

分类专栏：前端基础文章标签： css3

于 2022-03-30 08:12:21 首次发布

本文链接：https://blog.csdn.net/liuzizhoufaith/article/details/123836841

版权

前端基础专栏收录该内容

21 篇文章 4 订阅

订阅专栏

第三章 CSS

第一讲.CSS简介

网页分为三个部分:结构html,表现css,行为js

只用html写出来的网页并不好看

CSS中文叫层叠样式表(包含很多样式)

层叠:网页实际上是分层的,一层压着一层

通过CSS可以为网页的每一层设置样式,但是我们能看到的始终是最上面一层

如何使用CSS修改元素样式?

例:

<html>
	<head>
		<title> </title>
	</head>
	<body>
		<p> 少小离家老大回，乡音无改鬓毛衰</p>
	</body>
</html>

在标签内部通过style属性来设置元素的样式

style=‘样式名1:样式值1;样式名2:样式值2;’

<p style='color:red;font-size:30px'> 少小离家老大回，乡音无改鬓毛衰</p>

这种方式称为内联样式,或者行内样式

第二讲.CSS编写的位置

内联样式的问题:样式只能对一个标签生效,如果希望影响到多个元素,就必须每个都复制一遍.而且修改起来很麻烦

开发时,绝对不要使用内联样式!!!

于是有了第二种方式:内部样式表

将样式标签编写到head的style标签里

优点:可以同时为多个标签编写样式,方便复用

语法为:标签名{样式名1:样式值1;样式名2:样式值2}

<html>
	<head>
		<style>
			p{
            	color:green;
            	font-size:50px;
            }
   		    表示为所有的p元素设置共同的样式
		</style>
	</head>
	<body>
		<p> 少小离家老大回，乡音无改鬓毛衰</p>
	</body>
</html>

缺点:内部样式只能对一个网页起作用,它里面的样式不能跨页面进行复用

于是,有了第三种方式:外部样式表

可以将CSS样式编写到一个外部的CSS文件中:

p{
	color:green;
	font-size:50px;
}

然后通过link标签将其引入html:

格式:

<html>
	<head>
		<link rel='stylesheet' href='./style.css'>
	</head>
	<body>
		<p> 少小离家老大回，乡音无改鬓毛衰</p>
	</body>
</html>

优点:可以在所有网页当中复用,是最佳的使用方式,是用的最多

将样式编写到外部CSS中,可以使用浏览器的缓存机制,从而加快网页的访问速度,提高用户体验

但是学习中一般使用内部样式表

第三讲.CSS基本语法

style标签里面不属于html区域,里面不能写html的语句,因此不遵循html规范,而是css语法规范

css注释方式为:

/*
CSS中的注释 
*/

注释的快捷键为:ctrl+/

CSS分两大块:

CSS选择器

通过选择器可以选定页面中的指定元素

比如p标签的作用就是指定页面中所有的p元素
```
p{
}
```
CSS声明块

指定为元素设置的样式.由一个一个的声明组成,一个声明:
```
color: red;
```
声明是键值对,用’:‘链接,以’;'结尾

第三讲.常用选择器

元素选择器:

根据标签名选中指定的元素
```
p{}
h1{}
```
但是如果只想将某一句话单独设置样式,就不能用这个选择器
ID选择器:
根据元素的ID属性值选中一个元素

语法:#+选择器名

id设置如下:
```
<p id='abc'> 少小离家老大回 </p>
```
则声明块里面应该写:
```
#abc{
    color:red;
}
```
但是:ID不能重复,想复用是不可以的

于是有了class,它和ID的区别就是class可以重复,来为元素分组

类选择器

根据class属性值选中一组元素

语法:.+选择器名

class设置如下:

<p class='abc'> 落霞与孤鹜齐飞</p>
<p class='abc'> 秋水共长天一色</p>

则声明块里面应该写:

.abc{
	color=blue;
}

开发时用的最多的就是class选择器

一个元素可以有多个class,这样多个选择器都可以选中它

<p class='abc' class='def'> 落霞与孤鹜齐飞</p>
<p class='abc' class='xyz'> 秋水共长天一色</p>

然后可以叠加使用:

.abc{
	color=blue;
}
.def{
	font-size=50px;
}
.xyz{
	font-size=30px;
}

通配选择器

选中页面中的所有元素,用于设置基础配置

语法:*+选择器名

第四讲.复合选择器

交集选择器:

选中同时符合多个条件的元素

语法:选择器1选择器2选择器3选择器n{}
```
<div class='red'> 我是div </div>
<p class='red'> 我是p </p>
```
那么选中div的方式就是:
```
div.red{
	font-size=30px;
}
```
交集选择器中如果有元素选择器,则必须使用元素选择器开头

一般是类和元素,或者类和类取交集
并集选择器:
同时选中多个选择器对应的元素

语法:选择器1,选择器2{}
```
<h1>我是h1 </h1>
<span>我是span </span>
```
两个要一起设置的话,则为:
```
h1,span{
	color:blue;
}
```
也有这样的:
```
#b1,.p1,h1{}
```

第五讲.关系选择器

父子选择器,兄弟选择器一类

父元素<–>子元素祖先元素<–>后代元素兄弟元素

一个元素的父元素也是它的祖先元素,但是父元素只有一个,祖先元素可能有很多.

<div>
	我是div
	<p> 
		我是div中的p元素
		<span>我是p元素中的span </span>html
	</p>
    <span>我是div中的span</span>
</div>

p元素是div的子元素,span是p元素的子元素,span是div的后代元素

子元素选择器:

选中指定父元素的指定子元素

语法:父元素>子元素

如果想要div的子元素span:
```
div>span{
    	color:red;
}
```
也可以复合使用:
```
div.box>span{
	color:blue;
}
```
也可以连续使用:
```
div>p>span{
	color:red;
}
/*找的是div中的p中的span
```
后代元素选择器:
可以选中指定元素内部的指定后代元素

语法:祖先后代
```
div span{
	color:skyblue;
}
/* 这样可以选中div里的所有span */
```
后代选择器比子元素选择器更常用
兄弟元素选择器

选择下一个兄弟元素(不选择自己)

语法:前一个+下一个
```
p+span{
	color:green;
}
```
也可以选择下面所有的兄弟元素:

语法:兄~弟
```
p~span{
	color:gray;
}
```

第六讲.属性选择器

根据元素属性选择元素

补充一个属性:

title属性:当鼠标放在有title属性的文字上,会出现提示文字,提示内容为title里写的内容

<p title='abc'> 少小离家老大回</p>
<p title='def'> 乡音无改鬓毛衰</p>
<p title='opq'> 儿童相见不相识</p>
<p title='xyz'> 笑问客从何处来</p>

则可以利用属性来选中指定元素:

选择所有具有该属性的元素(不关心属性值为多少)

语法: 元素名[属性名]

元素名可以用*代替,表示任意具有title的元素
```
p[title]{
	color:red;
}
```
选择具有特定属性和属性值的元素

语法:元素名[属性名=属性值]
```
p[title='abc']{
	color:blue;
}
```
选择以特定属性值开头的元素

语法:元素名[属性名^=属性值]
```
p[title^='abc']{
	color:purple;
}
```
选择属性值以指定值结尾的元素

语法:元素名[属性名$=属性值]
```
p[title$='abc']{
	color:purple;
}
```
属性值中含有某值的元素

语法:元素名[属性名=属性值]*
```
p[title*='abc']{
	color:purple;
}
```

第七讲.伪类选择器

伪类:不存在的类,特殊的类,用来描述一个元素的特殊状态

比如:动态变化数组的第一个子元素,被点击的元素,鼠标移入的元素

伪类一般情况下都是使用’:'开头

<ul>
	<li>第一个</li>
    <li>第二个</li>
    <li>第三个</li>
    <li>第四个</li>
    <li>第五个</li>
</ul>

**:first-child **第一个子元素:
```
ul>li:first-child{
	color:red;
}
```
last-child 最后一个子元素

与第一个相同
nth-child(n) 第n个子元素
```
ul>li:nth-child(3){
	color:red;
}
```
特殊值:
- 如果直接写n,指的是所有元素.
- even表示选择偶数
- odd表示选择奇数

以上这些伪类都是依据所有的子元素进行排序的,即ul>li:first-child,指的不是第一个li,而是所有子元素的第一个,如果是li才可以

于是,为了实现特定种类元素的第一个子元素查找,我们有了:

first-of-type:

在同类型元素中寻找第一个子元素
```
ul>li:first-of-type{
	color:red;
}
```
它找的就是li类型里的第一个元素.
last-of-type:

同类型元素中寻找最后一个子元素
nth-of-type(n):

同类型元素中寻找指定的元素

特殊伪类:

not():否定伪类

将符合条件的元素从选择器中去除

ul>li:not(li:nth-of-type(3)){
	color:green;
}

第八讲.超链接的伪类

<a href='http://www.baidu.com'> 百度</a>

链接的状态:

访问过的链接

:visited用来表示访问过的链接

为了避免隐私的暴露,所以visited这个伪类只能修改链接的颜色
```
a:visited{
	color:blue;
}
```
将访问过的链接设置为蓝色
没访问过的链接

:link表示没访问过的链接(正常的链接)
```
a:link{
	color:red;
}
```
将没访问过的链接设置为红色
鼠标移入的状态

:hover用来表示鼠标移入的状态
```
a:hover{
	color:aqua;
}
```
当鼠标移动到超链接上时,超链接颜色会改变
鼠标点击

:active用来表示鼠标点击的状态
```
a:active{
	color:yellow;
}
```

第九讲.伪元素选择器

伪元素:表示页面中特殊的,并不真实存在的元素(表示特殊的位置)

如:首字母.伪元素使用’::'开头

首字母:

::first-letter
```
p::first-letter{
	font-size:50px;
}
```
第一行

::first-line
```
p::first-line{
	background-color:yellow;
}
```
background-color背景颜色
选中的内容

::selection
```
p::selection{
	background-color:green;
}
```
给选中的内容设置背景颜色为绿色
元素的开始位置(第一个字符之前)

::before

before和after必须结合content属性来使用
```
div::before{
	content:'abc';
    color:red;
}
```
在第一个字符之前添加abc
元素的结束位置(最后一个字符之后)

::after
```
div::after{
	content:'xyz';
	color:blue;
}
```
在最后一个字符之后添加xyz