【Web前端笔记-基础】第五课·初识 CSS,CSS概述+选择器+属性

最新推荐文章于 2022-04-15 09:00:00 发布

好好学习嘿嘿嘿

最新推荐文章于 2022-04-15 09:00:00 发布

阅读量191

点赞数

分类专栏： Web 前端基础笔记文章标签： CSS 文字常用属性尺寸样式选择器

本文链接：https://blog.csdn.net/qq_42250032/article/details/101295240

版权

Web 前端基础笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

一：CSS定义

什么是CSS

CSS就是层叠样式表（Casading Style Sheets），通常称为CSS样式表，或者是级联样式表。主要用于设置HTML中的文本，内容（字体，大小，对齐），图片外形（宽高，边框样式，边距等），以及版面的布局等外观样式。

CSS以HTML为基础，提供了丰富的功能。还可以针对不同的浏览器设置不同的样式。

HTML和CSS的关系

HTML结构层：负责从语义的角度搭建页面

CSS：负责从审美角度美化页面

CSS的语法规则

CSS是由选择器和{}组成的，

大括号的是由一条条声明组成

每一条语句都是要英文状态下的声明，每一条声明都是由属性：值;组成

CSS属性值一般不加引号，但它的属性值为数字时一般要加单位，单位一般为px

CSS中，不能出行HTML标签

二：CSS的书写方式

CSS的书写分为嵌入式，外链式和行内式

嵌入式

嵌入式通过style标签，嵌入到HTML代码中来，如果使用HTML文档，style可以不写。

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>css的语法规则</title>
		<style>
			h1{color: aqua;font-size: 14px;}
		</style>
	</head>
	<body>
		<h1>我是一级标题</h1>
	</body>
</html>

效果：

外链式

单独写一个以css为扩展名的文件

然后用link标签链接到html文件中，css文件不能单独运行，必须依赖于html文件

一个html文件可以引入多个css文件

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外链式练习</title>
		<link rel="stylesheet" href="../css/wailian.css" />
	</head>
	<body>
		<h2>外链式练习</h2>
	</body>
</html>

h2{
	font-size: 18px;
	color: aqua;
}

效果：

行内式

将html代码写在行内标签里

style是每个标签的通用属性

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内样式练习</title>
	</head>
	<body>
		<h2 style="font-size: 16px; color: #00FFFF;">我是行内样式练习</h2>
	</body>
</html>

效果：

三：注释

/*这里写注释*/

四：选择器

选择器是指通过一定语法规则选择到对应的HTML标签的css工具

选择器分为四类：基本选择器，复合选择器，伪类选择器和id选择器

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器练习</title>
		<style>
			/*通用选择器练习，通用选择器选择全部*/
			*{
				color:burlywood;
			}
		</style>
	</head>
	<body>
		<p>我是一个段落标签</p>
		<h3>我是一个三级标题</h3>
		
	</body>
</html>

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器练习</title>
		<style>
			/*通用选择器练习，通用选择器选择全部*/
			/**{
				color:burlywood;
			}*/
			/*标签选择器练习*/
			p{
				color: royalblue;
			}
			/*伪类选择器*/
			.hh{
				color: deeppink;
			}
			/*id选择器*/
			#fen{
				
				height: 100px;
				width: 100px;
				background-color:#FF1493 ;
			}
			
		</style>
	</head>
	<body>
		<p>我是一个段落标签1</p>
		<p>我是一个段落标签2</p>
		<h3 class="hh">我是一个三级标题</h3>
		<div id="fen">
			
		</div>
		
	</body>
</html>

效果：

五：尺寸样式属性

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式尺寸属性</title>
		<style>
			.chicun{
				width: 100px;
				height: 100px;
				background-color: #4169E1;
			}
		</style>
	</head>
	<body>
		<div class="chicun">
			
		</div>
	</body>
</html>

效果：

六：文本字体属性

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字体属性练习</title>
		<style type="text/css">
			#one{
				color: #4169E1;
			}
			#two{
				text-align: center;
			}
			#three{
				text-transform: capitalize;
			}
			#four{
				text-decoration:line-through ;
			}
			#five{
				line-height: 16px;
			}
			#six{
				text-indent:20px
			}
			#seven{
				letter-spacing: 14px;
			}
			#eight{
				word-spacing: 16px;
			}
		</style>
	</head>
	<body>
		<p id="one">说完了 好象话都说完了</p>
		<p id="two">总是沉默对坐着</p>
		<p id="three">眼里是浓浓夜色three</p>
		<p id="four">感情是偏执的 越爱越是偏执的</p>
		<p id="five">不相信我看到的</p>
		<p id="six">硬要说裂缝不过 是皱褶</p>
		<p id="seven">怎么先炽热的却先变冷了</p>
		<p id="eight">my name is Xiaokeai</p>
	</body>
</html>

效果：

好好学习嘿嘿嘿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Web前端笔记-基础】第五课·初识 CSS,CSS概述+选择器+属性

一：CSS定义什么是CSSCSS就是层叠样式表（Casading Style Sheets），通常称为CSS样式表，或者是级联样式表。主要用于设置HTML中的文本，内容（字体，大小，对齐），图片外形（宽高，边框样式，边距等），以及版面的布局等外观样式。CSS以HTML为基础，提供了丰富的功能。还可以针对不同的浏览器设置不同的样式。HTML和CSS的关系HTML结构层：负责从语...
复制链接

扫一扫