CSS简单应用

最新推荐文章于 2024-07-10 23:34:24 发布

Uniago

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量470

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq1912238134/article/details/106741075

版权

一、CSS概述

CSS：（Cascading Style Sheet）级联样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。简单来说CSS就是用于美化网页的。

CSS的优势：

内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收

二、CSS的基本样式介绍

color：设置文本颜色，例如green、red、blue等。
border：设置边框
width：设置宽度
height：设置高度
background：设置背景色
text-align：设置文本水平对齐方式，例如text-align:right;
text-align的值：left：默认值，把文本排列到左边；right：把文本排列到右边；center：把文本排列到中间；justify：实现两端对齐文本效果。
font：在一个声明中设置字体属性，例如font:italic bold 20px “宋体”
font-familly：设置字体类型，例如楷体、宋体等。
font-size：设置字体大小，例如20px（像素）。
font-style：设置字体风格，例如italic。
font-weight：设置字体的粗细，例如bold（加粗）
font-weight的值：normal：默认值，定义标准的字体；bold：粗体字体；bolder：更粗的字体；lighter：更细的字体；100~900：定义由细到粗的字体，400等同于normal，700等同于bold。

如果想要在一段文字中设置不同的样式，可以使用span标签
语法：

<p> 
	如果想要在<span style="color:red;">一段文字</span style="font-size:20px;">中设置不同的<span>样式</span>，可以使用span标签。
</p>

span标签可以将一部分文字包裹住统一设置样式。像strong、em、u标签一样，是行级标签。

三、CSS的三种样式

1、行内样式

行内样式：顾名思义，就是将style样式直接写在HTML标签中。

格式：

<p style="color: red;">CSS行内样式</p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS行内样式</title>
	</head>
	<body>
		<div>
			<p>CSS行内样式例句1</p>
			<!-- 行内样式 -->
			<!-- style="key: value" -->
			<p style="color: red; font-size: 20px;">CSS行内样式例句2</p>
		</div>
	</body>
</html>

优点：简单直接,每次给一个标签赋予某些样式
缺点：有些相同样式不能复用,并且标签多了的话样式写起来很乱很麻烦

2、内部样式

内部样式：将style样式使用style标签同一写在head标签中。

格式：

<head>
	<style type="text/css">
	h1{
		font-size:10px;	
	}
	</style>
</head>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS内部样式</title>
		<style type="text/css">
			p{
				color: greenyellow;
				font-size: 30px;
				font-family: 楷体;
				/* 加粗 */
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div>
			<!-- 采用了内部样式 -->
			<p>CSS内部样式例句1</p>
			<!-- 行内优先级高于内部样式 因此颜色采用了行内样式 -->
			<p style="color: darkmagenta;">CSS内部样式例句2</p>
		</div>
	</body>
</html>

优点：本页面的CSS可以得到很好的复用
缺点：内部样式无法在文件与文件之间共享样式,而且内部样式写多了之后整个页面的可读性变差,内容全都耦合在一起不方便修改和阅读

3、外部样式

外部样式：将style样式写到css文件中，哪个HTML网页需要使用该样式就将css文件通过标签引入到head标签中即可。

格式：

<head>
	<!-- href:css文件的路径 -->
	<!-- rel：指定使用外部样式表 -->
	<!-- type：指定文件类型 -->	
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

css文件：

/**
 * CSS外部样式
 * 样式写入到一个文件中，哪个html网页需要使用，直接将该css文件引入即可
 * 
 */
p{
	color: greenyellow;
	font-family: "宋体";
	font-weight: bold;
	font-size: 50px;
	align-content: center;
}

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS外部样式</title>
		<link rel="stylesheet" type="text/css" href="css/css_style.css"/>
		<style type="text/css">
			p{
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<!-- 内部优先级高于外部样式 因此字体大小采用了行内样式 -->
		<p>CSS外部样式例句1</p>
		<!-- 行内优先级高于外部样式 因此颜色采用了行内样式 -->
		<p style="color: red;">CSS外部样式例句2</p>
	</body>
</html>

4、3种样式的优先级

样式的优先级采用就近原则，哪个样式离HTML标签近就采用哪个样式。

行内样式优先于内部样式
内部样式优先于外部样式

优先级：行内样式 > 内部样式 > 外部样式

四、CSS的三种选择器

1、标签选择器

标签选择器：将HTML标签作为标签选择器的名称，覆盖的范围最大，优先级最低。

语法:

标签选择器{
	/* 声明 */
	属性：值；
}

p{
	font-size:10px;
}

2、类选择器

类选择器：将HTML标签中的class属性作为选择器的名称，因为标签的class属性的值可以重复,所以通过class属性可以获取一个或者多个标签,从而来设置他们的样式。覆盖范围适中，优先级适中。

语法：

/* #id名称   id选择器 */
#id{
	/* 声明 */
	属性：值；
}

.class{
	font-size:10px;
}

3、id选择器

id选择器：将HTML标签中的id属性作为选择器的名称，通过HTML设置的id属性来获取表单,由于一个HTML页面中每个标签的id属性是唯一的,所以这个选择器每次只能获取一个标签。范围覆盖最小，优先级最高。

语法：

/* 标签.类名   类选择器 */
标签.类名{
	/* 声明 */
	属性：值；
}

#id{
	font-size:10px;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>CSS三种选择器</title>
		<style type="text/css">
			/* 标签选择器 可以选择body中所有相同的标签 选择范围最大 */
			p{
				color: red;
			}
			
			/* 类选择器 可以选择一个标签下同一组类名相同的标签 选择范围中等*/
			p.c1{
				font-family: 楷体;
			}
			/* id选择器 可以选择唯一id的标签 选择范围最小*/
			#i1{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div>
			<!-- 标签 选择全部， class 选择一组，	id 选择唯一 -->
			<!-- class属性可以重复，id属性尽量不要重复（id应该是唯一标识） -->
			<p class="c1" id="i1">CSS选择器例句1</p>
			<p class="c2" id="i2">CSS选择器例句2</p>
			<p class="c1" id="i3">CSS选择器例句3</p>
			<p class="c2" id="i4">CSS选择器例句4</p>
		</div>
	</body>
</html>

4、CSS选择器的优先级

特点：哪个选择器单独影响范围小就执行哪个选择器

id选择器优先于类选择器
类选择器优先于标签选择器

不论哪种方式引入CSS样式，优先级一般都遵循：id选择器 > class类选择器 > 标签选择器

Uniago

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS简单应用

一、CSS概述CSS：（Cascading Style Sheet）级联样式表，表现HTML或XHTML文件样式的计算机语言，包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。简单来说CSS就是用于美化网页的。CSS的优势：内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收二、CSS的基本样式介绍color：设置文本颜色，例如green、red、blue等
复制链接

扫一扫