web前端——css（一篇教会网页制作）

目录

一、基本语法

1.行内样式表

2.内嵌样式表

3.外部样式表

二、选择器

1.标签选择器

2.类选择器

3.id 选择器

4.通配选择器

三、常见修饰

1.文本

2.背景

3.列表

4.伪类

5.透明度

6.块级、行级、行级块标签

7.div 和 span

四、盒子模型（重点）

1.内容区

2.内边距

3.边框

4.外边距

CSS是Cascading Style Sheets（级联样式表）。

CSS是一种样式表语言，用于为HTML文档控制外观，定义布局。例如，
CSS涉及字体、颜色、边距、高度、宽度、背景图像、高级定位等方面 。

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

一、基本语法

1.行内样式表

        行内样式表,又有人称内联样式、行间样式、内嵌样式。是通过标签的style属性来设置元素

样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 分别对段落内容的字体颜色、大小、字体类型进行修饰 -->
		<p style="color: red;font-size: 30px;font-family: 楷体;">我是一个段落</p>
	</body>
</html>

        效果如下：

2.内嵌样式表

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/* 通过引用<P>标签{}的形式，来进行具体修饰操作*/
			p{
				color: red;
				font-size: 30px;
				font-family: 楷体;
			}
		</style>
	</head>
	<body>
		<p>我是一个段落</p>
	</body>
</html>

        其效果同上，这里需要注意：<head>中的<P>标签修饰对<body>内所有<P>标签内容都有效

3.外部样式表

        外部样式表是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

（其中，href中填写引入的样式文件）

<head>

        <link href="newstyle.css" rel="stylesheet " type=" text /css">

        <style type=" text /css">

        </style>

</head>

二、选择器

        要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

1.标签选择器

        语法：标签名{}        通过标签选择器可以选择页面中的所有指定标签

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				color: red;
			}
		</style>
	</head>

2.类选择器

        语法：.class属性值{}        通过标签的class属性值选中一组标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/*这时，只会对p1对应的<P>标签内容进行修饰*/
			.p1{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p class="p2">我也是一个段落</p>
	</body>
</html>

 

3.id 选择器

        语法：#id属性值 {}        通过标签的id属性值选中唯一的一个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>/*这时，只会对p2对应的<P>标签进行修饰*/
			#p2{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p id="p2">我也是一个段落</p>
	</body>
</html>

 

4.通配选择器

        语法：*{}                可以用来选中页面中的所有的标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
		<p class="p2">我也是一个段落</p>
	</body>
</html>

三、常见修饰

        接下来介绍的是一些网页设计中非常基础的修饰语法，这里就不过多做代码演示，感兴趣可以自行操作。（以下操作都是在<style>标签里面进行）

1.文本

● color ：字体颜色
● font-size ：字体大小
● font-family ：字体
● text-align ：文本对齐
● text-decoration:line-through ：定义穿过文本下的一条线
● text-decoration:underline ：定义文本下的一条线
● text-decoration:none ：定义标准的文本
● font-style: italic; 斜体文本
● font-weight: 字体粗细
● line-height: 设置行高
● letter-spacing 可以指定字符间距
● text-indent 用来设置首行缩进

2.背景

● background-color 背景颜色
● background-image 背景图片
● background-repeat 背景重复
● background-size 背景尺寸
● background- position 背景位置

3.列表

● CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志 。
● list-style-image 将图象设置为列表项标志。
● list-style-position 设置列表中列表项标志的位置。
● list-style-type 设置列表项标志的类型。
● list-style 简写属性。

4.伪类

        CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状态的标签设置样式时，就可以使用伪类 。

语法样式：

        :hover伪类表示鼠标移入的状态
        :active表示的是被点击的状态
        :focus向拥有键盘输入焦点的标签添加样式。

        这里我们做一个简单的演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
	</body>
</html>

当鼠标没接触到<P>标签时：                     鼠标移入时：

5.透明度

        opacity 属性设置标签的不透明级别 值为1。

         规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。

        语法：opacity：;        冒号后面填写0-1之间的数字即可

6.块级、行级、行级块标签

● 什么是块级标签？

        块级标签：无论内容多少 都会独自占据一行的。

        例如<p>、<h1>、<ul>、<ol>、<hr/>等。

● 什么是行级标签？

        行级标签：只占自身大小的标签，不会占一行。

        例如<font>、<b>、<i>、<a>等。

● 什么是行级块标签？

        例如 <input/> <img>等

那么我们能否对不同级别标签进行转换呢？答案是肯定的！

通过display样式可以修改标签的类型。
可选值：
        block ：设置标签为块标签
        inline ：设置标签为行级标签
        inline-block ：设置标签为行级块标签
        none ：隐藏标签（标签将在页面中完全消失）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p1{
				display: inline;
			}
		</style>
	</head>
	<body>
		<p class="p1">我是一个段落</p>
	</body>
</html>

没进行display修改前：（可以清晰的观察到，独占一行）

进行修饰后：（只占自身大小）

7.div 和 span

div 标签：
        div是块级标签，可以放置任何标签。
        div没有任何附加功能，给了什么属性就能变成什么样。
        div主要的作用是被用来布局网页。
span 标签：
        span是行级标签
        span 没有任何附加功能，给了什么属性就能变成什么样。
        span标签被用来选中文档中的文字。

四、盒子模型（重点）

        CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。

        如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆放盒子。

        我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

其基本样式如图：

1.内容区

● 内容区指的是盒子中放置内容的区域，也就是标签中的文本内容，子标
签都是存在于内容区中的。
● 通过 width 和 height 两个属性可以设置内容区的大小而不是整个盒子的大
小。
● 如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一
致的。
● width 和 height 属性适用于块标签。

        这一是个普通的盒子内容区大小：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

        我们可以看到，通过对盒子width 和 height 属性的修改，改变了盒子内容区大小（蓝色区域），而非整个盒子大小：

2.内边距

        通过padding属性进行操作，设置标签的内边距

● 内边距指的就是标签内容区与边框以内的空间。
● 内边距会影响整个盒子的大小。
padding-left:10px;        有 10个像素的左边距
padding-right:10px;        有10个像素的右边距
padding:10px 20px 30px 40px     上、右、下、左四个方向分别有10、20、30、40个像素的边距 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

3.边框

        可以在标签周围创建边框，边框是标签可见框的最外部。

        格式：border:1px red solid;（分别指边框的宽度、颜色、样式）

        也可以使用 border-top/left/right/bottom 分别指定上左右下四个方向的边框。

（1）边框样式

dotted （点线） dashed （虚线） solid （实线） double （双线）groove （槽线）

（2）边框圆角

border-radius：5px 设置四个角为圆角边框（px大小可自拟）

border-top-left-radius设置左上为圆角边框

4.外边距

        外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。用法和padding

类似，同样也提供了四个方向的 。

margin-top/right/bottom/left （上、右、下、左）
margin的值可以为负值。
margin的值还可以auto（自动），设置外边距为最大值，当将左右外边距设置为auto时，浏览器会将左右外边距设置为相等.
垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main_box{
				width: 200px;
				height: 200px;
				margin: 0px auto;/*水平居中操作*/
			}
		</style>
	</head>
	<body>
		<div class="main_box">
			我是一个盒子<br />
			你们好
		</div>
	</body>
</html>

        如图，盒子被居中放置： 

注：浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，所以为很多的标签都设

置了一些默认的margin和padding，而它的这些默认样式，正常情况下我们是不需要使用的。

所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉。如下操作：

*{
        margin: 0;
        padding: 0;
}

        以上就是web前端有关css样式表语言的内容了，通过这篇文章，相信一些前端小白就已经可以自行编写一些小网页了！当然，最后的盒子模型部分还牵扯到了一些有关文档流，以及解决多个盒子排列时引发的一些异常情况要用到的定位方法，由于篇幅原因，这里不过多赘述。详情请移步至我的下一篇博客，会对此部分内容进行详细说明！

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python学习打卡：day15

Python学习打卡：day15

day15 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day15110、数据分析案例步骤 1 —— 文件读取data_define_108.pyfile_define_108.py 111、数据分析案例步骤二——数据计算112、数据分析案例步骤…
阅读更多...
基于LMS自适应滤波的窄带信号宽带噪声去除(MATLAB R2021B)

基于LMS自适应滤波的窄带信号宽带噪声去除(MATLAB R2021B)

数十年的研究极大的发展了自适应滤波理论&#xff0c;自适应滤波理论已经成为信号处理领域研究的热点之一。从理论上讲&#xff0c;自适应滤波问题没有唯一解。为了得到自适应滤波器及其应用系统&#xff0c;可以根据不同的优化准则推导出许多不同的自适应理论。目前该理论主要…
阅读更多...
【C语言】字符/字符串+内存函数

【C语言】字符/字符串+内存函数

目录 Ⅰ、字符函数和字符串函数 1 .strlen 2.strcpy 3.strcat 4.strcmp 5.strncpy 6.strncat 7.strncmp 8.strstr 9.strtok 10.strerror 11.字符函数 12. 字符转换函数 Ⅱ、内存函数 1 .memcpy 2.memmove 3.memcmp 4.memset Ⅰ、字符函数和字符串函数 1 .strlen 函数原型&…
阅读更多...
Java热门技术点总结：Lambda表达式与Stream API

Java热门技术点总结：Lambda表达式与Stream API

第一部分&#xff1a;Lambda表达式 1. 简介 Lambda表达式是Java 8引入的一个非常重要的特性&#xff0c;它提供了一种简洁、灵活的函数式编程方式。Lambda表达式允许我们将函数作为参数传递&#xff0c;极大的简化了代码的编写。 2. 基本语法 Lambda表达式的基本语法如下&a…
阅读更多...
聚类模型的算法性能评价

聚类模型的算法性能评价

一、概述 作为机器学习领域的重要内容之一&#xff0c;聚类模型在许多方面能够发挥举足轻重的作用。所谓聚类&#xff0c;就是通过一定的技术方法将一堆数据样本依照其特性划分为不同的簇类&#xff0c;使得同一个簇内的样本有着更相近的属性。依不同的实现策略&#xff0c;聚类…
阅读更多...
目标检测之YoloV1

目标检测之YoloV1

一、预测阶段&#xff08;前向推断&#xff09; 在预测阶段Yolo就相当于一个黑箱子&#xff0c;输入的是448*448*3的图像&#xff0c;输出是7*7*30的张量&#xff0c;包含了所有预测框的坐标、置信度和类别 为什么是7*7*30呢&#xff1f; --将输入图像划分成s*s个grid cell&a…
阅读更多...
stm32 No traget connected/debug识别不到串口的问题

stm32 No traget connected/debug识别不到串口的问题

关于stm32串口识别不到&#xff0c;第一步先确定是否线接错&#xff08;stlink与stm32接口对应&#xff09;&#xff0c;如果确认接线没有问题的话&#xff0c;可以使用以下方法&#xff0c;成功率较高。 首先将stlink的boot0置1&#xff0c;就是把跳线帽换到高电平这一侧&…
阅读更多...
专业技术！最新氧化物异质结纳米制备技术

专业技术！最新氧化物异质结纳米制备技术

网盘 https://pan.baidu.com/s/1vjO2yLxm638YpnqDQmX7-g?pwd3at5 MOF衍生的B_A_B结构氧化物异质结及其制备方法和应用.pdf 二硫化钼-硫化镉纳米复合材料及其制备方法和应用.pdf 具有异质界面的耐辐照复合薄膜及其制备方法与应用.pdf 基于异质结双界面层纳米材料的复合介电薄膜…
阅读更多...
基于单片机和ＬａｂＶＩＥＷ 的远程矿井水位监控系统设计

基于单片机和ＬａｂＶＩＥＷ 的远程矿井水位监控系统设计

摘要 &#xff1a; 针 对 现 有 矿 井 水 位 监 控 系 统 存 在 结 构 复 杂 和 不 能 远 程 监 控 的 问 题 &#xff0c; 设计了基于单片机和&#xff2c;&#xff41;&#xff42;&#xff36;&#xff29;&#xff25;&#xff37; 的远程矿井水位监控系统 &#xff0c; 详…
阅读更多...
获取当前操作系统的名称platform.system()

获取当前操作系统的名称platform.system()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 获取当前操作系统的名称 platform.system() [太阳]选择题 在Python中&#xff0c;platform.system() 函数被用来获取什么信息&#xff1f; import platform print("【执行】platform.s…
阅读更多...
Python数据分析第二课：conda的基础命令

Python数据分析第二课：conda的基础命令

Python数据分析第二课&#xff1a;conda的基础命令 1.conda是什么? conda是一个开源的包管理系统&#xff0c;可以帮助我们进行管理多个不同版本的软件包&#xff0c;还可以帮助我们建立虚拟环境&#xff0c;以便对不同的项目进行隔离。 简单来说&#xff0c;conda是一个软…
阅读更多...
充电站，正在杀死加油站

充电站，正在杀死加油站

最近&#xff0c;深圳公布了一组数据&#xff0c;深圳的超级充电站数量已超过传统加油站数量&#xff0c;充电枪数量也已超过加油枪数量。 从全国范围看&#xff0c;加油站关停的速度在加快。 充电站正在杀死加油站。 加油站&#xff0c;未来何去何从&#xff1f; 01. 减少 我…
阅读更多...
概率论论文(关于“到课率”的贝叶斯推理应用)

概率论论文(关于“到课率”的贝叶斯推理应用)

概率论论文(关于“到课率”的贝叶斯推理应用) 全条件概率公式和贝叶斯公式趣味识 思考1&#xff1a; (引自贝叶斯公式及朴素贝叶斯分类算法应用初探) “狼来了”的故事想必大家都知道&#xff0c;小孩子第三次对村民说狼来了的时候&#xff0c;村民们没有相信他的话&#xff0…
阅读更多...
windows 10 通过wsl安装ubuntu子系统教程

windows 10 通过wsl安装ubuntu子系统教程

本章教程，主要记录我昨天通过Windows10 wsl安装Ubuntu的安装过程。其中遇到很多问题。 一、确定是否满足条件 系统要求操作系统版本： 需要 Windows 10 版本 1903 或更高版本，且操作系统内部版本号为 18362 或更高。 建议使用最新版本的 Windows 10 以获得最佳性能和最新功能…
阅读更多...
VUE项目安全漏洞扫描和修复

VUE项目安全漏洞扫描和修复

npm audit 1、npm audit是npm 6 新增的一个命令,可以允许开发人员分析复杂的代码并查明特定的漏洞。 2、npm audit名称执行&#xff0c;需要包package.json和package-lock.json文件。它是通过分析 package-lock.json 文件&#xff0c;继而扫描我们的包分析是否包含漏洞的。 …
阅读更多...
AI数据分析007：根据Excel表格数据绘制柱形图

AI数据分析007：根据Excel表格数据绘制柱形图

文章目录 一、介绍二、输入内容三、输出内容一、介绍 将Excel文件中2013年至2019年间线上图书的销售额，以条形图的形式呈现，每个条形的高度代表相应年份的销售额，同时在每个条形上方标注具体的销售额数值 二、输入内容 在deepseek中输入提示词： 你是一个Python编程专家，…
阅读更多...
【PostgreSQL】守护数据安全：事务与数据完整性管理

【PostgreSQL】守护数据安全：事务与数据完整性管理

目录 事务管理&#xff1a;确保操作的原子性 事务的概念与重要性 事务的启动与提交 事务的回滚&#xff08;ROLLBACK&#xff09;&#xff08; 数据一致性与隔离级别 隔离级别的解释 设置隔离级别 错误处理与事务的高级策略 异常处理&#xff08;SAVEPOINT & EXCE…
阅读更多...
算法刷题日志 —— 数组和位运算

算法刷题日志 —— 数组和位运算

文章目录 [461. 汉明距离](https://leetcode.cn/problems/hamming-distance/submissions/542447020/)[448. 找到所有数组中消失的数字](https://leetcode.cn/problems/find-all-numbers-disappeared-in-an-array/submissions/)[136. 只出现一次的数字](https://leetcode.cn/pro…
阅读更多...
C# 超简单的离线人脸识别库 - ViewFaceCore

C# 超简单的离线人脸识别库 - ViewFaceCore

项目介绍 ViewFaceCore是一个基于 SeetaFace6 的 .NET 人脸识别解决方案。 项目特点 开源&#xff08;MIT license&#xff09;、免费、简单的离线人脸识别库。 跨平台&#xff08;适用于 Windows、MacOS 和 Linux &#xff09;。 .NET 框架 和 操作系统 封装完善的NuGet包…
阅读更多...
openssl 命令行生成密钥对，生成hash，PSS填充签名，校验

openssl 命令行生成密钥对，生成hash，PSS填充签名，校验

生成密钥对(RSA4096) openssl genpkey -algorithm RSA -out private_key.pem -pkeyopt rsa_keygen_bits:4096 openssl rsa -pubout -in private_key.pem -out public_key.pem将源文件data.txt生成hash值&#xff08;sha-256&#xff09; openssl dgst -sha256 -binary data.t…
阅读更多...
最新文章

Copyright @ 2022~2023