CSS概述

张锦龙

已于 2022-02-27 16:10:32 修改

阅读量737

点赞数

文章标签： css html

于 2022-02-11 22:26:36 首次发布

本文链接：https://blog.csdn.net/qq_52919150/article/details/122889707

版权

本文详细介绍了CSS，包括其概述、基本语法、选择器、文本、背景、列表、伪类、透明度、块级元素、行级元素、盒子模型、清除默认样式、文档流、浮动和定位等核心概念，旨在帮助读者全面理解CSS在网页设计中的应用。

摘要由CSDN通过智能技术生成

1、CSS概述

CSS是Cascading Style Sheets(级联样式表)。
CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面。
可将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定义表现形式的CSS在一个.css文件中或HTML文档的某一部分。
CSS与HTML的关系
html是网页内容，css定义页面的样式。

2、CSS基本语法

行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置。
元素的样式，其基本语法格式如下：
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标签名>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 行内样式表就是在标签属性style中修饰 -->
		<p style="color: red;font-size: 20px;">静夜思</p>
	</body>
</html>

内嵌样式表，内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 内嵌样式表 -->
		<style type="text/css">
			p {
     
				color: red;
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<p>静夜思</p>
	</body>
</html>

外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 外部样式表 -->
		<link rel="stylesheet" type="text/css" href="css/out.css" />
	</head>
	<body>
		<p>静夜思</p>
	</body>
</html>

外部引入css/out.css文件：

p {
   
	color: red;
	font-size: 20px;

3、选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。
常用的选择器：
标签选择器：通过标签选择器可以选择页面中的所有指定标签。
语法：标签名 {}
类选择器：通过标签的class属性值选中一组标签。
语法：.class属性值{}
id 选择器：通过标签的id属性值选中唯一的一个标签。
语法： #id属性值 {}
选择器组合：通过选择器分组可以同时选中多个选择器对应的标签。
语法：选择器1,选择器2,选择器N{}
通配选择器:可以用来选中页面中的所有的标签。
语法：*{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器：标签p */
			p {
     
				color: antiquewhite;
			}

			/* id选择器：#p1 */
			#p1 {
     
				color: red;
				font-size: 30px;
			}

			/* 类选择器：.p2 */
			.p2 {
     
				color: orange;
			}

			.p3 {
     
				color: green;
			}

			/* *{}：通配选择器 */
			* {
     
				color: pink;
				p,
				h1,
				a
			}
		</style>
	</head>
	<body>
		<!-- 3.选择器：将样式表与指定的标签进行选择关联
		 （1）标签选择器
		 （2）id选择器
		 （3）类选择器
		 优先级：行内样式表>id选择器>类选择器>标签选择器
		 （4）通配选择器：优先级最低
		 -->
		<p id="p1">静夜思</p>
		<p class="p2">床前明月光</p>
		<p class="p2">疑是地上霜</p>
		<p class="p3">举头望明月</p>
		<p class="p3">低头思故乡</p>
		<h1>李白</h1>
		<a>杜甫</a>
	</body>
</html>

4、文本

color：字体颜色
font-size：字体大小
font-family：字体
text-align：文本对齐
text-decoration:line-through：定义穿过文本下的一条线
text-decoration:underline：定义文本下的一条线
text-decoration:none：定义标准的文本
font-style: italic;斜体文本
font-weight:字体粗细
line-height:设置行高
letter-spacing可以指定字符间距
text-indent用来设置首行缩进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1 {
     
				/*字体颜色*/
				color: red;
				/*字体大小*/
				font-size