web基础之CSS

news2024/9/20 10:34:19

web基础之CSS

文章目录

  • web基础之CSS
    • 一、CSS简介
    • 二、基本用法
      • 2、CSS应用方式
        • 2.1 行内样式
        • 2.2内部样式
        • 2.3外部样式
    • 三、选择器
      • 1、标签选择器
      • 2、类选择器
      • 3、ID选择器
      • 4、选择器的优先级
    • 四、常见的CSS属性
      • 1、字体属性
      • 2、文本属性
      • 3、背景属性
      • 4、表格属性
      • 5、盒子模型的属性
      • 6、定位
    • 总结

一、CSS简介

CSS（Cascading Style Sheel）层叠样式表。是一组设置样式规则，并用于空值页面的外观布局的样式。

作用：用于页面的外观美化，以及页面组件的布局和定位。

二、基本用法

CSS语法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		
		<style>
			选择器{        		#表示要修饰的对象
				属性名:属性值;	  #修饰对象的具体属性（样式）：样式的取值；
			}
		</style>
		
	</head>
	<body>
	</body>
</html>

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		
		<style>
			p{
				font-size: 20px;
				color: red;
			}
		</style>
		
	</head>
	<body>
		<p>这是一个段落标签</p>
	</body>
</html>

在这里插入图片描述

2、CSS应用方式

引用方式一共有三种：行内样式、内部样式、外部样式。

2.1 行内样式

被称为嵌入式，通过使用HTML 标签的style属性进行定义，样式只对设置了style属性的标签起作用。

<body>
		<p>这是一个段落标签</p>
		<p style="color: red; font-style: 宋体;">样式的尝试，行内样式</p>
</body>

在这里插入图片描述

2.2内部样式

被称为内嵌样式，在页面头部通过style标签定义，对当前页面中所有符合样式的选择器标签都起作用。

	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<style>
			p{
				color: pink;
				font-size: 50px;
			}
		</style>
		
	</head>
	<body>
		<p>这是一个段落标签</p>
		<p>样式的尝试，内部样式</p>
	</body>

在这里插入图片描述

2.3外部样式

就是在页面文件外单独的创建一个.css 的文件。然后再页面文件中使用 link标签 进行引入。
引用：

	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<link rel="stylesheet" type="text/css" href="css/01.css" />
	</head>

css文件：

h1{
	color: green;
}
p{
	color: blueviolet;
}

在这里插入图片描述

三、选择器

1、标签选择器

也被称为元素选择器，使用HTML标签作为选择器的名称。
在这里插入图片描述

在这里插入图片描述

2、类选择器

使用自定义的名称，以 . （点）作为前缀，然后再通过HTML 标签的Class属性调用类选择器。

注意：

  • 调用时不能添加 . 号。
  • 同时调用多个类选择器时，以 空格 分隔。
  • 类选择器名称不能以数字开头。
    在这里插入图片描述

3、ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配，一对一的关系。
在这里插入图片描述
在这里插入图片描述

4、选择器的优先级

行内样式>ID选择器>类选择器>标签选择器
因为样式的加载顺序是，根据书写顺序进行加载的，在同优先级的前提下，后加载的会覆盖先加载的同名样式，就是就近原则，离得越近越优先。

四、常见的CSS属性

1、字体属性

设置字体的相关样式。

属性含义说明
font-size大小、尺寸可以使用多种单位
font-weight粗细
font-family字体
font-style样式
font简写
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			h1{
				color: red;
				font-size: 50px;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
			}
			
			.aa{
				color: aqua;
				font-style: italic;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

2、文本属性

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
vertical-align竖直对齐方式取值：top、middle、bottom可用于图片和文字的对齐方式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			h1{
				color: red;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
				line-height: 80px;
				vertical-align:top;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
				text-align: left;
			}
			
			.aa{
				color: aqua;
				font-size: 80px;
				font-style: italic;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

3、背景属性

属性含义说明
background-color背景颜色
background-image背景图片使用url（）方式进行指定图片路径
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css语法</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			body{
				background-color: bisque;
				<!--background-image: url("img/03.png");-->
			
			}
			h1{
				color: red;
				font-size: 50px;
				line-height: 50px;
				text-align: center;
			}
			.a{
				color: blueviolet;
				font-weight: bold;
				line-height: 80px;
				vertical-align:top;
			}
			
			#bb{
				color: green;
				font-family: 宋体;
				text-align: left;
			}
			
			.aa{
				color: aqua;
				font-size: 80px;
				font-style: italic;
				text-align: right;
			}
		</style>
	</head>
	<body>
		<p id="bb">这是一个段落标签</p>
		<p class="a">样式的尝试，内部样式</p>
		<h1>这是一个大标题</h1>
		<p class="aa">样式</p>
	</body>
</html>

在这里插入图片描述

4、表格属性

border-collapse：表格中相邻的边框是否合并为单一边框。
取值：separated（默认） collapse

		<style>
			table{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				border-collapse: collapse;
			}
			td{
				border: 1px solid red;
			}
			
		</style>

在这里插入图片描述

5、盒子模型的属性

盒子模型就是网页页面的布局。

  • width：宽度
  • height：高度
  • border：边框
  • padding：内边框
  • margin：外边框
    盒子的边框（border）
    盒子的边框分为四个方向：
    1、顶部：top：border -top 三个样式：分别是：1、color 、width、和style
    2、右边：right border -right 三个样式：分别是：1、color 、width、和style
    3、左边：left border-left 三个样式：分别是：1、color 、width、和style
    4、下边：bottom border -bottom 三个样式：分别是：1、color 、width、和style
  • 边框样式的取值：
    1、solid实线、
    2、dashed：虚线
    3、dotted：点线
    4、double：双线
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型属性</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			p{
				width: 300px;
				background-color: aquamarine;
			}
			.a1{
				
				/* border-top-color:red;
				border-top-width: 2px;
				border-top-style: solid;
				
				border-right-color: blue;
				border-right-width: 3px;
				border-right-style: dotted;
				主要设置了顶部边框和右边框的属性
				 */

				border: 1px solid red;
				padding: 20px;
				margin: 10px;
			}
			.a2{
				padding: 30px;
			}
			.a3{
				margin: auto;
				text-align: center;
				height: 100px;
				line-height: 100px;
			}
			
		</style>
	</head>
	<body>
		<p class="a1">这是一个元素</p>
		<p class="a2">这是二个元素</p>
		<p class="a3">这是三个元素</p>
	</body>
</html>

在这里插入图片描述

6、定位

通过position 属性实现对元素的定位，在设置定位方式后，还需要设置定位属性。
定位常见方式取值如下：

取值含义说明
static默认值按照常规文档流进行显示
relative相对定位相对于标签原来的位置进行定位
absolute绝对定位相对于第一个非static定位的父标签的定位
fixed固定定位相对于浏览器窗口进行定位
定位属性就是：顶部（top）、左边（left）、右边（right）、顶部（bottom）
  • 1、相对定位

先设置元素的position属性为relative，然后再设置定位属性（方向性）。

  • 2、绝对定位

先设置父标签为非static定位，然后设置元素的position属性为absolute，最后再设置定位属性（也就是方向）。

  • 3、固定定位
    先将元素的position属性设置为fixed，然后再设置定位属性（方向）。
  • 4、z-index元素
    通过z-index元素进行设置优先级，通过z-index来控制元素的堆叠顺序，取值为数字，值越大优先级越高。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<!--<link rel="stylesheet" type="text/css" href="css/01.css" />-->
		<style>
			#zhu{
				width: 900px;
				border: 1px solid red;
				position: relative;
			}
			.div1{
				width: 100px;
				height: 80px;
				background-color: aqua;
				position: relative;/* 相对定位 */
				top: 30px;
				left: 60px;
				z-index: -6;
			}
			.div2{
				width: 100px;
				height: 80px;
				background-color: bisque;
				position: absolute;
				left: 180px;
				bottom: 80px;
				z-index: -9;
			}
			.div3{
				width: 100px;
				height: 80px;
				background-color: cadetblue;
				position: fixed;
				bottom:20px;
				left: 100px;
			}
			.div4{
				width: 100px;
				height: 80px;
				background-color: chartreuse;
			}
			
			
		</style>
	</head>
	<body>
		<div id="zhu">
			<div class="div1">第一个盒子</div>
			<div class="div2">第二个盒子</div>
			<div class="div3">第三个盒子</div>
			<div class="div4">啥也不做</div>
		</div>
	</body>
</html>

在这里插入图片描述

总结

以上就是近期的学习，不足之处还望指点。未完待续…

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

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

相关文章

LabVIEW激光主动探测系统

LabVIEW激光主动探测系统

开发了一种基于LabVIEW的高性能激光主动探测控制与处理系统的设计与实现。该系统充分利用了LabVIEW的多线程和模块化设计优势&#xff0c;提供了一套功能完整、运行高效且稳定的解决方案&#xff0c;适用于高精度激光探测领域。 项目背景 激光主动探测技术利用激光作为主动光源…
阅读更多...
dp专题（二）

dp专题（二）

洛谷&#xff1a;B3626 跳跃机器人 题目描述 地上有一排格子&#xff0c;共 nn 个位置。机器猫站在第一个格子上&#xff0c;需要取第 nn 个格子里的东西。 机器猫当然不愿意自己跑过去&#xff0c;所以机器猫从口袋里掏出了一个机器人&#xff01;这个机器人的行动遵循下面…
阅读更多...
【面试题】【C语言】寻找两个正序数组的中位数

【面试题】【C语言】寻找两个正序数组的中位数

寻找两个正序数组的中位数 仅供学习 题目 算法时间复杂度 二分查找算法&#xff0c;时间复杂度为 O(log(min(m, n)))&#xff0c;其中 m 和 n 分别是两个数组的长度。 子函数 查找两个数字的最大值 int max(int a, int b) {return a > b ? a : b; }查找两个数字的最小…
阅读更多...
ubuntu20.04搭建RUST开发环境并与C语言交互

ubuntu20.04搭建RUST开发环境并与C语言交互

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 ubuntu20.04搭建RUST开发环境并与C语言交互 前言开战一、确认环境版本二、环境搭建三、hello world&#xff01;四、跟c语言进行交互1.rust调用C静态库2.C调用rust库 总结参考…
阅读更多...
LDR6500：小封装，易设计外围简单OTG数据+充电实现原理

LDR6500：小封装，易设计外围简单OTG数据+充电实现原理

移动设备的普及与功能日益丰富的今天&#xff0c;OTG&#xff08;USB On-The-Go&#xff09;转接器作为连接移动设备与外部设备的桥梁&#xff0c;其重要性不言而喻。而LDR6500&#xff0c;作为乐得瑞科技精心打造的一款USB-C DRP&#xff08;Dual Role Port&#xff0c;双角色…
阅读更多...
vue3修改带小数点的价格数字：小数点的前后数字，要分别显示成不同颜色和大小！已经封装成组件了！

vue3修改带小数点的价格数字：小数点的前后数字，要分别显示成不同颜色和大小！已经封装成组件了！

需求&#xff1a; 修改带小数点的价格数字&#xff1a;小数点的前后数字&#xff0c;要分别显示成不同颜色和大小&#xff01;已经封装成组件了&#xff01; 效果&#xff1a; 前面大&#xff0c;后面小 代码&#xff1a; 组件&#xff1a; <!--修改小数点前后数字不同…
阅读更多...
nodejs多版本随心切换-windows

nodejs多版本随心切换-windows

nodejs多版本控制 1. 安装 nvm github下载地址 不需要卸载已安装的nodejs&#xff0c;安装时会让你选择nodejs的位置&#xff0c;可修改为你已经安装的路径&#xff0c;会自动搜索已安装版本&#xff0c;并进行弹窗询问&#xff0c;选择托管即可 2. 修改配置文件 在 nvm 安装…
阅读更多...
全网最适合入门的面向对象编程教程：30 Python的内置数据类型-object根类

全网最适合入门的面向对象编程教程：30 Python的内置数据类型-object根类

全网最适合入门的面向对象编程教程&#xff1a;30 Python 的内置数据类型-object 根类 摘要&#xff1a; 在 Python 中&#xff0c;所有的类都直接或间接继承自一个根类&#xff0c;这个根类是Object。Object类是 Python 中所有新式类的基础类&#xff0c;在 Python 的类层次结…
阅读更多...
Docker安装Nacos及动态配置

Docker安装Nacos及动态配置

文章目录 1.安装Nacos1.拉取镜像2.启动Nacos3.开启8848和9848端口1.88482.9848 4.访问nacos1.网址 http://guest:8848/nacos/ 2.Nacos动态配置&#xff08;无法实现bean动态加载&#xff09;1.新建一个配置&#xff0c;使其成为动态的2.引入Nacos依赖3.application.yml配置Naco…
阅读更多...
常见病症之中医药草马齿苋

常见病症之中医药草马齿苋

常见病症之中医药草马齿苋 1. 源由2. 马齿苋植物描述药用部分主要成分药理作用使用方法注意事项 2. 常用方剂2.1 马齿苋汤2.2 马齿苋粥 3. 马齿苋的奇效具体应用实例 4. 湿疹方剂4.1 常见方剂内服方剂加减调整外用方剂 4.2 加“马齿苋”内服方剂加减调整外用方剂 4.3 注意事项 …
阅读更多...
【Spring Boot】配置 Spring Security

【Spring Boot】配置 Spring Security

配置 Spring Security 1.继承 WebSecurityConfigurerAdapter2.配置自定义策略3.配置加密方式3.1 BCrypt 加密 4.自定义加密规则5.配置多用户系统5.1 构建 UserDetailsService 用户信息服务接口5.2 进行安全配置 6.获取当前登录用户信息的几种方式6.1 在 Thymeleaf 视图中获取6.…
阅读更多...
第23集《大佛顶首楞严经》

第23集《大佛顶首楞严经》

请大家打开讲义第五十二页&#xff0c;癸八&#xff0c;约外道世谛对简显见性非因缘自然。 本经的修学特色&#xff0c;简单地讲&#xff0c;它是在处理生命的根本问题。就是当我们在行菩萨道的时候&#xff0c;我们会去布施、持戒、忍辱或者是禅定&#xff0c;在整个修学当中…
阅读更多...
centos 8.5时间设置

centos 8.5时间设置

编辑 chrony 配置文件 vim /etc/chrony.conf新增内容&#xff1a; server 210.72.145.44 iburst server ntp.aliyun.com iburst同时要注释一下&#xff1a;# pool 2.centos.pool.ntp.org iburst 重启chronydf服务 systemctl restart chronyd.service设置 chronyd 开机自启…
阅读更多...
谷粒商城实战笔记-118-全文检索-ElasticSearch-进阶-aggregations聚合分析

谷粒商城实战笔记-118-全文检索-ElasticSearch-进阶-aggregations聚合分析

文章目录 一&#xff0c;基本概念主要聚合类型 二&#xff0c;实战1&#xff0c;搜索 address 中包含 mill 的所有人的年龄分布以及平均年龄&#xff0c;但不显示这些人的详情2&#xff0c;按照年龄聚合&#xff0c;并且请求每个年龄的平均薪资 Elasticsearch 的聚合&#xff0…
阅读更多...
大屏宁德烟草第二版总结,批量导入

大屏宁德烟草第二版总结,批量导入

toFixed toFixed(x) 方法返回一个表示 numObj 的字符串&#xff0c;如果不该x&#xff0c;会进行四舍五入。 includes() includes() 方法用来判断一个数组是否包含一个指定的值&#xff0c;根据情况&#xff0c;如果包含则返回 true&#xff0c;否则返回 false。 批量导入…
阅读更多...
饿了吗新版bxet

饿了吗新版bxet

声明(lianxi a15018601872) 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 前言(…
阅读更多...
【Linux】网络编程_3

【Linux】网络编程_3

文章目录 十、网络基础5. socket编程socket 常见APIsockaddr结构简单的UDP网络程序 未完待续 十、网络基础 5. socket编程 socket 常见API // 创建 socket 文件描述符 (TCP/UDP, 客户端 服务器) int socket(int domain, int type, int protocol);// 绑定端口号 (TCP/UDP, 服…
阅读更多...
LLM大模型的书那么多，如何快速选到适合自己的那一本？来，我教你！

LLM大模型的书那么多，如何快速选到适合自己的那一本？来，我教你！

大模型的书这么多&#xff0c;该怎么选呢&#xff1f;今天就来教大家怎么快速地从众多大模型书中选到你想要的那一本&#xff01; 朋友们如果有需要这些大模型书 扫码获取~ &#x1f449;CSDN大礼包&#x1f381;&#xff1a;全网最全《LLM大模型书籍资源包》免费分享&#xf…
阅读更多...
SpringBoot入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享

SpringBoot入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享

场景 作为一名Java开发者&#xff0c;SpringBoot已经成为日常开发所必须。 势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼&#xff0c;再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者…
阅读更多...
程序工具_doxygen

程序工具_doxygen

doxygen是API文档生成工具 安装和使用&#xff1a; 下载地址&#xff1a;https://www.doxygen.nl/download.html 安装一直next就可以。 打开后的界面&#xff1a; 使用&#xff1a; 选择好文件夹&#xff0c;然后 “Run dexygen”&#xff0c;就在选择的文件夹下生成html和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023