CSS学习——01

balld

已于 2024-04-15 22:27:49 修改

阅读量1k

点赞数 11

分类专栏：前段文章标签： css 前端

于 2024-03-22 15:33:42 首次发布

本文链接：https://blog.csdn.net/gyl_java/article/details/136874356

版权

前段专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的简介、语法规范、各种选择器（如标签选择器、类选择器、ID选择器和通配符选择器）、字体和文本属性，以及CSS的三种引入方式：内部样式表、行内样式表和外部样式表。

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

CSS学习

CSS简介
- CSS语法规范
CSS基础选择器
字体属性
文本属性
CSS的引入方式

CSS简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述文档样式和布局的标记语言。通过CSS，开发者可以控制网页的外观和布局，使页面看起来更美观、更具吸引力。以下是CSS的一些重要特点和用法：

分离内容和样式：CSS允许将样式信息从HTML文档中分离出来，使得页面的结构和样式可以分开维护和修改，提高了代码的可维护性和可重用性。
样式规则：CSS通过样式规则（Style Rules）来定义元素的样式。每个样式规则由选择器（Selector）和声明块（Declaration Block）组成。选择器用于选择要应用样式的元素，声明块包含了一组属性-值对，用于描述元素的样式。
样式属性：CSS提供了丰富的样式属性，如颜色、字体、边框、背景、布局等。开发者可以通过设置这些属性来改变元素的外观和布局。
层叠和继承：CSS中的“层叠”（Cascading）指的是多个样式规则作用于同一个元素时，通过特定的规则来确定最终的样式。另外，CSS中的“继承”（Inheritance）指的是子元素可以继承父元素的某些样式属性。
响应式设计：CSS可以用于实现响应式设计，即根据用户设备的不同尺寸和分辨率来调整页面的布局和样式，以提供更好的用户体验。
选择器：CSS提供了多种选择器，如元素选择器、类选择器、ID选择器、后代选择器、伪类选择器等，用于精确地选择要应用样式的元素。
框模型：CSS中的盒模型（Box Model）描述了元素在页面中所占的空间，包括内容区、内边距、边框和外边距。通过调整这些属性，可以控制元素的大小和间距。

CSS语法规范

CSS规则由两个主要构成部分：选择器以及一条或多条声明
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1 {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>CSS简介</h1>
	</body>
</html>

CSS基础选择器

标签选择器

标签选择器:（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的css样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			
			标签名 {
				属性1：属性值；
				属性2：属性值；
				属性3：属性值；
			}
*/
			h1 {
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>CSS简介1</h1>
		<h1>CSS简介2</h1>
		<h1>CSS简介3</h1>
	</body>
</html>

类选择器

类选择器： 单独选一个或者某几个标签，可以使用类选择器。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			
			.类名 {
				属性1：属性值；
				属性2：属性值；
				属性3：属性值；
			}
*/
			.balld{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 class="balld">CSS</h1>
		<h1>CSS简介2</h1>
		<h1 class="balld">CSS</h1>
	</body>
</html>

注：通过class为标签声明类名，<h1 class="balld">CSS</h1>；类名可以重复

类选择器——多类名

一个标签可以指定多个类名，从而达到更多的选择目的，类名与类名直接需要用空格隔开。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.balld{
				color: red;
			}
			.one{
				background-color: black;
			}
		</style>
	</head>
	<body>
		<h1 class="balld one">CSS简介1</h1>
		<h1>CSS简介2</h1>
		<h1 class="balld">CSS简介3</h1>
	</body>
</html>

id选择器

id选择器: 可以为标有特定id的HTML元素指定特定的样式。
HTML元素已id属性来设置id选择器，CSS中id选择器已“#”来定义。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			
			#id名{
				属性1：属性值；
				属性2：属性值；
				属性3：属性值；
			}
*/
			#balld{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1 id="balld">CSS1</h1>
		<h1>CSS2</h1>
		<h1>CSS3</h1>
	</body>
</html>

注：id选择器是唯一的不可重复的

通配符选择器

通配符选择器： 在CCS中，通配符选择器使用“*”定义，它表示获取页面中所有的元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
/* 			
			* {
				属性1：属性值；
				属性2：属性值；
				属性3：属性值；
			}
*/
			* {
				color: red;
			}
			//常用情况
			* {
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<h1>CSS1</h1>
		<h1>CSS2</h1>
		<h1>CSS3</h1>
	</body>
</html>

字体属性

属性	作用	常用属性值	备注
font-family	定义字体类型	‘微软雅黑’，‘Microsoft YaHei’
font-size	定义字体大小	50px
font-weight	定义字体粗细	normal,bold,bolder,lighter,number	number用法：#balld {font-weight: 100}
font-style	定义文字样式	normal,italic(斜体)	`<em>`标签可以直接使文字倾斜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#balld1{
				font-family: '微软雅黑';
			}
			#balld2{
				font-size: 50px;
			}
			#balld3{
				font-weight: bold;
			}
			#balld4{
				font-style: inherit;
			}
			#balld5{
				/* font: font-style font-weight font-size/line-height font-family ;  顺序固定*/
				font: italic 700 20px '微软雅黑'
			}
		</style>
	</head>
	<body>
		<p id="balld1">字体类型-微软雅黑</p>
		<p id="balld2">字号大小-50px</p>
		<p id="balld3">字体粗细</p>
		<p id="balld4">字体样式</p>
		<p id="balld5">复合属性写法</p>
	</body>
</html>

文本属性

CSS Text（文本）属性可定义文本的外观，比如字体的颜色、对齐文本、装饰文本、文本缩进、行间距等。

属性	作用	常用属性值	备注
color	定义文本颜色	red,#FF0000,rgb(255,0,0)	预定义的颜色值：red; 十六进制：#FF0000; RGB代码：rgb(255,0,0)
text-align	对齐文本	center,left,right	居中，左对齐，右对齐
text-decoration	装饰文本	none,underline,overline,line-through	无线,下划线，上划线，删除线
text-indent	文本缩进	20px; 2em	em是一个相当单位，相对应当前文字大小缩进2个em单位
line-height	行间距	50px	控制行与行直接的距离

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#balld1{
				/* color: red; */
				/* color: #FF0000; */
				color: rgb(255,0,0);
			}
			#balld2{
				text-align: center; 
			}
			#balld3{
				text-decoration: underline;
			}
			#balld4{
				text-indent: 20px;
			}
			#balld5{
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<p id="balld1">颜色</p>
		<h1 id="balld2">文本对齐-居中对齐（是让当前文字在h1这个盒子中居中对齐）</h1>
		<p id="balld3">装饰文本-下划线</p>
		<p id="balld4">文本首行缩进-首行缩进20px</p>
		<p id="balld5">文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离-文本间距-控制行与行直接的距离</p>
	</body>
</html>

CSS的引入方式

css样式写法有三种：内部样式表、行内样式表、外部样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 单独建立一个css文件，再将文件引入当前页面为外部样式表
		 href:css文件路径
		 -->
		<link rel="stylesheet" href="../CSS/balld.css"/>
		
		<style>
			/* 
			将css写在这里为内部样式表 
			style可以放在任意位置
			 */
		</style>
	</head>
	<body>
		<!-- 写在标签里的style为行内样式表 -->
		<p style="color: red; font-size: 50px;">行内样式表</p>
	</body>
</html>