当前位置: 首页 > news >正文

web基础之CSS

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>

在这里插入图片描述

总结

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

相关文章:

web基础之CSS

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、定位 总…...

全球轻型卡车胎市场规划预测:2030年市场规模将接近1153亿元,未来六年CAGR为2.0%

一、引言 随着全球物流行业的持续发展&#xff0c;轻型卡车胎作为物流运输的关键消耗品&#xff0c;其市场重要性日益凸显。本文旨在探索轻型卡车胎行业的发展趋势、潜在商机及其未来展望。 二、市场趋势 全球轻型卡车胎市场的增长主要受全球物流行业增加、消费者对轮胎性能要…...

8.2 数据结构王道复习 2.3.3 2.3.7选择题错题review

王道中这章主讲了线性表的定义、基本操作、顺序表示、链式表示。下方内容主分了文字部分和代码部分&#xff0c;便于记忆和整理。 在901中这章的要求集中在链表的基础操作中&#xff0c;应用题大概会出问答题。 【当前每一小节的应用题待做&#xff0c;先把选择题过完&#xff…...

【DL】神经网络与机器学习基础知识介绍(二)【附程序】

原文&#xff1a;https://mengwoods.github.io/post/dl/009-dl-fundamental-2/ 文章目录 激活函数卷积神经网络超参数其他程序 激活函数 激活函数的目的是在模型中引入非线性&#xff0c;使网络能够学习和表示数据中的复杂模式。列出常见的激活函数。 线性函数&#xff1a; y…...

6万字嵌入式最全八股文面试题大全及参考答案(持续更新)

目录 冒泡排序算法的平均时间复杂度和最坏时间复杂度分别是多少?在什么情况下使用冒泡排序较为合适? 选择排序算法是稳定的排序算法吗?为什么? 插入排序在近乎有序的数组中表现如何?为什么? 快速排序的基本思想是什么?它在最坏情况下的时间复杂度是多少? 归并排序…...

iceberg 用户文档(持续更新)

iceberg 用户文档 表 Schema 变更查看表的元数据信息表参数变更 表 Schema 变更 Iceberg 支持使用 Alter table … alter column 语法对 Schema 进行变更&#xff0c;示例如下 -- spark sql -- 更改字段类型 ALTER TABLE prod.db.sample ALTER COLUMN measurement TYPE doubl…...

基于YOLOv8的船舶检测系统

基于YOLOv8的船舶检测系统 (价格85) 包含 【散货船&#xff0c;集装箱船&#xff0c;渔船&#xff0c;杂货船&#xff0c;矿砂船&#xff0c;客船】 6个类 通过PYQT构建UI界面&#xff0c;包含图片检测&#xff0c;视频检测&#xff0c;摄像头实时检测。 &#xff08;该…...

使用腾讯云域名解析实现网站重定向

前言 最近&#xff0c;在CSDN平台上我写了一系列博客&#xff0c;希望能与同学分享一些技术心得。然而&#xff0c;每当需要向他人推荐我的博客时&#xff0c;那串复杂且缺乏规律的CSDN博客首页域名总让我感到不便。这让我开始思考&#xff0c;如果能将这一域名替换为一个既个…...

为什么相比直接使用new和std::shared_ptr构造函数,make_shared在内存分配和管理方面更为高效。

使用std::make_shared相比于直接使用new和std::shared_ptr构造函数在内存分配和管理方面更为高效&#xff0c;主要原因如下&#xff1a; 内存分配效率 std::make_shared通过一次内存分配来同时分配控制块&#xff08;用于引用计数等&#xff09;和对象的内存。这种方式减少了…...

7-Python数据类型——列表和元组的详解(增删改查、索引、切片、步长、循环)

一、列表 1.1 列表 list 有序且可变的容器&#xff0c;可以存放多个不同类型的元素 列表就是专门用来记录多个同种属性的值 列表&#xff1a;存储同一个类别的数据&#xff0c;方便操作 字符串&#xff0c;不可变&#xff1a;即&#xff1a;创建好之后内部就无法修改【内置…...

大数据-61 Kafka 高级特性 消息消费02-主题与分区 自定义反序列化 拦截器 位移提交 位移管理 重平衡

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…...

Google Gemma2 2B:语言模型的“小时代”到来?

北京时间8月1日凌晨&#xff08;当地时间7月31日下午&#xff09;&#xff0c;Google发布了其Gemma系列开源语言模型的更新&#xff0c;在AI领域引发了巨大的震动。Google Developer的官方博客宣布&#xff0c;与6月发布的27B和9B参数版本相比&#xff0c;新的2B参数模型在保持…...

三线程顺序打印1-100

三线程顺序打印1-100 题目 三个线程顺序打印1-100; 解题 基本思路 首先需要创建三个线程, 确定使用线程1打印 num % 3 1 的数, 线程2打印 num % 3 2 的数, 线程3打印 num % 3 0 的数;使用 synchronized 同步锁让每次只有一个线程进行打印, 每个线程打印前先判断当前数是…...

中央处理器CPU

中央处理器CPU cpu的组成&#xff08;从功能方面来看&#xff09;cpu的执行过程★.取指令阶段★.解码阶段★.执行阶段 重点&#xff1a; 1.cpu的组成 2.cpu怎么执行程序&#xff08;命令&#xff09; cpu的组成&#xff08;从功能方面来看&#xff09; 寄存器&#xff1a;用来临…...

用Python实现AI人脸识别

实现AI人脸识别通常涉及到使用深度学习库&#xff0c;如TensorFlow或PyTorch&#xff0c;配合预训练的人脸识别模型。以下是一个使用Python和TensorFlow框架中的tensorflow_hub模块来加载和使用一个预训练的人脸识别模型的简单示例。 步骤 1: 安装必要的库 首先&#xff0c;你…...

MSPM0G3507_2024电赛自动行驶小车(H题)_问题与感悟

这次电赛题目选的简单了&#xff0c;还规定不能使用到摄像头&#xff0c;这让我之前学习的Opencv 4与树莓派无用武之地了&#xff0c;但我当时对于三子棋题目饶有兴趣&#xff0c;但架不住队友想稳奖&#xff0c;只能选择这个H题了...... 之后我还想抽空将这个E题三子棋题目做…...

C语言:指针(2)

一.数组名 在了解数组名前我们先看一段代码 int arr[10] {1,2,3,4,5,6,7,8,9,10}; int *p &arr[0]; 根据我们上一篇学习的知识&#xff0c;我们知道&arr[0]是数组第一个元素的地址&#xff0c;这时我们再看另一段代码的运行结果。 #include <stdio.h> int ma…...

数组——二维数组

数组(中) 二维数组 定义 二维数组本质上是一个行列式的组合&#xff0c;也就是说二维数组是有行和列两部分构成。二维数组数据是通过行列进行解读。 二维数组可被视为一个特殊的一维数组&#xff0c;相当于二维数组又是一个一维数组&#xff0c;只不过它的元素是一维数组。 …...

深入 Vue 组件与状态管理的教程

目录 深入 Vue 组件与状态管理的教程第一部分&#xff1a;深入组件1. 理解插槽&#xff08;Slots&#xff09;的使用1.1 基础插槽示例1.2 具名插槽1.3 作用域插槽 第二部分&#xff1a;Vue Router1. 学习 Vue Router 的基本配置1.1 基本路由配置1.2 嵌套路由1.3 路由参数 2. 导…...

Spring Boot 实现异步处理多个并行任务

在现代Web应用开发中&#xff0c;异步处理和多任务并行处理对于提高系统的响应性和吞吐量至关重要。Spring Boot 提供了多种机制来实现异步任务处理&#xff0c;本文将介绍如何利用这些机制来优化您的应用程序性能。 1. 引言 在高负载情况下&#xff0c;如果所有的请求都采用…...

TiDB系列之:使用Flink TiDB CDC Connector采集数据

TiDB系列之&#xff1a;使用Flink TiDB CDC Connector采集数据 一、依赖项二、Maven依赖三、SQL Client JAR四、如何创建 TiDB CDC 表五、连接器选项六、可用元数据七、特征一次性处理启动阅读位置多线程读取DataStream Source 八、数据类型映射 TiDB CDC 连接器允许从 TiDB 数…...

每日一道算法题 最接近的三数之和

题目 16. 最接近的三数之和 - 力扣&#xff08;LeetCode&#xff09; Python class Solution:def threeSumClosest(self, nums: List[int], target: int) -> int:nums.sort()nlen(nums)ans0min_diffinf # infinite 无穷for i in range(n-2):tmpnums[i]li1rn-1while l<…...

搭建自己的金融数据源和量化分析平台(六):下载并存储沪深两市上市公司财报

基于不依赖wind、某花顺等第三方平台数据的考虑&#xff0c;尝试直接从财报中解析三大报表进而计算ROE等财务指标&#xff0c;因此需要下载沪深两市的上市公司财报数据&#xff0c;便于后续从pdf中解析三大报表。 深市爬虫好做&#xff0c;先放深市爬虫&#xff1a; 根据时间段…...

C语言-常见关键字详解

一、const 关键字const用于声明常量&#xff0c;赋值后&#xff0c;其值不能再被修改。 示例&#xff1a; const int MAX_COUNT 100; 二、static static关键字在不同情境下有不同作用&#xff1a; 1.函数中的静态变量&#xff1a;保留变量状态&#xff0c;仅初始化一次&a…...

异步编程之std::future(一): 使用

目录 1.概述 2.std::future的基本用法 3.使用 std::shared_future 4.std::future的使用场景 5.总结 1.概述 在编程实践中&#xff0c;我们常常需要使用异步调用。通过异步调用&#xff0c;我们可以将一些耗时、阻塞的任务交给其他线程来执行&#xff0c;从而保证当前线程的…...

Vue3 + JS项目配置ESLint Pretter

前言 如果在开发大型项目 同时为多人协作开发 那么 ESLint 在项目中极为重要 在使用 ESLint 的同时 也需要使用 Pretter插件 统一对代码进行格式化 二者相辅相成 缺一不可 1. 安装 VsCode 插件 在 VsCode 插件市场搜索安装 ESLint 和 Pretter 2. 安装依赖 这里直接在 pac…...

JavaScript (十四)——JavaScript typeof和类型转换

目录 JavaScript typeof, null, 和 undefined typeof 操作符 null undefined undefined 和 null 的区别 JavaScript 类型转换 JavaScript 数据类型 JavaScript 类型转换 将数字转换为字符串 将布尔值转换为字符串 将日期转换为字符串 将字符串转换为数字 一元运算符…...

CTF-web 基础

网络协议 OSI七层参考模型&#xff1a;一个标准的参考模型 物理层 网线&#xff0c;网线接口等。 数据链路层 可以处理物理层传入的信息。 网络层 比如IP地址 传输层 控制传输的内容的传输&#xff0c;在传输的过程中将要传输的信息分块传输完成之后再进行合并。 应用…...

CP AUTOSAR标准之ChineseV2XNetwork(AUTOSAR_SWS_ChineseV2XNetwork)(更新中……)

1 简介和功能概述 本文档指定了AUTOSAR基础软件模块中国车辆对接网络(CnV2xNet)的功能、API和配置。   中国车联网网络(CnV2xNet)与中国车联网消息(CnV2xMsg)、中国车联网管理(CnV2xMgt)、中国车联网安全(CnV2xSec)以及AUTOSAR BSW模块以太网接口(EthIf)共同构成了AUTOSAR架构…...

【hloc】 项目流程

hloc 项目流程 1. 数据集准备2. 特征提取3. 匹配特征4. 三维重建5. 定位6. 结果评估7. 示例脚本 这个项目涉及到了视觉定位和三维重建的一系列步骤&#xff0c;从特征提取、匹配、三维重建到定位和结果评估。通过提供的脚本文件&#xff0c;用户可以方便地运行整个流程。 1. 数…...

郑州网站建设 推广/石家庄网站建设

函数声明和函数表达式 1.函数声明的格式不再赘述&#xff1b; 2.函数表达式的定义&#xff1a;是其他表达式的一部分的函数&#xff08;作为赋值表达式的右值&#xff0c;或者作为其他函数的参数&#xff09;叫作函数表达式。函数表达式非常重要&#xff0c;在于它能准确地在我…...

龙岗区最新通告/提高seo关键词排名

goldengate for sqlserver 日志暴涨的解决办法 gg for sqlserver 2008 R2 开启后&#xff0c;sqlserver的日志会出现暴涨的情况&#xff0c;解决办法如下&#xff1a; 1.先确认是否数据库设置问题导致 如&#xff1a; 1)查看ggerror中&#xff0c;是否有报错&#xff01; 2)…...

福田网站建设方案服务/百度链接收录提交入口

系统迁移&#xff0c;能够帮我们大大的节约装系统或者数据搬迁的时间。系统迁移其本质是以一个硬盘或者分区为源目标&#xff0c;将其系统、数据文件克隆到另一个硬盘或者分区。DiskGenius、Norton ghost等工具都有克隆硬盘、分区的能力&#xff0c;但是用作系统迁移很麻烦&…...

政府网站wap门户建设方案/bt种子万能搜索神器

cmd命令 1.system 导出全部表结构和数据 注意 &#xff1a;1.导出服务器的地址 192.168.1.252:1521/orcl 2. 登录名 ownerorcl (当前用户的登录名) 3. 导出文件的位置 fileD:\oracle\zkgs 4. 导出日志文件的位置 logD:\oracle\zkgs exp system/format192.168.1.252:1521/…...

做最好的在线看片网站/东莞做网站seo

庆幸也与你逛过那一段旅程曾是日夜期待你施舍一点同情这算是固执做梦或太热情?在世上没有多少东西会尽如人意多数像讽刺逐年成长必经苦恋故事我爱你你扮作不知完了吧如无意外重今开始该好好恋爱放下从前一段感情才能追求将来你就似没存在完了吧仍能撑起来前进便让自尊心放开告…...

教人做美食视频网站/班级优化大师app下载

在web项目中&#xff0c;XML作为一种重要的数据存储和传输介质&#xff0c;被广泛使用。XML文件&#xff0c;XML字符串和XML Document对象是XML存在的三种形式&#xff0c;XML文件无需多言&#xff0c;和普通的文本并无二致&#xff1b;倒是在做一般的XML数据交换过程中&#x…...