前端三剑客之——CSS

已于 2023-03-15 22:05:22 修改
阅读量618 收藏 2
点赞数 3
分类专栏： 前端 文章标签： 前端 html5 html css
于 2022-12-07 15:15:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62565675/article/details/128208325
版权

目录

1.CSS概述，语法

1.1概述

1.2语法

2.样式选择器

3.标签分类

 4.div和span

5.文本

6.列表

7.盒子模型(重点)

 8. 伪类

9.透明度

10.背景

11.display标签类型转换

12.定位

12.1相对定位

12.2绝对定位 

 13.浮动

1.CSS概述，语法

       1.1概述

        html是网页的骨架(内容)，css专门用作修饰网页的内容，css语法写在一个css文件中或者html的某一个部分。

        1.2语法

样式表举例定义位置
行级样式表<a href="" style="color: red; font-size: 40px;" >举例</a>style在标签内定义
内嵌样式表<a class="a1">举例</a>a1定义在head标签里的style内
外部样式表导入语法：<link href="" rel="stylesheet" />样式来源与外部css文件，使用需导入

如果它们三种同时存在时，采用的是就近原则，行级>内嵌>外部

2.样式选择器

种类定义方式调用方式
标签选择器 标签名{样式表}所修饰的标签添加
类选择器.类名{样式表}class = "类名"
id选择器#id名{样式表}id="id名"
通配选择器*{样式表}给所有的标签添加样式
优先等级从高到低：id选择器>类选择器 >标签选择器>通配选择器

        演示： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式选择器</title>
		<style type="text/css">
			p{
				color: red;
			}
			.p1{
				color: green;
			}
			.p2{
				color: blue;
			}
			#p3{
				color: yellow;
			}
			*{
				
			}
			.p1,#p3{  /*选择器组合：将一些共同的修饰样式可以放在一起*/
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<!-- 
			当一个标签被多个选择器修饰时  注意:
				例如：.p1{
						color : blue;
			          }
					*{
						color：red;
						font-size = 30px
					}
					.p1{}只会代替*{}中的color，font-size会按照*{}来修饰
		-->
		<p id="p3">春晓</p>
		<p class="p1">春眠不觉晓，</p>
		<p class="p2">处处闻啼鸟。</p>
		<p class="p1">夜来风雨声，</p>
		<p class="p2">花落知多少。</p>
	</body>
</html>

        运行到浏览器.......

3.标签分类

块级标签：标题标签、<p>、<hr>、<ul>、<table>、<form>

       1.会自动换行，无论内容有多少都会独占一行，可以调整宽高。

       2.默认的大小：宽与body一样，高与内容一样，没有内容高度为0
       3.p标签不可以包含任何的块标签，一般使用块级标签包含行级标签

行级标签：<span>、<br/>、<a>

       只占自身内容的大小，不会占一行，不能设置宽高 

行级块标签：<img>、<input>、textarea

       可以设置大小，但是不占一行 inlineblock

 4.div和span

        我们延续上篇的HTML再讲两个标签,分别是div标签和span标签。

div :块级标签，可以包含任何标签，没有默认的样式，定义什么样式就变成什么样子。

span:是一个行级标签，没有任何默认样式，主要用来选中文本。

        演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>div和span</title>
	</head>
	<body>
		<div style="background-color: #FF0000; width: 300px; height: 200px;">我爱中国</div>
		<span style="color: #0000FF;">我爱中国</span>
	</body>
</html>

        运行到浏览器:

5.文本

        px像素单位，em表示当前文本中一个文字的大小。

样式修饰作用
color: red;修改文本字体颜色
font-size: 20px;修改字体大小
font-family: 楷体; 字体样式
font-weight:700;字体粗细
text-decoration: underline;下划线
text-decoration: line-through;中间穿透线
font-style: italic;斜体
line-height: 50px; 行高
letter-spacing: 20px;字与字之间的间距
text-indent: 2em;首行缩进两个字体的大小
text-decoration: none;定义标准文本，可去除超链接默认的下划线

6.列表

样式修饰作用
list-style-image: url(img/Male.gif);给列表项前加上图标
list-style-type: none表项前面的符号
list-style-position: outside;

 图标的位置 (分离向外)

 简写方式(先后顺序无要求)：list-style:  outside  url(img/Female.gif)  none;

7.盒子模型(重点)

        盒子模型的思想是把块级标签想象成一个盒子，分别有内容区，内边距，外边距以及边框。

在CSS中可以用padding(内边距)，margin(外边距)，border(边框)，width(内容区宽)和height(内容

区高)，以此来调节标签所处的位置以及大小。

举例：div

                1.div是一个块级标签，可以认为是一个盒子
                2.<div></div> 默认宽与body一样，高是0
                3.<div>div</div>默认宽与body一样，高是内容的高度
                4.div三个字母都是在内容区中放置
                5.width和height都是设置内容区的大小，而不是整个标签的大小

                6.内边距就是内容区到边框的距离，不能放置内容

                7.外边距，不影响标签的大小，但位置会有所改变

                8.div的区域是内容加内边距

        演示: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style type="text/css">
			*{
				margin: 0px; /*取消body的边距*/
				padding: 0px; 
			}
			.p1{
				width: 200px;/* 内容区的宽 */
				height: 200px;/* 内容区的高 */
				background-color: #0000FF;
				color: white;
				padding: 10px; /* 内边距就是内容区到边框的距离，不能放置内容*/
				/* padding : 5px 6px 7px 8px 上 右 下 左 */
				/* border-top-width: 1px;
				border-top-style: solid;
				border-top-color: red;  繁琐*/
				border-top: 5px solid red;
				margin-top : 10px    /*外边距，不影响标签的大小，但位置会有所改变*/
			}
		</style>
	</head>
	<body>
		 <div>4</div>
		 <div class="p1">div</div>
		 <div>1</div>
	</body>
</html>

        运行到浏览器：

 8. 伪类

        伪类相对来说比较简单，自行理解。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类</title>
		<style type="text/css">
			.in1{
				background-color: lightcyan;
			}
			.in1:hover{ /* hover表示当鼠标悬停在这个标签上时，就会进入到这个样式表中 */
				background-color: saddlebrown;
			}
	  	   a{
				color: #0000FF;
			}
			a:hover{
				color: #008000;
			}
			a:active{  /*active表示当鼠标点击这个标签时，就会进入到这个样式表中 */
				background-color: orange;
			}
			.in2:focus{ /* foucus 输入标签点击聚焦，就会进入到这个样式表中*/
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<input type="button" class="in1" value="保存"/>
		<input type="text" class="in2"/>
     	<a href="">非凡</a> 
	</body>
</html>

9.透明度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明度</title>
		<style type="text/css">
			img{
				opacity: 0.5; /* 显示度数  1表示全显示  0表示透明*/
			}
		</style>
	</head>
	<body>
		<img src="./img/logo.gif" />
		1111
	</body>
</html>

10.背景

<html>
	<head>
		<meta charset="utf-8">
		<title>背景练习</title>
		<style type="text/css">
			p{
				width: 800px;
				height: 600px;
				background-color: blanchedalmond;/* 给段落加背景颜色 */
				background-image: url(./img/logo.gif); /* 背景图片  如果背景图片尺寸不否，那么图片就会向左右上下重复延伸*/
				background-repeat: no-repeat;/* 背景不重复 */
				background-position: center;
			}
		</style>
	</head>
	<body>
		<p>
			这是段落
		</p>
	</body>
</html>

11.display标签类型转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>display属性</title>
	</head>
	<body>
		<!-- 
			display :设置标签的类型
			-->
			<!-- 块级变行级 -->
			<p style="display: inline;">aaaaaaa</p>sdasdasdas
			<!-- 行级变块级 -->
			<a style="display: block;" href="">非凡</a>
            <!-- 让标签在网页中消失，不占空间 -->
			<a style="display: none;" href="">百度</a> 
	</body>
</html>

12.定位

        12.1相对定位

         开启相对定位，才能设置位移,否则没有任何变化 相对自己改变位置，并且原来的空间不会被其他标签占用。

        移动参照物是自己。

        演示： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height:100px;
				background-color: #0000FF;
				position: relative;/* 开启相对定位，才能设置位移,否则没有任何变化 相对自己改变位置，并且原来的空间不会被占用*/
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height:100px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			div1
		</div>
		<div class="box2">
			div2
		</div>
	</body>
</html>

        运行到浏览器：

        12.2绝对定位 

         开启绝对定位，标签会脱离了文档流，漂浮起来 原来的空间会被其他的标签占用。
         移动参照物：离他最近的开启了定位的祖先标签，如果都没有，那么就以浏览器的边框作为参照物 。

        演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style type="text/css">
			.box1{
				width: 100px;
				height:100px;
				background-color: #0000FF;
				position: absolute;/*开启绝对定位*/
				left: 100px;
				top: 100px;
			}
			.box2{
				width: 100px;
				height:100px;
				background-color: #FF0000;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: #FFA500;
				position: relative;/*开启了相对定位，此时div1移动的参照物就是div3*/
			}
		</style>
	</head>
	<body>
		<div class="box3">
			div3
		    <div class="box1">
			    div1
		    </div>
		</div>
		<div class="box2">
			div2
		</div>
	</body>
</html>

         运行到浏览器：

 13.浮动

        div是块级标签，如果要把两个div放到一行，就要用到浮动。

         浮动就是从原来的（二维平面）漂浮起来了，他在原来的空间就释放了，下面的标签就会上移，浮动后的标签宽度默认是内容大小，所以需要设置尺寸。

        演示： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动</title>
		<style type="text/css">
			.box1{
				background-color: #0000FF;
				float: left;
				width: 200px;
			}
			.box2{
				background-color: #FF0000;
				float: left;
				width: 200px;
			}
		</style>
	</head>
	<body>
		<div class="box1">div1</div>
		<div class="box2">div2</div>
	</body>
</html>

         运行到浏览器：

        由上面的演示我们发现，两个标签都脱离文档流，都飘起来了，body里面没有内容，但是如果两个标签下面还有内容的话，如果没有使用浮动，是不是就跑到div1下面去了？

 就比如：

        如果这样的话，盒子的高度还是0，并没有被内容所撑起来，所以我们需要清除左浮动，会将盒子撑起来，如果不清除浮动的话，以后下面的内容就会跑到上面去。

         即<div style="clear: left;"></div> 

         修改：

下篇我们谈谈javaScript.......... 

javaScript点我直接走~~~~

HTML我在这~~~~

迷茫的羔羊羊
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html、CSS、JavaScript
09-13
前端三剑客——HTML、CSS和JavaScript，共同构建了网页的骨架、皮肤和灵魂。HTML定义了页面的结构，CSS美化了这个结构，而JavaScript赋予了页面动态性。学习这三者，你需要理解它们之间的关系，如何协同工作，以及...
CSS 总结
Yt612的博客
10-02 2204
css 总结
＜style type=“text/css“＞详解
Protinx的博客
11-15 9026
type="text/css"是指定MIME类型，其中： text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件中应用CSS样式，最常用的有三种方法： 1.内部引用 所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。 2.外部引用 外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果，可将CSS做成单独文件。不过使.
css3 基本语法
m0_61073617的博客
12-14 2498
使用W3C标准制作网页还有一个非常重要的作用，那就是可以实现网页内容和样式的分离，其中HTML负责组织内容结构，CSS负责表现样式。 CSS全称层叠样式表，又称风格样式表 CSS规则由两部分组成：选择器和声明 HTML引入CSS样式的方法有三种： 行内样式 注意：每条声明由一个属性和一个值组成，属性和值用冒号分开，每条语句以英文分号结尾。 <h1 style="color: red;">style属性的应用</h1> <p style="font-size: 14
初学css样式01
H_ker的博客
06-26 721
内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于head标签里面...
CSS字体、文本属性
qq_52301431的博客
03-24 3096
一、CSS字体属性 1、font-size：字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。 其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。 font-size:smaller; x-small; xx-small; small; large; larger; x-large; xx-large; 相对长度单位 说明（就是相对于电脑的屏幕分辨率） em 相对于当前对...
PHP实例开发源码——php 即时网络聊天 iWeb开源三剑客之iWebIM.zip
11-25
【描述】"PHP实例开发源码——php 即时网络聊天 iWeb开源三剑客之iWebIM" 暗示了这是一套完整的解决方案，可能包括服务器端脚本、前端界面以及必要的数据库结构。iWeb开源三剑客通常指的是一个由多个组件组成的开源...
前端html学习记录，可
02-24
在前端开发领域，HTML（HyperText Markup Language）是构建网页内容的基础语言，它与CSS（Cascading Style Sheets）和JavaScript一起构成了Web开发的三剑客。本学习记录主要聚焦于HTML的学习，通过三个关键文件——...
打造炫酷618节日主题3D大屏文字效果：HTML、CSS与JavaScript实战
最新发布
06-09
本文深入浅出地介绍了如何利用前端三剑客——HTML、CSS和JavaScript，结合现代网页设计理念，创造出令人印象深刻的3D大屏文字效果。从基础的HTML结构搭建，到CSS样式的精细调整，再到JavaScript动态交互的加入，每...
蓝色简单商务企业网站模板是一款顶部为蓝色风格，底部为绿色风格的css企业模板。_html网站模板_网页源码移动端前端_.rar
08-06
【标题】中的“蓝色简单商务企业网站模板”指的是一个专门设计用于商务企业的网站模板，其特色在于采用了蓝色作为...同时，这个模板也适合初学者学习和理解网页开发的三剑客——HTML、CSS和JavaScript之间的协作关系。
css基本语法
年轻人————001
10-15 478
一，css基本语法及页面引用 css基本语法 css的定义方法是： 选择器 { 属性:值; 属性:值; 属性:值;} 选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例： /* css注释 ctrl+shift+&quot;/&quot; */ div{ width:100px; height:100px; color:red ...
CSS基础知识
qq_51029472的博客
07-09 1330
一、基础认知 1.1 CSS初识 CSS写在style标签中，style标签一般写在head标签里面，title标签下面 ctrl+/ CSS注释快捷键 选择器 {css属性} 2.1 CSS引入方式 内嵌式：CSS写在style标签中 提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中 作用：当前页面 外联式：CSS写在一个单独的.css文件中 作用：多个页面 提示：需要通过link标签在网页中引入 行内式：CSS写在标签的style属性中 写法：style=“属性：属性值”
＜style type=text/css＞中的type=text/css是什么意思
m0_70348881的博客
05-10 488
②外部引用：<link rel="stylesheet" href="/index.css">①<style type=text/css>是在html中内部引用css的一种方式。将css写入对应的index.css中就行。
在CSS中style 和 text/css的使用
Mediterranean with dreams的博客
07-17 4411
CSS是Cascading Style Sheet 的缩写。译作层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 1.内联定义（我理解为在主体中定义） <body> <p style="border:1px">内联定义1</p> <p style="color: red">内联定义2</p> <p style="font-size: 20px">内联定义3</p> </bo
css样式
wqeqwr的博客
09-16 216
css样式 内部样式 <head> <style type="test/css"> 选择器{属性1：属性值1； 属性2：属性值2；属性3:属性值3;} </style> </head> 行内式 <标签名 style="属性1：属性值1； 属性2：属性值2；属性3:属性值3;">内容</标签名> 外部样式表 &l...
css样式表
时光清浅处，一步一安然
08-22 215
css样式表 一、css语法 组成：选择器（选择符）和声明组成。选择器（选择符）其实是一种方法，重在选择两个字，作用：选取标签给其设置样式。声明分为属性和属性值，声明是放在花括号里面的。属性和属性值是用冒号连接的，用分号结束的。 div { width: 200px; height: 200px; background-color: red; } 二、样式表 什么是样式表？就是放置css代码一个环境。因为html和css是两种不同的语言，进行“沟通”，需要“桥梁”，样式表就是起了桥梁的作用。
JavaScript学习二：网页开发基础_CSS
weixin_56016530的博客
09-05 284
CSS可以在不改变原有HTML结构的情况下，增加丰富的样式效果，极大满足开发者需求
Web笔记（二）---CSS基础
上班哪有不疯的i(╯‵□′)╯︵┻━┻
04-09 1319
引入CSS样式 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于head标签中title标签...
JAVAhtml，css
JIE_ling8的博客
08-08 180
CSS初识： 样式表： 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下： <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 总结： 1. 语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。 2....
掌握HTML、CSS与JavaScript：网页制作三剑客
本文档详细介绍了HTML、CSS和JavaScript在网页开发中的基础知识和关系。...它使用标签来定义元素，如`<p>`表示段落，`<h1>`到`<h6>`定义标题，`<img>`...学习和掌握它们是前端开发的基础，对于网页开发者来说至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值