CSS基础（1）

最新推荐文章于 2023-08-18 20:40:23 发布

金清泽

最新推荐文章于 2023-08-18 20:40:23 发布

阅读量117

点赞数

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

本文链接：https://blog.csdn.net/m0_53752829/article/details/120005869

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

学习目标：

掌握CSS

学习内容：

1、 CSS概述 2、基本语法 3、选择器 4、修饰

学习时间：

2021年8月 30日

学习产出：

1、技术笔记 1 遍 2、CSDN 技术博客 1 篇

CSS概述

css:Cascading Style Sheets（级联样式表）

级联：关联是样式表与标签之间的关联

样式表语言：修饰网页外观的语言

可以将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分

CSS与HTML的关系

HTML是网页内容

CSS定义页面的形式

基本语法

行内样式表

又称内联样式

是通过标签的style属性来设置元素的样式

		<!-- 
		 行内样式表
		 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
		 使用率最低，但是优先级最高
		 -->
		<p style="color: red;font-size: 24px;">静夜思</p>
		<p style="color: red;font-size: 24px;">静夜思</p>
		<p style="color: red;font-size: 24px;">静夜思</p>

内嵌样式表

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

		<!-- 
		 内嵌样式表
		 一般在开发测试期间使用
		 -->
	<head>
		<style type="text/css">
			p{color: red;font-size: 24px;}
		</style> 
    </head>

外部样式表

将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中

通过link标签将外部样式表连接到HTML文档中

	<head>
		<!-- 
		 外部样式表
		 使用率最高，完全实现结构和样式分离
		 -->
		<link rel="stylesheet" type="text/css" href="css/out.css"/>
	</head>

选择器

使用CSS对HTML页面中的标签实现一对一，一对多的控制

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 标签选择器 通过标签选择器可以选择页面中的所有指定标签 */
			p{
				font-size: 24px;
				color: red;
			}
			/* id选择器  通过标签的id属性值选中唯一的一个标签 */
			#p2{
				color: pink;
			}
			/* 类选择器 通过标签的class属性值选中一组标签 */
			.p3{
				color: green;
			}
			.p2{
				color: yellow;
			}
			
			/* 通配选择器  选中网页中所有标签，优先级最低 */
			*{
				color: blue;
			}
			
			/* 选择器组合 通过选择器分组可以同时选中多个选择器对应的标签 */
			a,.h,#p1{
				color: red;
			}
		</style>
		
	</head>
	<body>
		<!-- 
		 选择器优先级：行内样式表 > id选择器 > 类选择器 > 标签选择器 > 通配选择器
		 -->
		
		<p id="p1">静夜思</p>
		<p id="p2" class="p3">床前明月光</p>
		<p class="p2">疑是地上霜</p>
		<p class="p3">举头望明月</p>
		<p class="p2">低头思故乡</p>
		
		<h1 class="h">春晓</h1>
		
		<a>绝句</a>
	</body>

选择器

文本修饰

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#p1{
				color: green;/* 字体颜色 */
				font-size: 24px;/* 字体大小 */
				font-family: 楷体;/* 字体 */
				text-align: center;/* 文本对齐方式 */
				/* text-decoration: line-through;/* 定义穿过文本下的一条线 */ */
				text-decoration: underline;/* 定义文本下的一条线 */
				font-style: italic;/* 斜体文本 */
				font-weight: bold;/* 字体粗细（bold是加粗） */
				line-height: 40px;/* 设置行高 */
				letter-spacing: 20px;/* 设置字符间距 */
			}
			
			.p2{
				/* 
				 text-indent用来设置首行缩进
				 em 当前文档中一个字符的大小
				 */
				text-indent: 2em;
			}
			
			a{
				text-decoration: none;/* 定义标准文本 */
			}
		</style>
	</head>
	<body>
		<p id="p1">
		可以将页面的内容与表现形式分离，页面内容存放在HTML文档中，
		而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分
		</p>
		<p class="p2">
		可以将页面的内容与表现形式分离，页面内容存放在HTML文档中，
		而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分
		</p>
		<a href="">百度</a>
		<a href="">百度</a>
		<a href="">百度</a>
	</body>
</html>

文本修饰

背景修饰

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			p{
				height: 600px;
				width: 800px;
				background-color: aqua;/* 背景颜色 */
				background-image: url(img/bg.jpg);/* 背景图片，优先级高于背景颜色，默认会重复，铺满整个标签 */
				background-repeat: repeat-x;/* 背景图片重复，默认为x和y轴都重复 */ 
				background-repeat: no-repeat;/* 背景图片不重复 */
				background-size: 400px,200px;/* 背景图片的大小 */
				background-position: right top;/* 背景图片位置控制 */
				
				/* 这是针对文字的修饰 */
				text-align: center;
				line-height: 600px;
			}
		</style>
	</head>
	<body>
		<p>我是p标签</p>
	</body>
</html>

在这里插入图片描述

列表修饰

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			li{
				/* list-style-type: square; 设置列表图标形状 
				list-style-image: url(img/img.jpg) ; 替换列表项的图标 
				list-style-position: inside; inside图标在li里面  outside图标在li外面 */ 
				
				list-style: url(img/img.jpg) none outside;/* css简写方式，不分先后顺序 */
			}
		</style>
	</head>
	<body>
		<ol>
			<li>我是有序列表</li>
			<li>我是有序列表</li>
			<li>我是有序列表</li>
			<li>我是有序列表</li>
			<li>我是有序列表</li>
		</ol>
	</body>
</html>

在这里插入图片描述

outside的形式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kaGnAYMt-1630416706522)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630413689545.png)]$

inside的形式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jbV8JRUU-1630416706526)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630415951620.png)]$

伪类

标签有不同的形态，鼠标移入，点击，移出

有时需要为不同状态的标签，添加样式，可以使用伪类（伪元素）

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 鼠标移动到标签上，自动切换到此样式 */
			.btn:hover{
				background-color: aqua;
				color: white;
			}
			/* 鼠标点击到标签上，自动切换到此样式 */
			.btn:active{
				background-color: red;
			}
			/* 鼠标点击可以输入烦人标签，自动切换到此样式 */
			.txt:focus{
				background-color: aqua;
				color: white;
			}
		</style>
	</head>
	<body>
		<input type="button" class="btn" value="提交" />
		<input type="text" class="txt" value="" />
	</body>
</html>

鼠标移入按钮

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tbKIfcBU-1630416706528)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630416371712.png)]$

鼠标点击按钮

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZpoYnxzf-1630416706529)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630416391976.png)]$

鼠标点击文本框并输入

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xJgNPg7B-1630416706530)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630416421989.png)]$

透明

opacity

设置标签透明度，值从0（完全透明）----1（不透明）

当完全透明时，位置在页面中还是存在的

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			img:hover{
				opacity:0.1 ;
			}
		</style>
	</head>
	<body>
		<img src="img/photo.jpg" >
	</body>
</html>

0.1透明度的图片
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FEAciTSX-1630416706530)(E:\Users\asus\AppData\Roaming\Typora\typora-user-images\1630416595417.png)]$

金清泽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（1）

学习目标：掌握CSS学习内容：1、 CSS概述2、基本语法3、选择器4、文本修饰学习时间：2021年8月 30日学习产出：1、技术笔记 1 遍2、CSDN 技术博客 1 篇CSS概述css:Cascading Style Sheets（级联样式表）级联：关联是样式表与标签之间的关联样式表语言：修饰网页外观的语言可以将页面的内容与表现形式分离，页面内容存放在HTML文档中，而用于定于表现形式的CSS在一个.css文件中或HTML文档的某一部分CS
复制链接

扫一扫

专栏目录