5.28 学习总结

news/2024/7/25 21:53:13/文章来源:https://blog.csdn.net/sin1810335764/article/details/139276827

一.CSS学习(一)

一、CSS简介

1、什么是CSS

  1. CSS:Cascading Style Sheet 层叠样式表
  2. 是一组样式设置的规则,用于控制页面的外观样式

2、为什么使用CSS

  1. 实现内容与样式的分离,便于团队开发
  2. 样式复用,便于网站的后期维护
  3. 页面的精确控制,让页面更精美

3、CSS作用

  1. 页面外观美化
  2. 布局和定位

二.CSS语法及特性

1.CSS语法规范

  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪一个属性(样式)
  • 属性值:样式的取值
<head><style>选择器{属性名:属性值;属性名:属性值;}</style>
</head>

2.CSS应用方式

1. 内部样式
也称为内嵌样式,在页面头部通过style标签定义

对当前页面中所有符合样式选择器的标签都起作用

2. 行内样式
也称为嵌入样式,使用HTML标签的style属性定义

只对设置style属性的标签起作用

3. 外部样式
使用单独的 .CSS 文件定义,然后在页面中使用 link标签 或 @import指令 引入

实例:

link标签引入

<link rel="stylesheet" type="text/css" href="CSS样式文件的路径">

@import指令 引入

<style>@import "CSS样式文件路径";@import url(CSS样式文件路径);
</style>

3.CSS 选择器

选择器分为基础选择器复合选择器两个大类(本文先讲基础选择器)

基础选择器是由单个选择器组成的,包括:标签选择器、类选择器、id 选择器和通配符选择器

1. 标签选择器

标签选择器(元素选择器)是指用 HTML 标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式。

标签选择器可以把某一类标签全部选择出来,比如所有的 <div> 标签和所有的 <span> 标签。
优点:能快速为页面中同类型的标签统一设置样式。
缺点:不能设计差异化样式,只能选择全部的当前标签。

标签名{属性1: 属性值1; 属性2: 属性值2; ...
}
2. 类选择器

想要差异化选择不同的标签,单独选一个或者某几个标签,可以使用类选择器,类选择器在 HTML 中以 class 属性表示,在 CSS 中,类选择器以一个点“.”号显示。

在标签class 属性中可以写多个类名,多个类名中间必须用空格分开。

.类名 {属性1: 属性值1; ...
}
3.id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。

注意:id 属性只能在每个 HTML 文档中出现一次。

#id名 {属性1: 属性值1; ...
}
4.通配符选择器

在 CSS 中,通配符选择器使用“*”定义,它表示选取页面中所有元素(标签)。

* {属性1: 属性值1; ...
}

基础选择器作用特点使用情况用法
标签选择器可以选出所有相同的标签比如p不能差异化选择较多p { color: red;}
类选择器可以选出1个或者多个标签可以根据需求选择非常多.nav { color:red; }
id选择器一次只能选择1个标签ID属性只能在每个 HTML文档中出现一次一般和js搭使用
 
#nav {color:
red;}
通配符选择甜选择所有的标签选择的太多,有部分不需要特殊情况使用* {color: red;}

三.CSS 字体属性

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式(如斜体)。

属性含义说明
font-size大小、尺寸我们通常用的单位是px 像素,一定要跟上单位
font-weight粗细记住加粗是 700 或者 bold 不加粗 是 normal 或者 400 记住数字不要跟单位
font-family字体实际工作中按照团队约定来写字体
font-style样式记住倾斜是 italic  不倾斜 是 normal 工作中我们最常用 normal
font简写

使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开,不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用

四.文本属性

CSS Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

 

五.背景属性

1. background-color
取值:transparent 透明

2. background-image

  • 必须使用url()方式指定图片的路径
  • 如果是在css样式文件中使用相对路径,此时是相对于css文件,不是相对html文件

3. background-repeat
取值:repeat(默认),repeat-x,repeat-y,no-repeat

4. background-position
默认背景图显示在左上角

取值:

  • 关键字:top、bottom、left、right、center
  • 坐标:左上角为(0,0)坐标,向右为x正方向,向下为y正方向

CSS雪碧图,即CSS Sprites,也称为CSS精灵,一种CSS图像合并技术

含 义:将网页中许多非常小的图标/图片整合到一张大图中,当访问面面时只需要下载一次,可以减少访问服务器的次数,提高性能

原理:使用background-position进行背景定位,使用坐标精确地定位出背景图片的位置

5. background-attachment
取值:scroll(默认)、fixed固定不动

6. background
简写属性:background:background-color|background-image|background-repeat|background-position以空格隔开,书写顺序没有要求

六.列表属性

1. list-style-type
取值:none、disc、circle、square、decimal

此时不再区分有序列表还是无序列表,只要设置列表前的标记就可以了

2. list-style
简写属性:list-style:list-style-type|list-style-image|list-style-position

书写顺序没有要求

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【从零开始学习RabbitMQ | 第三篇】什么是延迟消息

目录 前言&#xff1a; 延迟消息&#xff1a; 延迟消息实现方式&#xff1a; 死信交换机&#xff1a; 延迟消息插件&#xff1a; 1.基于注解的方式 2.基于Bean的方式 总结&#xff1a; 前言&#xff1a; 在现代软件开发中&#xff0c;异步消息处理已成为构建可扩展、高可…

基于Django的图书管理系统

文章目录 前言一、页面展示1.登录2.前端页面3.后端页面 二、项目上传&#xff08;1&#xff09;导入数据库&#xff08;2&#xff09;导入项目&#xff08;3&#xff09;数据库密码修改&#xff08;4&#xff09;进入网站 总结 前言 本网站调用Django编写了图书管理网站&#…

深度学习设计模式之组合模式

文章目录 前言一、介绍二、详细分析1.核心组成2.实现步骤3.代码示例4.优缺点优点缺点 5.使用场景 总结 前言 组合模式是将对象组合成树形结构来表现"整体/部分"层次结构&#xff0c;可以更好的实现管理操作。 一、介绍 组合设计模式又叫部分整体模式&#xff0c;将…

微软开源多模态大模型Phi-3-vision,微调实战来了

节前&#xff0c;我们组织了一场算法岗技术&面试讨论会&#xff0c;邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对大模型& AIGC 技术趋势、大模型& AIGC 落地项目经验分享、新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了…

[XYCTF新生赛]-Reverse:你是真的大学生吗?解析(汇编异或逆向)

无壳 查看ida 没有办法反汇编&#xff0c;只能直接看汇编了。 这里提示有输入&#xff0c;输入到2F地址后&#xff0c;然后从后往前异或&#xff0c;其中先最后一个字符与第一个字符异或。这里其实也有字符串的长度&#xff0c;推测应该是cx自身异或之后传给了cx 完整exp&am…

多模态MLLM都是怎么实现的(9)-时序LLM是怎么个事儿?

时序预测这东西大家一般不陌生,随便举几个例子 1- 金融,比如预测股票(股市有风险,入市需谨慎),纯用K线做,我个人不太推荐 2- 天气,比如预测云图,天气预报啥的 3- 交通,早晚高峰,堵车啥的,车啥时候加油,啥时候充电之类的 4- 医疗,看你病史和喝酒的剂量建模,看你会…

el-transfer和el-tree进行结合搞一个树形穿梭框

由于业务需求需要在穿梭框里使用树形结构&#xff0c;但是本身element里并不支持&#xff0c;于是参考了别的大佬发的文章作为思路及后续自己新增了一些处理功能。 目录 1.拷贝代码放到自己的项目目录中 2.改造el-transfer的源码 3.修改tree-transfer-panel.vue文件 4.修改…

私域如何高效管理多微信并实现聚合聊天?

在私域经营中&#xff0c;管理多个微信号是一项具有挑战性的任务。为了提高工作效率&#xff0c;辅助工具成为必不可少的一部分。而个微管理系统将为大家带来高效的多微信号管理体验&#xff0c;让大家能够更好地聚合聊天。 首先&#xff0c;个微管理系统提供了一个统一的界面…

操作系统课程实验1-进程调度模拟实验

操作系统课程实验1-进程调度模拟实验 一、实验介绍 1.1 实验目的 本实验模拟在单处理机环境下的处理机调度&#xff0c;帮助理解进程调度的概念&#xff0c;深入了解进程控制块的功能&#xff0c;以及进程的创建、撤销和进程各个状态间的转换过程。 1.2 实验内容 进程调度算…

nuxt3+Element Plus项目搭建过程记录

背景 本文只记录项目搭建过程中遇到的一些问题和关键点&#xff0c;nuxt框架的说明和API请参照官网学习 官网&#xff1a;https://nuxt.com/docs/getting-started/introduction 1. 初始化项目 指令如下: npx nuxilatest init <project-name>我在安装过程中出现报错&a…

黑马头条day6总结

1、wemedian错误 一开始没加EnableFeignClients(basePackages "com.heima.apis")导致获取ischeduleClient错误&#xff0c;找不到bean。 我看教程的代码中没有&#xff0c;【ComponentScan({"com.heima.apis","com.heima.wemedia"})】&#x…

话术巧妙分隔沟通效果更佳看看这个小技巧

客服回复客户咨询&#xff0c;如果遇到比较复杂的问题&#xff0c;经常会有大段的文字回复&#xff0c;用聊天宝的分段符功能&#xff0c;在需要分段的地方点击右上角的“插入分隔符”&#xff0c;就可以在指定位置分段&#xff0c;实现多段发送的目的。 前言 客服回复客户咨询…

作业job——kettle开发30

一、作业 大多数ETL项目都需要完成各种各样的维护工作。 例如&#xff0c;如何传送文件;验证数据库表是否存在&#xff0c;等等。而这些操作都是按照一定顺序完成。因为转换以并行方式执行&#xff0c;就需要一个可以串行执行的作业来处理这些操作。 一个作业包含一个或多个作…

JavaScript写个.ts视频文件Url生成器,使用了string.padStart

0 缘起 想从网上下载一个电视连续剧到平板电脑&#xff0c;在有空时看。 用浏览器的开发者工具监测发现视频是由一序列.ts文件组成的。 ts文件&#xff0c;ts即"Transport Stream"的缩写&#xff0c;特点就是要求从视频流的任一片段开始都是可以独立解码的&#xf…

开发依赖与运行依赖

1. 概念 开发依赖&#xff1a;devDependencies 运行依赖&#xff1a;dependencies 2. 理解 &#xff08;1&#xff09;devDependencies 在线上状态不需要使用的依赖&#xff0c;就是开发依赖。为什么 npm 要把它单独分拆出来呢&#xff1f;最终目的是为了减少 node_modul…

go语言基准测试Benchmark 最佳实践-冒泡排序和快速排序算法基准测试时间复杂度对比

在go语言中Benchmark基准测试( 在后缀为_test.go的文件中&#xff0c;函数原型为 func BenchmarkXxx(b *testing.B) {}的函数 )可以用来帮助我们发现代码的性能和瓶颈&#xff0c; 其最佳实践 应该是我们最常用的 冒泡排序和快速排序的测试了&#xff0c;废话不说&#xff0c;直…

[图解]SysML和EA建模住宅安全系统-07 to be块定义图

1 00:00:01,970 --> 00:00:05,040 入侵者这里有个∞ 2 00:00:05,530 --> 00:00:07,000 说明它下面已经有子图了 3 00:00:07,010 --> 00:00:08,080 我们看看里面子图 4 00:00:10,200 --> 00:00:17,000 这里&#xff0c;我们看位置 5 00:00:19,030 --> 00:00:…

大模型实战-动手实现单agent

文章目录 入口cli_main.py工具tools.pyprompt prompt_cn.pyLLM 推理 model_provider.py致谢 agent 的核心思想&#xff1a;不断调用 LLM&#xff08;多轮对话&#xff09;&#xff0c;让 LLM 按照指定的格式&#xff08;例如 json&#xff09;进行回复&#xff0c;提取 LLM 回复…

floodfill 算法(上)

目录 图像渲染 题意&#xff1a; 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿数量 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 岛屿的最大面积 题解&#xff1a; 非递归&#xff1a; 递归&#xff1a; 被围绕的区域 题解&#xff1a…

瓦罗兰特账号怎么注册 瓦罗兰特延迟高用什么加速器

《瓦罗兰特》&#xff08;Valorant&#xff09;是由拳头游戏&#xff08;Riot Games&#xff09;开发并发行的一款免费的多人在线第一人称射击游戏&#xff08;FPS&#xff09;&#xff0c;它结合了传统的硬核射击机制与英雄角色的能力系统&#xff0c;为玩家提供了独特的竞技体…