前端CSS

最新推荐文章于 2024-01-09 20:48:14 发布

海蜇怪兽

最新推荐文章于 2024-01-09 20:48:14 发布

阅读量596

点赞数

分类专栏：前端学习兴趣文章标签： CSS

本文链接：https://blog.csdn.net/haizheguaishou/article/details/92608999

版权

CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
CSS代码语法
p（选择器）{color（属性）:blue（值）}
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
CSS注释
</**/>
CSS内联式样式
css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式CSS样式

嵌入式css样式，就是可以把css样式代码写在 <style type="text/css"></style>标签之间

嵌入式css样式必须写在style/style之间，并且一般情况下嵌入式css样式写在head/head之间。如右边编辑器中的代码。

<style>
span {
	color：red;
}
</style>

外部样式
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在

<link herf	="base.css"  rel="stylesheet" type="text/css" />
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。

三种方法的优先级
优先级：内联式 > 嵌入式 > 外部式
选择器
每一条css样式声明（定义）由两部分组成，形式如下
选择器 {
样式;
}
标签选择器

 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：
 p{font-size:12px;line-height:1.6em;}

类选择器
语法：

.类选器名称{css样式代码;}
注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文噢）

第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：
.stress{color:red;}/*类前面要加入一个英文圆点*/

ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id=“ID名称”，而不是class=“类名称”。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
ID选择器和类选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：

.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。

包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：

.first  span{color:red;}

子选择器>用于元素的第一代后代，包含选择器（空格）用于元素的所有后代

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.first div {
			color: blue;
		}
		div>p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="first">
		后代
	</div>
	<p>
		子孙
	</p>
	<p>
		二子孙
	</p>
	<p>
		三孙子
	</p>
	<ul><!--这个野孙子不会被选择-->
		<p>
			野孙子
		</p>
	</ul>
</body>
</html>

在这里插入图片描述
上图显示，ul中的p，野孙子没有被选择

例子二：
比如子选择器食物（food）中包含水果，水果里包括苹果香蕉等，子选择器只对水果有效果，而后代选择器，也会对苹果香蕉等有效果。
在这里插入图片描述

通用选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
 * {color:red;}

伪类选择符（像类的结构，但却不是类）
比如：a:hover{}
a标签中
a:hover悬浮在链接上{}
a:link未访问链接状态{}
a:visited已访问链接状态{}
a:focus有些浏览器按tab键可以轮流访问页面所有链接，设置一个focus焦点伪类值杜宇提高可访问性有帮助，要用键盘状态{}
a:active用户第一次访问处于活动状态{}

它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}

分组选择符
多个标签设置同一个样式的时候用分组选择符

举例子
span,div{color:red;}

继承
后代继承其属性，但有些是不继承的

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>继承性</title>
	<style>
		.baba {
			color: green;
		}
	</style>
</head>
<body>
	<div class="baba">
	<p>儿子(子承父业，会继承父元素的某些样式)</p>
	</div>
</body>
</html>

特殊性
根据权值判断使用CSS哪种样式
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。继承权值最低（0.1）
层叠
问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层叠样式表(css)</title>
	<style>
		div {
			color: red;
		}
		div {
			color: pink;
		}
	</style>
</head>
<body>
	<div>他是一条狗，1样式不冲突，不会层叠.2就近原则如上pink色</div>
</body>
</html>

特定值越大，规则特定性越高
如id选择器的特定值为100
类选择器的特定值为10
元素的特定值为1

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优先级</title>
	<style>
		.inkfish {
			color:black;
		}
		div {
			color: white;
		}
		</*显示黑色，因为类选择器权重高于div*/>
		*和继承 0000
		div 0001
		.inkfish 0010
		#inkfishi 0100
		行内样式 1000
		!important 无穷大

		注意1：权重会叠加
		注意2：继承的权重为0000
		举例子：
		虽然有!important但依然是p中的红色，因为继承的权重为0000
		.father {
			color: green!important;
		}
		p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="inkfish">乌贼</div>
	<div class="father"><p>继承的权重为0000</p></div>
</body>
</html>

面试练习题：
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>练习面试题1</title>
	<style>
		#father #son {
			color: blue;
		}
		#father p.c2 {
			color: black;
		}
		div.c1 p.c2 {
			color: red;
		}
		#father {
			color: green!important;/*继承权重值为0*/
		}
	</style>
</head>
<body>
	<div id="father" class="c1">
		<p id="son" class="c2">
		试问这行字体是什么颜色？
		</p

最低0.47元/天解锁文章

海蜇怪兽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端CSS

CSS样式CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。CSS代码语法p（选择器）{color（属性）:blue（值）}选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。声明：在英文大...
复制链接

扫一扫