css基础知识(1）

最新推荐文章于 2024-01-31 17:28:10 发布

花京院嚯

最新推荐文章于 2024-01-31 17:28:10 发布

阅读量679

点赞数

分类专栏：笔记文章标签： css3 前端

本文链接：https://blog.csdn.net/m0_62520946/article/details/122747711

版权

笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

一.css的定义

css为层叠样式表

网页实际是一个多层的结构，通过css可以分别为网页的每一个部分进行编辑。

二.样式种类

1）内联样式

方法：在相关的标签中使用样式属性。

作用：只对当前的元素内容进行编写样式，不方便以后的修改。

示例：

<p style="color: red; font-size: 20px">
This is a paragraph
</p>

效果：

2）内部样式表

方法：将样式编写到head中的style标签里，然后通过css的选择器选中元素并为其设置各种样式

作用：可以同时为多个标签设置样式，并且修改时只需要改一处即可。

缺点：只能对一个页面起作用，里边的样式不能跨页面。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		p{
			color: red;
			font-size: 20px
		}	
		</style>
	</head>
	<body>
		<p>
		This is a paragraph
		</p>
		
	</body>
</html>

效果：（同上）

3）外部样式表

方法：需要通过link标签来引入，在不同的页面进行复用

作用：可以最大限度地使用到浏览器的缓存机制，加

快加载速度，提高用户体验。

示例：

style.css

p{
	color: blue;
	font-size: 30px;}

使用css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css简介</title>
		<link rel="stylesheet" href="./style.css"/>
		
	</head>
	<body>
		
		<p>落霞与孤鹜齐飞，秋水共长天一色</p>
		
		
	</body>
</html>

效果：

三.基本语法

语法分为：选择器和声明块

1）选择器

通过选择器选页面中的指定元素，比如p的作用是选中页面中的所有p元素

2）声明块

指定要为元素设置样式，选择器由一个一个声明块组成，声明块中实际上就是一组一组的名值对结构。

多个声明之间用分号隔开，声明的样式名和样式值之间使用冒号连接。

3）css注释

以 /* 开始，以 */ 结束

四.元素关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素

后代元素：直接或间接被祖先元素包含的元素

兄弟元素：拥有相同父元素的元素

五.css选择器

1）元素选择器

根据元素名称来选择 HTML 元素

语法：标签名{} 如p{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		p{
        color:red;
         }
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果：

2）id选择器

作用：根据元素的id属性选中一个元素

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素

语法：#id属性值{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#red{
			color: red;
		}
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果：

另外：class也是一个标签属性，但class可以重复使用

3）类选择器

作用：根据元素的class属性值选中某一元素，可以为同一个元素指定多个class属性

语法：.class属性值{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.blue{
			color: red;
		}
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果:

4）通配选择器

作用：用来选中页面中所有的元素

语法：*{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			color: red;
		}
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果：

5）选择器分组（并集选择器）

作用：同时选中多个选择器对应的元素

语法：选择器1，选择器2，选择器3..选择器n{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.blue,#red{
			color: red;
		}
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果：

6）复合选择器（交集选择器）

作用：选中同时满足多个选择器的元素。

语法：选择器1选择器2选择器3...选择器n{}

示例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		.blue.abc{
			color: blue;
		}
		
		</style>
		
	</head>
	<body>
		<p class="blue abc">
			鹅，鹅，鹅，</p>
		<p>	曲项向天歌，</p>
		<p id="red">	白毛浮绿水，</p>
		<p class="blue"> 红掌拨清波。</p>
		
	</body>
</html>

效果：

7）子元素选择器

作用：选中指定父元素中的子元素

语法：父元素>子元素

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		div>span{
			color: blue;
		}
		
		</style>
	</head>
	<body>
		<div>
			我是一个div
	        <p>
				我是div中的p元素
				<span>我是p元素中span元素</span>
			</p>
			<span>我是div中的span元素</span>
		</div>
	</body>
</html>

效果：

8）后代元素选择器

作用：选中指定元素中的后代元素

语法：祖先元素后代元素

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
		div span{
			color: orange;
		}
		</style>
	</head>
	<body>
		<div>
			我是一个div
	        <p>
				我是div中的p元素
				<span>我是p元素中span元素</span>
			</p>
			<span>我是div中的span元素</span>
		</div>
	</body>
</html>

效果：

9）兄弟元素选择器

语法	作用
前一个+后一个{ }	选中的是后一个的元素
前一个~后面所有{ }	选中后面所有兄弟元素

示例：

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

效果：

10）伪类选择器

（不存在的类，特殊的类）

作用：用来描述一个元素的特殊状态

比如：第一个元素，被点击的元素，鼠标移入的元素

伪类一般情况下都是使用：开头。

1. 常用伪类

常用伪类	作用
:first-child	第一个子元素
:last-child	最后一个子元素
:nth-child(n)	选中0到无穷个子元素
:nth-child(2n/even)	选中偶数位元素
:nth-child(2n+1/odd)	选中奇数位的元素
:first-of-type	选中同类型的第一个
:last-of-type	选中同类型的最后一个
:nth-of-type	选中同类型的第n个
:not()	否定伪类，将符合条件的元素从选择器中去除

2.<a></a>标签的伪类顺序

常用伪类	作用
:link	用来表示没有访问过的链接
:visited	用来表示访问过的链接
:hover	用来表示鼠标移入的状态
:active	用来表示鼠标点击的状态

3.伪元素

作用：表示页面中一些特殊的并不真实的存在的元素（特殊位置）

语法：以::开头

常用元素	作用
::first-letter	表示第一个字母
::first-line	表示第一行
::selection	表示选中的内容
::before	表示选中元素的最开头
::after	表示选中元素的结尾

注意：befor和after必须结合content来使用

11）属性选择器

作用：根据元素的属性及属性值来选择元素。

语法	作用
【属性名】	选取含有指定属性的元素
【属性名=属性值】	选取含有指定属性值的元素
【属性名^=属性值】	选取属性值以指定内容开头的元素
【属性名$=属性值】	选取属性值以指定内容结尾的元素
【属性名*=属性值】	选取属性值以包含指定内容的元素

六.样式继承

目的：方便开发。

作用：我们为一个元素设置的样式同时也会应用到它的后代元素，继承是发生在祖先后代之间的。这样只需要设置一次就可以让所有元素都具有该样式。

注意：不是所有样式都会被遗传，比如，背景相关的，布局相关的样式不会被继承。

七.选择器的权重

1）样式的冲突：

当我们通过不同的选择器，选中相同的元素，并且为相同的元素设置了不同的值时，此时就发生了样式的冲突。

2）权重

选择器	优先级
内联样式	1000
id选择器	100
类和伪类选择器	10
元素选择器	1
通配选择器	0
继承样式	没有优先级

注意：

1.并集（分组）选择器的优先级单独计算

2.比较优先级时，需要将选择器的优先级进行相加，计算

3.选择器的累加不会超过最大的数量级。

花京院嚯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css基础知识(1）

1.css的定义css为层叠样式表网页实际是一个多层的结构，通过css可以分别为网页的每一个部分进行编辑。2.样式种类1）内联样式方法：在相关的标签中使用样式属性。作用：只对当前的元素内容进行编写样式，不方便以后的修改。示例：<p style="color: red; font-size: 20px">This is a paragraph</p>效果：...
复制链接

扫一扫