CSS 基础

最新推荐文章于 2023-08-18 20:40:23 发布
最新推荐文章于 2023-08-18 20:40:23 发布
阅读量162 收藏 1
点赞数 1
分类专栏： 前端 文章标签： css html javascript js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51927215/article/details/116077199
版权

CSS

1、CSS 的必要性

  • 使网页美观
  • 将 Html 页面的内容与样式分离
  • 提高 web 开发的工作效率

2、引入样式方式 — 外联式

  • 原 Html 代码
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<div>
		<h1>什么是快乐星球？</h1>
		<p>如果你想知道什么是快乐星球的话、我现在就带你研究</p>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

新建后缀为（css）的文件

  • 此文件代表将标签（h1）颜色改为红色
  • 将标签（p）颜色改为绿色
h1{
	color: red;
}

p{
	color: green;
}

将 CSS 代码引入 Html 代码中

  • 在头部里面添加代码块（link）
  • 参数（href）是文件的路径（此处为新建的 CSS 文件）
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1>什么是快乐星球？</h1>
		<p>如果你想知道什么是快乐星球的话、我现在就带你研究</p>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

3、引入样式方式 — 内嵌式

  • 在头部加入单标签（style）
  • 其中定义方式和在 CSS 文件里一样
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			color: red;
			font-size: 50px
		}
		p{
			color: green;
			font-size: 20px
		}
	</style>
</head>
<body>
	<div>
		<h1>什么是快乐星球？</h1>
		<p>如果你想知道什么是快乐星球的话、我现在就带你研究</p>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

4、引入样式方式 — 行内样式

  • 定义链接标签（a）
  • 标签属性（style）用来定义样式
  • 不同的样式之间用分号分开
<!DOCTYPE html>
<head>
	<title>Document</title>
</head>
<body>
	<a href="http://www.4399.com/" style="color: pink; font-size: 200px">4399</a>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

5、常用选择器（采用外联式）

元素选择符

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1>鲜血</h1>
	</div>
</body>
</html>
  • CSS 文件内容
h1{
	color: red;
	font-family: 宋体;
	font-size: 50px;
}
  • 在浏览器中打开

在这里插入图片描述
ID 选择符

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1 id="red">鲜血</h1>
		<h1>鲜血</h1>
	</div>
</body>
</html>
  • CSS 文件内容
  • 语法：#ID
h1{
	color: red;
	font-family: 宋体;
	font-size: 50px;
}
#red{
	color: pink;
	font-family: 微软雅黑;
	font-size: 100px;
}
  • 在浏览器中打开

在这里插入图片描述
类选择符

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1 class="su">苹果</h1>
		<p class="su">菠萝</p>
	</div>
</body>
</html>
  • CSS 文件内容
  • 语法：.class名
.su{
	color: green;
	font-size: 50px;
}
  • 在浏览器中打开

在这里插入图片描述
通配选择符

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1>苹果</h1>
		<p>菠萝</p>
		<a href="http://www.4399.com/">4399</a>
	</div>
</body>
</html>
  • CSS 文件内容
  • 参数（margin）和参数（padding）是必须的
*{
	margin:0;
	padding:0;
	color: green;
	font-size: 50px;
}
  • 在浏览器中打开

在这里插入图片描述
群组选择器

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1>苹果</h1>
		<p>菠萝</p>
		<a href="http://www.4399.com/">4399</a>
		<h1 id="red">红色</h1>
	</div>
</body>
</html>
  • CSS 文件内容
h1,#red,p{
	color: red;
	font-size: 40px;
}
  • 在浏览器中打开

在这里插入图片描述
包含选择器

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<h1>苹果</h1>
		<p>菠萝</p>
		<h1 id="red">红色</h1>
	</div>
</body>
</html>
  • CSS 文件内容
div h1{
	color: red;
	font-size: 40px;
}
  • 在浏览器中打开
  • 语法：父选择符 子选择符

在这里插入图片描述
伪类选择器

  • Html 文件内容
<!DOCTYPE html>
<head>
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
	<div>
		<a href="http://www.4399.com/">4399</a>
	</div>
	<div>
		<a href="http://www.7k7k.com/">7k7k</a>
	</div>
</body>
</html>
  • CSS 文件内容
  • 原链接颜色（green）
  • 鼠标覆盖链接颜色（pink），字体（100px）
a:link{color: red}
a:visited{color: green}
a:hover{color: pink;font-size: 100px}
  • 在浏览器中打开

在这里插入图片描述

6、选择器的优先级

  • 行内样式：1000
  • ID 选择器：100
  • 类选择器：10
  • 标签选择器：1

标签选择器

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			color: pink;
		}
	</style>
</head>
<body>
	<h1>你是猪！</h1>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
类选择器

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			color: pink;
		}
		.pig{
			color: red;
		}
	</style>
</head>
<body>
	<h1 class="pig">你是猪！</h1>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
ID 选择器

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			color: pink;
		}
		.pig{
			color: red;
		}
		#ani{
			color: green;
		}
	</style>
</head>
<body>
	<h1 class="pig" id="ani">你是猪！</h1>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
行内样式

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			color: pink;
		}
		.pig{
			color: red;
		}
		#ani{
			color: green;
		}
	</style>
</head>
<body>
	<h1 class="pig" id="ani" style="color: black">你是猪！</h1>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

7、常用样式举例（文本）

  • color 文字颜色
  • font-size 设置文字大小
  • font-family 字体种类
  • font-style 是否倾斜 （italic-倾斜 normal-正常(通常用来去倾斜) ）
  • font-weight （是否加粗 bold-加粗 normal-正常 ）
  • text-decoration（下划线-underline 上划线-overline 删除线-line-through）
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		h1{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div>
		<h1 style="color: red">鲜甜草莓的秘密</h1>
		<h1 style="font-size: 20px">鲜甜草莓的秘密</h1>
		<h1 style="font-family: '宋体">鲜甜草莓的秘密</h1>
		<h1 style="font-style: italic;">鲜甜草莓的秘密</h1>
		<h1 style="font-weight: normal;">鲜甜草莓的秘密</h1>
		<h1 style="text-decoration: line-through;">鲜甜草莓的秘密</h1>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

8、常用样式举例（列表）

  • list-style-type（disc-实心圆 square-正方形 circle-空心圆 none-无）
  • list-style-image（url-相对路径）
  • list-style-position（outside(外边)，inside(里边)）
  • list-style（none-最常用）

list-style-type（普通标识）

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		ul li{
			list-style-type: circle;
		}
	</style>
</head>
<body>
	<ul>
		<li>In love folly is always sweet.</li>
		<li>You may be out of my sight, but never out of my mind.</li>
		<li>Love is not a maybe thing. You know when you love someone.</li>
		<li>I’ll think of you every step of the way.</li>
	</ul>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
list-style-image（图片标识）

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		ul li{
			list-style-image: url(2.jpg);
		}
	</style>
</head>
<body>
	<ul>
		<li>In love folly is always sweet.</li>
		<li>You may be out of my sight, but never out of my mind.</li>
		<li>Love is not a maybe thing. You know when you love someone.</li>
		<li>I’ll think of you every step of the way.</li>
	</ul>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
list-style-position（标识的位置）

  • 定义边框（border）
  • 颜色属性（rgb）
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		ul li{
			list-style-image: url(2.jpg);
			list-style-position: inside;
			border: 1px rgb(1,222,43) solid;
		}
	</style>
</head>
<body>
	<ul>
		<li>In love folly is always sweet.</li>
		<li>You may be out of my sight, but never out of my mind.</li>
		<li>Love is not a maybe thing. You know when you love someone.</li>
		<li>I’ll think of you every step of the way.</li>
	</ul>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
特别注意

  • 利用通配符将属性（padding）和属性（margin）均改为 0 像素
  • 此时位置属性（list-style-position）是必须的
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		ul li{
			list-style-image: url(2.jpg);
			list-style-position: inside;
			border: 1px rgb(1,222,43) solid;
		}
	</style>
</head>
<body>
	<ul>
		<li>In love folly is always sweet.</li>
		<li>You may be out of my sight, but never out of my mind.</li>
		<li>Love is not a maybe thing. You know when you love someone.</li>
		<li>I’ll think of you every step of the way.</li>
	</ul>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

9、常用样式举例（背景图）

  • background-color（颜色）
  • background-image（url(相对路径)）
  • background-repeat（no-repeat-不平铺 repeat-平铺 repeat-x-横向平铺 repeat-y-纵向平铺）
  • background-position（水平-left/center/right 垂直-top/center/bottom）
  • 上面四个属性缩写为一个(常用)：background:背景色 url(背景图相对路径) no-repeat center top
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">
		div{
			/*1. 背景颜色*/
			background: red;
			/*2. 背景宽度和高度*/
			width: 300px;
			height: 300px;
			/*3. 背景图片*/
			background-image: url(2.jpg);
			/*4. 背景图片是否重复*/
			background-repeat: repeat;
			/*5. 背景图片的位置*/
			background-position: top;
		}
	</style>
</head>
<body>
	<!-- 6. 盒子 -->
	<div></div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述

10、常用样式举例（浮动属性）

  • 浮动（float）失去换行特征
  • 可以理解为块元素漂浮起来，其它的块元素可以占据空间
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">	
		div{
			border: 1px solid black;
		}	
		#div1{
			width: 100px;
			height: 100px;
			background-color: red;
			float: left;
		}
		#div2{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>
  • 在浏览器中打开（一块漂浮，一块不漂浮）

在这里插入图片描述

  • 若定义了二块浮动，则它们的等级相同，不存在上下重叠
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">	
		div{
			border: 1px solid black;
		}	
		#div1{
			width: 100px;
			height: 100px;
			background-color: red;
			float: left;
		}
		#div2{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>
  • 在浏览器中打开（二块漂浮）

在这里插入图片描述

高度塌陷

  • 若父类没有设置高度（div）而是由子类（div）撑起来的
  • 那么当子类元素漂浮起来后，父类元素会高度塌陷
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">	
		div{
			border: 1px solid black;
		}	
		#fu{
			width: 500px;
			background-color: red;
		}
		#zi{
			width: 200px;
			height: 200px;
			background-color: green;
		}
	</style>
</head>
<body>
	<div id="fu">
		<div id="zi"></div>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
子类元素设置漂浮（float）

<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">	
		div{
			border: 1px solid black;
		}	
		#fu{
			width: 500px;
			background-color: red;
		}
		#zi{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div id="fu">
		<div id="zi"></div>
	</div>
</body>
</html>
  • 在浏览器中打开

在这里插入图片描述
解决方法

  • 给父类元素设置高度
  • 给父类元素添加属性（overflow）
<!DOCTYPE html>
<head>
	<title>Document</title>
	<style type="text/css">	
		div{
			border: 1px solid black;
		}	
		#fu{
			width: 500px;
			background-color: red;
			overflow: hidden;
		}
		#zi{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div id="fu">
		<div id="zi"></div>
	</div>
</body>
</html>
是我来晚了！
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS基础语句
weixin_53968665的博客
12-25 1392
CSS
CSS——CSS基础知识
流楚丶格念的博客
06-26 8041
文章目录CSS的发展历程CSS 网页的美容师CSS初识引入CSS样式表（书写位置）内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则外链案例内链案例 CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生
CSS基础（超详解）
热门推荐
m0_52896041的博客
11-30 2万+
Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
CSS基础
书启鸿蒙知秋枫
12-28 5980
层叠这个词说明了一种情况，使用不同的选择器可能会同时选择到同一个标签，对这一个标签的同一个属性设置不同的值，就会产生样式重叠。CSS里不仅要使用选择器找到标签，找到标签以后还需要使用CSS的属性键值对设置标签的属性。使用类选择前，需要先给符合一定规律的标签按照特点进行分类，给这些标签添加class属性，再通过class属性来找到对应的元素。CSS不仅可以给HTML的标签添加样式，同时还可以对HTML里的标签进行布局，修改标签的位置。可以根据属性值的不同，给特定的标签设置样式。
CSS基础知识
ashfiqa的博客
01-21 2128
这是对于前端CSS的基础知识的一个简单概括，里面讲述了很多基础的东西，欢迎大家来看一下。 CSS 全称 Cascading Style Sheets，CSS是为了修改HTML的样式，让HTML的界面变得更完善，如果说HTML是网页的结构，那么CSS就是网页化妆师。
CSS基础知识总结
Lotus_fragrance的博客
04-29 3394
一、基础认识 css的中文又叫做：层叠样式表。 语法：选择器 + {属性名： 属性值}、 css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。 二、选择器 选择器 在html中写法 在css中写法 标签选择器 就是标签本身 div{ } 类选择器 class= "banner" .banner { }.
CSS基础 知识点总结
最新发布
星星之火的语言c学习
08-18 2717
① CSS指的是层叠样式表，用来控制网页外观的一门技术② CSS发展至今，经历过CSS1.0 CSS2.0 CSS2.1 CSS3.0这几个版本，CSS3.0是CSS最新版本① 选择器就是选中你想要的元素，就是指用一种方式把你想要的那个元素选中，只有把这个元素选中，你才能为它添加样式② 五种常用的选择器元素选择器id选择器class选择器后代选择器群组选择器③ 语法选择器属性1：取值1；属性2: 取值2；...属性n: 属性n;① 元素选择器。
css基础知识
健康平安的活着的专栏
05-12 1899
一 css 1.css 用于控制网页样式的一种标记语言，通过使用css可以使网站外观更加美观，结构更加简化。 2.css的语法： 选择符{属性:属性值}；属性必须要包含在{}中，并且之间用属性和属性值“：”分隔。当有多个属性时，用“；”进行区分。 3.选择符： 通配符选择符，* 代表所有元素，如 *{font-size:12px}; 类型选择符 如 <p class="red"> 这是第一个段落 </p> 选择符的写法： p.red{color:red}...
CSS基础入门（详细总结笔记）
程序员阿龙的博客
08-12 3464
CSS基础入门，详细总结
项目CSS基础样式模板
小琳爱分享的博客
07-23 1172
项目CSS基础样式模板
CSS基础代码
03-27
**CSS基础代码详解** 在网页设计中，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和样式。本资料包包含了作者学习CSS时编写的代码，非常适合CSS初学者作为学习素材。通过阅读和理解这些...
css基础代码
07-02
### CSS基础代码详解 #### CSS入门精要：掌握核心概念与实践技巧 **CSS（Cascading Style Sheets）**，即层叠样式表，是一种用于描述网页文档（如HTML或XML）外观和格式的标记语言。它使得网页设计更加灵活、高效...
css基础教学1
08-03
CSS基础教学1 CSS是 Cascading Style Sheets 的缩写，译为层叠样式表，是一种用于描述网页样式的语言。CSS主要用于控制网页的布局、颜色、字体、背景等各种样式元素。 在本教程中，我们将学习如何使用CSS对...
css 基础样式 base.css
04-28
css基础样式
Vue 第一讲（文本及超链接渲染）
weixin_51927215的博客
04-18 5206
二层花括号语法及 v-html 超链接渲染
Vue 第五讲（v-for 属性）
weixin_51927215的博客
05-02 3295
循环事件
Vue 第七讲（简易计算器的实现）
weixin_51927215的博客
05-02 1157
v-model:value 与输入框的双向绑定实现简易计算器
Vue 第六讲（event 参数）
weixin_51927215的博客
05-02 1116
标签绑定的事件传递参数及 event 参数的介绍
XHTML与CSS基础知识入门指南
本篇教程是关于XHTML与CSS基础知识的教学，旨在为有一定HTML和CSS基础的网页开发者提供一个从表格布局向Web标准（div+css）过渡的学习路径。对于初次接触网页制作的新手，需要具备基本的网页基础知识，包括了解表格...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是我来晚了！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值