CSS样式

最新推荐文章于 2025-04-30 01:11:37 发布

Downhill Wind

最新推荐文章于 2025-04-30 01:11:37 发布

阅读量107

点赞数

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/Cream336/article/details/131603526

版权

本文介绍了CSS的三种引入方式——行内样式、内部样式和外部样式，强调了表现与内容分离的重要性。接着详细讲解了选择器，包括标签、类、ID以及属性选择器，并探讨了选择器的优先级。此外，还讨论了在实际开发中如何选择合适的样式引入方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式

1.css引入方式（重点）

2.css选择器（重点）

3.css盒子模型（重点）

4.css3常见效果（重点）

级联样式表

css介绍

引用百度百科

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

css概述

层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）

css引入方式

行内样式

行内样式（将样式直接写在标签上），需要使用style属性

		<!-- 行内样式 -->
		<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
		<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
		<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>

该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护

内部样式

讲页面内容与表现形式进行分离，方便对样式进行统一管理

		<!-- 我现在写css样式，是html标签吗？ 不是标签，样式在html基础书写 -->
		<style>
			/* 选择器 */
			div{
				color: brown;
				border: 1px solid red;
			}			
			p{
				color: pink;
			}
		</style>		
	</head>
	<body>		
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>		
		<p>小面包</p>
		<p>小cookie</p>
		<p>小饼干</p>		
	</body>

外部样式

对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可。

	<head>
		<meta charset="utf-8" />
		<title></title>		
		<!-- 引入css样式： link -->
		<link rel="stylesheet" type="text/css" href="css/01.css" />		
		<!-- 引入css样式：@import  -->
		<!-- 
         <style>
			@import url("css/01.css");
		</style> -->
	</head>
	<body>		
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>
		<div>每天叫醒我的不是闹钟，是梦想！！！</div>		
		<p>小面包</p>
		<p>小cookie</p>
		<p>小饼干</p>		
	</body>

样式的优先级

	<head>
		<meta charset="utf-8">
		<title></title>		
		<!-- 外联样式 -->
		<link rel="stylesheet" type="text/css" href="css/01.css" />		
		<!-- 内联样式 -->
		<style>
			div{
				color: red;
			}
		</style>		
	</head>
	<body>		
		<!-- 就近原则： 行内样式 > 内联样式 > 外联样式  
			 注意事项： 今后尽量不要对同个html进行多个样式书写			 
			 如何选择三种样式写法？
			 1、如果样式是固定并且不修改并且很少情况，行内样式
			 2、如果样式针对当前html页面做的样式，并且量比较大的情况下， 内联样式
			 3、如果你的样式是通用，如果你的css代码很多，外联样式，需要创建一个css文件，引入
		-->		
		<!-- 行内样式 -->
		<div style="color: green;">每天叫醒我的不是闹钟，是梦想！！！</div>		
	</body>

样式选择

三种样式引入方式，在实际开发过程中该如何选择

1.如果是通用样式，就选择外联样式

2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理

3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式

4.除了上面的几种情况，通常使用的都是内联样式

选择器

选择器可以快速、方便的选择所需要使用的页面元素

基本选择器

基础选择分三种，分别是：标签选择器、类选择器、id选择器

标签选择器

标签选择器主要是根据标签的名字进行元素的选择

语法：标签名{}

例如：div{color:red;font-size:20px;}

<div class="div-cls">昨日头条：国家公祭日</div>
<div class="p-cls" id="p-id">昨日头条：国家公祭日</div>
<div class="div-cls">昨日头条：国家公祭日</div>
<p class="p-cls">抗疫头条：郑州二七万达参与检测的都是阴性，无大碍</p>
<h4 class="h4-cls">学习头条：谢小飞分享进步了，再接再厉</h4>

/*标签选择器是根据标签名来的，会选中当前页面中所有该标签*/
div{
	color: #00BFFF;
}
p{
	color: #483D8B;
}
h4{
	color: #1E90FF;
}

类选择器

类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置

语法：.类名{}

.div-cls{color:red;}

调用：<标签 class=‘类名’>

.div-cls{color: red;}
.p-cls{	color: green;}
.h4-cls{color: blue;}

id选择器

id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）

语法：#id名{}

例如：#div-id{color:red;}

/*id选择器：在标签上添加了一个id属性，作为唯一标识，通常不允许重复*/
#p-id{
	color: #483D8B;
}

属性选择器

属性选择器是根据元素上已有的属性标识进行选择。

语法：[属性名=‘’]{}

<button title="普通按钮">普通按钮</button>
<a href="http://www.baidu.com">百度链接</a>
<a href="www.sina.cn">新浪博客</a>
<a href="http://www.yunhe.cn">云和数据</a>
<img src="girl.jpg" title='提示'/>

/*具有title属性的元素*/
[title]{
  font-size: 18px;
}
/* 以...开始 */
[href^="http"]{
  color: #008B8B;
}
/* 以...结束 */
[href$="cn"]{
  color: #483D8B;
}
/*href中包含有i*/
[href*='i']{
  color: #808080;
}

后代兄弟选择器

后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素

		<style>			
			/* 层级选择器 */			
			/* 祖宗后代 */
			div span{
				color: #00ff00;
			}
			/* 父子选择器 */
			div > span{
				color: red;
			}
			/* 兄弟选择器 */
			div ~ p{
				background-color: #FFC0CB;
			}
			/* 跟班选择器 */
			p + span {
				background-color: #008000;
			}
		</style>
	</head>
	<body>		
		<!-- 在包裹关系中，样式有继承关系 -->
		<div>
		    div中的不带标签的内容
			<p>
				<a href="">百度一下
					<span>你就知道  </span>
				 </a>
			</p>
			<a href="">一燕一下</a>
		    <span>后代选择器，注意很常用</span>
		</div>
		<!-- 所有的选择器默认是从body标签中进行查找元素的 -->
		<p>
		    <span>p标签中的span标签</span>
		</p>		
	</body>

组合选择器

<div>
    div中的不带标签的内容
    <span>组合选择器，注意很常用</span>
</div>
<p>
    <span>p标签中的span标签</span>
</p>
<h4>
    <span>h4标签中的span标签</span>
</h4>

/* 并集选择器 */
div span,p span{
    color: #00BFFF;
}

伪类选择器

伪类选择器是css3中提供的用于快速查找元素的便捷选择器，本章节只演示开发中常用的:nth-of-type选择器

<p>
    <span>百度新闻</span>
    <span>新浪官网</span>
    <span>云和官网</span>
    <span>腾讯官网</span>
    <span>人人编程官网</span>
  </p>

/* 伪类选择器：nth-of-type(n) */
/* p :nth-of-type(2n+1){
color: #1E90FF;
}
p :nth-of-type(2n){
color: darkcyan;
} */
span:nth-of-type(2n+1){
    color: #483D8B;
    font-size: 18px;
}
span:nth-of-type(2){
    color: #FF0000;
}

伪类选择器在超链接上的应用，超链接的字体颜色只有将样式直接作用在超链接上时才会生效

LVHA

/* 默认未被点击的状态 */
a:link{
  color: red;
}
/* 访问之后的状态 */
a:visited{
  color: darkgoldenrod;
}
/* 处在活动状态 */
a:active{
  color: brown;
}
/* 鼠标悬浮时的状态 */
a:hover{
  color: aqua;
}

通配符

*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能

*{
  color:red;
  font-size:20px;
}

使用通配符和使用选择器有什么区别

开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能

选择器优先级

网页中的选择器多种多样，可以组合使用，当同一个元素有多个样式时，最终生效的样式与优先级有关

<div class="div-cls" >
  <span class="span-cls" id="span-id" style="color: red;">选择器优先级</span>
</div>

/* 
!important>行内样式>id选择器>类选择器>标签选择器
			1000	100 	10 		1
*/
/*1+100=101*/
div #span-id{
  color: darkcyan;
}
/*100*/
#span-id{
  color: blue;
}
/*10+10=20*/
.div-cls .span-cls{
  color: black;
}
/*10+1=11*/
.div-cls span{
  color: red;
}
/*1+10=11 如果权重值相同，后台会覆盖上面样式*/
div .span-cls{
  color: #B8860B;
}
/*10*/
.span-cls{
  color: blueviolet;
}
/*1+1=2*/
div span{
  color: #A52A2A;
}
/*1*/
span{
  color: #7B68EE!important;
}