【CSS】快速入门笔记

news2024/12/23 15:56:19

视频链接:https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c

文章目录

    • 一、CSS语法
      • 1.结构
      • 2.样式类型
        • 1)内联样式 Inline Style
        • 2)内部样式 Internal Style
        • 3)外部样式 External Style
    • 二、选择器(Selector)
      • 1.类型
        • 1)类型选择器
        • 2)类选择器
        • 3)id选择器
        • 4)属性选择器
        • 5)通用选择器
      • 2.使用
        • 1)组合使用
        • 2)优先级(Priority)
    • 三、盒子模型(Box Model)
      • 1.边框 border
      • 2.内边距padding
      • 3.外边距margin

一、CSS语法

1.结构

在这里插入图片描述

2.样式类型

1)内联样式 Inline Style

特点:直接写到html元素上,没有选择器,直接就是声明,仅对当前的html元素有效

<p style="color:red">我是一段文字</p>

在这里插入图片描述

2)内部样式 Internal Style

特点:写在html文档的head标签中,使用style标签,包含一个或多个css规则

<head>
	<meta charset="UTF-8">
	<style>
	.box{
		width:600px;
		height:1200px;
	}
	</style>
</head>

在这里插入图片描述

3)外部样式 External Style

特点:先在外部存储独立的css文件,通过把Link标签放在head标签内,指定其href属性,来指定外部css属性,使用最多

<!--主体代码-->
<html>
	<head>
		<meta charset="UTF-8">
		<title>我是标题</title>
		<link rel="stylesheet" href="mystyle.css">
	</head>
	<body>
	......
	</body>
</html>
/*css文件mystyle.css*/
h1{
	width:600px;
	height:1200px;
	margin:auto;
}

在这里插入图片描述

二、选择器(Selector)

描述:用于在css语句或文档中,选择html元素。

1.类型

1)类型选择器

特点:直接写元素标签的名称,例如上面的h1,可用于选择页面上所有的该类型标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
	</body>
</html>
/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}

在这里插入图片描述

2)类选择器

特点:点.+类名,类名可自定义,同时html对应元素中,有同名的class属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
	</body>
</html>
/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}

在这里插入图片描述

3)id选择器

特点:#加id名称,同时html对应元素中,有同名的id属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
	</body>
</html>
/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
	}
#my_pid{
	color: orange;/*类选择器*/
}

在这里插入图片描述

4)属性选择器

特点1:不常用,标签[属性],选择所有该类型标签并包含该属性的所有元素

<!DOCTYPE html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1>我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>
/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}

在这里插入图片描述
特点2:属性也可指定值,更精确选择

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}

在这里插入图片描述

5)通用选择器

特点:星号*,代表所有元素

/*css文件    mystyle-选择器测试.css*/
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}

在这里插入图片描述

2.使用

1)组合使用

组合1:以上选择器直接连写,需要满足所有同条件后生效;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器,字体斜体*/
}

在这里插入图片描述
组合2:以上选择器用逗号连接,则对列出的选择器都生效


h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器,字体斜体*/
}
h1,h2{
	font-size: 20px;/*组合选择器,字体大写变成20px*/
}

在这里插入图片描述
组合3:父子组合,需要一个父标签用空格连接一个子标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1>我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>		
	</body>
</html>
h1{
	color: red;
}
h2{
	color: blue;
}
.my_p{
	color: green;/*类选择器*/
}
#my_pid{
	color: orange;/*类选择器*/
}
a[title]{
	color: fuchsia;/*属性选择器*/
}
a[title=""]{
	color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{
	font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{
	font-style: oblique;/*组合选择器,字体斜体*/
}
h1,h2{
	font-size: 20px;/*组合选择器,字体大写变成20px*/
}
div h1{
	text-decoration: underline;/*组合选择器,字体加下划线*/
}

在这里插入图片描述

2)优先级(Priority)

a.相同的规则按照加载顺序,写在后面的优先级更高

h1{
	color: red;/*字体红色*/
}
h1{
	color: green;/*字体绿色*/
}

在这里插入图片描述
这里先定义了红色,后定义了绿色,以绿色为准

b.继承下来的样式优先级永远低于直接指定的样式
案例1:

body{
	color: skyblue;/*字体天空蓝色*/
}
h1{
	color: green;/*字体绿色*/
}

h1本来应该继承body的天空蓝,但它自己定义了绿色,自己指定的优先级高于继承,所以最终显示绿色
在这里插入图片描述

案例2:

h1{
	color: green;/*字体绿色*/
}
div h1{
	color: blue;/*字体蓝色*/
}

后面的标签对同一属性有自己的直接指定的时候就不再继承前面统一定义过的属性
在这里插入图片描述

c. 内联样式优先级最高,!important是个例外
内部样式和外部样式的优先级没有太大区别,主要是语句顺序导致的加载顺序,但内联样式的优先级最高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试优先级.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1 style="color:red;">我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>
		
	</body>
</html>

在之前的基础上,单独给h2添加了内联样式,最后呈现的是内联样式指定的颜色
在这里插入图片描述
加了important,可以打破内联样式的优先级,颜色又被扳到外部样式的绿色

body{
	color: skyblue;/*字体蓝色*/
}
h1{
	color: green!important;/*字体绿色,并且!important*/
}

在这里插入图片描述

d. 类型选择器<类选择器<ID选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外部样式</title>
		<link rel="stylesheet" href="mystyle-选择器测试优先级.css">
	</head>
	<body>
		<h1 class="my_p">我的第一个h1标签</h1>
		<h1 style="color:red;">我的第二个h1标签</h1>
		<h1>我的第三个h1标签</h1>
		<h2>我的第一个h2标签</h2>
		<h2>我的第二个h2标签</h2>
		<h2>我的第三个h2标签</h2>
		<p class="my_p">我是一个段落</p>
		<p id="my_pid" class="my_p">我也是一个段落</p>
		<a title="baidu" href="http://www.baidu.com">百度</a>
		<a title="" href="http://www.baidu.com">百度</a>
		<a href="http://www.baidu.com">百度</a>
		<div>
			<h1>我是div里的h1标签 </h1>
		</div>
		
	</body>
</html>
.my_p{
	color:peru;/*字体褐色*/
}
p{
	color: green;/*字体绿色*/
}

类选择器高于类型选择器,与加载顺序无关
在这里插入图片描述

#my_pid{
	color: coral;/*字体珊瑚红色*/
}
.my_p{
	color:peru;/*字体褐色*/
}
p{
	color: green;/*字体绿色*/
}

在这里插入图片描述
id选择器的加载顺序最高

三、盒子模型(Box Model)

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<link rel="stylesheet" href="myboxstyle.css">
	</head>
	<body>
		<div class="box">
			div内容
		</div>
	</body>
</html>
.box{
	width: 100px;
	height: 100px;
	background-color: red;
}

在这里插入图片描述

1.边框 border

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
}

出现了3px的实线蓝色边框
在这里插入图片描述

2.内边距padding

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
}

文字和边框产生了距离,同时外框也变大
在这里插入图片描述

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
	
	padding-left: 5px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding: 10px 15px 25px 5px;/*简洁写法:上右下左*/
}

也可单独指定上下左右的内边距
在这里插入图片描述
右击-审查元素
在这里插入图片描述

3.外边距margin

.box{
	width: 100px;
	height: 100px;
	background-color: red;
	border: 3px solid blue;/*3px 实线 蓝色*/
	padding: 20px;/*内边距20px*/
	
	padding-left: 5px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 25px;
	padding: 10px 15px 25px 5px;/*简洁写法:上右下左*/
	
	margin: 25px;
	margin-top: 20px;
	margin-bottom: 30px;
	margin-left: 15px;
	margin-right: 10px;
	margin: 20px 10px 30px 15px;/*简洁写法:上右下左*/
	
}
}

外框和页面产生了距离
在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/404094.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【深度强化学习】(4) Actor-Critic 模型解析,附Pytorch完整代码

大家好&#xff0c;今天和各位分享一下深度强化学习中的 Actor-Critic 演员评论家算法&#xff0c;Actor-Critic 算法是一种综合了策略迭代和价值迭代的集成算法。我将使用该模型结合 OpenAI 中的 Gym 环境完成一个小游戏&#xff0c;完整代码可以从我的 GitHub 中获得&#xf…

Docker 安装mysql Mac 环境下

已安装桌面端 Docker &#xff08;Mac安装Docker&#xff09; 安装方式一 打开链接 https://www.docker.com/products/docker-desktop 选择平台下载 安装方式二 安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m…

Parcel Bundle漏洞学习

Bundle的序列化细节看上去还是有些复杂的&#xff0c;在之前已经讨论过&#xff0c;一般我们使用Parcel的时候&#xff0c;都是严格的write和read相对应。一些疏漏&#xff0c;不对应&#xff0c;竟然就可以成为漏洞&#xff0c;https://xz.aliyun.com/t/2364 里介绍了Bundle漏…

多态的定义、重写、原理

多态 文章目录多态多态的定义和条件协变&#xff08;父类和子类的返回值类型不同&#xff09;函数隐藏和虚函数重写的比较析构函数的重写关键字final和override抽象类多态的原理单继承和多继承的虚函数表单继承下的虚函数表多继承下的虚函数表多态的定义和条件 定义&#xff1…

add_header重写的坑

问题描述&#xff1a; nginx 的 add_header 配置在很多文档中都标注为&#xff1a;“可以覆盖响应头”&#xff0c;然而并没有说出使用场景&#xff0c;导致不少开发人员在使用 add_header 时都出现了错误&#xff1a;add_header 根本没有重写响应头&#xff01; add_header 的…

指向函数的指针详解,以及如何使用指向函数的指针变量做函数参数

指向函数的指针作为函数参数&#xff0c;是 C 语言实际应用中的一个比较深入的部分。 目录 一、什么是函数的指针 二、用函数指着变量调用函数 2.1举例说明 三、怎样定义和使用指向函数的指针变量 3.1定义指向函数的指针变量 3.2指向函数的指针变量详解 3.3通过指针变量…

httpd使用记录

httpd使用记录 Busybox用一个httpd的程序&#xff0c;尝试用起来。 简单测试 启动服务 # 启动服务 mkdir /var/www/html httpd -p 8080 -h /var/www/html &编写html文件 在/var/www/html下放一个测试网页index.html文件。 <!DOCTYPE html> <html><hea…

2022济南大学acm新生赛题解

通过答题情况的难度系数&#xff1a; 签到&#xff1a;A 简单&#xff1a;BL 中等&#xff1a;D 困难&#xff1a;CM 极难&#xff1a;KNO A-和 算出n个数的和判断正负性即可&#xff01;&#xff01;&#xff01; 发现很多同学的代码错误&#xff1a;要么sum未赋初值&…

数据库--进阶篇--9--存储引擎

MySQL体系结构 索引是在引擎层&#xff0c;所以不同的存储引擎&#xff0c;它的索引结构不同。 存储引擎简介 存储引擎就是存储数据、建立所以、更新/查询数据等技术的实现方式。存储引擎是基于表的&#xff0c;而不是基于库的&#xff0c;所以存储引擎也可以被称为表类型。 …

如何利用多功能智慧杆建设森林防火监测预警网?

近年来&#xff0c;我国森林面积稳步增长&#xff0c;生态空间质量稳中向好&#xff0c;森林碳汇能力稳步提升&#xff0c;“绿水青山就是金山银山”的发展理念得到有效贯彻。但随着森林面积的不断扩大&#xff0c;森林火灾的风险也随之增长&#xff0c;森林防火的工作也尤为重…

JS学习第9天——ES6中面向对象(类class、constructor构造函数、类的继承extends、super关键字、面向对象tab栏切换案例)

目录一、面向对象1、面向过程2、面向对象3、两者对比二、ES6中的类和对象1、面向对象的思维特点2、对象3、类class4、类constructor构造函数三、类的继承1、继承2、super()关键字3、注意点四、面向对象案例一、面向对象 两大编程思想&#xff1a;① 面向过程 ② 面向对象 1、…

Python源码解读(一):CPython源码下载和参考资料

1、写在前面 大家好&#xff0c;这里是程序员晚枫&#xff0c;全平台同名。 之前在广东工作&#xff0c;从事后端开发&#xff0c;主要使用Java和Python&#xff0c;自己业余时间做了一些Python的开源项目。 来重庆工作以后&#xff0c;经过曲折的求职阶段&#xff0c;目前从…

网络、接口学习笔记一

Gigabit Ethernet 是标识 千兆以太网网口&#xff0c;10GE就是万兆&#xff0c;100GE就是10万兆。 VLAN是什么&#xff1f; VXLAN是什么&#xff1f; 局域网是什么&#xff1f; RJ45接口是什么&#xff1f; GE电口和RJ45透传口的区别&#xff1f; VLAN&#xff08;虚拟局域网…

超超超超保姆式详解——字符函数和字符串函数(学不会打我)上

目录 长度不受限制的字符串函数 strlen部分 strlen函数的易错小知识 strlen函数的实现 strcpy部分 strcat部分 自己实现strcat strstr函数部分 简单例子&#xff1a; 分析 strcmp部分 长度受限制的字符串函数 strncpy 简单例子 strncat strncmp 简单例子 &…

深度学习知识点简单概述【更新中】

文章目录人工神经网络的定义神经元的定义神经元的功能单层神经网络感知机人工神经网络的定义 人工神经网络(英语:Artificial Neural Network&#xff0c;ANN)&#xff0c;简称神经网络(Neural Network,NN&#xff09;或类神经网络&#xff0c;是一种模仿生物神经网络(动物的中…

class03:MVVM模型与响应式原理

目录一、MVVM模型二、内在1. 深入响应式原理2. Object.entries3. 底层搭建一、MVVM模型 MVVM&#xff0c;即Model 、View、ViewModel。 Model > data数据 view > 视图&#xff08;vue模板&#xff09; ViewModel > vm > vue 返回的实例 > 控制中心, 负责监听…

docker基本命令 - 数据卷

作用 ● 做数据持久化。防止容器一旦停止运行&#xff0c;该容器中运行产生的数据就没了 ● 不同容器之间的数据共享(大鲸鱼背上各个小集装箱之间可以共享数据) 交互式命令使用 docker run -it -v / 宿主机的绝对路径目录:/容器内绝对路径目录 镜像名 docker run -it -v / 宿…

SUBMIT的用法

SUBMIT的用法 一、简介 系统MB52/MB51/MB5B等类似的报表 &#xff0c;虽然数据很全面&#xff0c;执行效率也够快&#xff0c;但是经常会不满足用户需求&#xff08;增添字段、添加查询条件等&#xff09;&#xff0c;很多ABAP 会选择去COPY出标准程序&#xff0c;然后去做修改…

376. 摆动序列——【Leetcode每日刷题】

376. 摆动序列 如果连续数字之间的差严格地在正数和负数之间交替&#xff0c;则数字序列称为 摆动序列 。第一个差&#xff08;如果存在的话&#xff09;可能是正数或负数。仅有一个元素或者含两个不等元素的序列也视作摆动序列。 例如&#xff0c; [1, 7, 4, 9, 2, 5] 是一个…

WMS仓库管理系统解决方案,实现仓库管理一体化

仓库是企业的核心环节&#xff0c;若没有对库存的合理控制和送货&#xff0c;将会造成成本的上升&#xff0c;服务品质的难以得到保证&#xff0c;进而降低企业的竞争能力。WMS仓库管理系统包括基本信息&#xff0c;标签&#xff0c;入库&#xff0c;上架&#xff0c;领料&…