【web前端HTML+CSS+JS】--- CSS学习笔记02

一、CSS(层叠样式表)介绍

1.优势

2.定义解释

如果有多个选择器共同作用的话,只有优先级最高那层样式决定最终的效果

二、无语义化标签

div和span:只起到描述的作用,不带任何样式

三、标签选择器

1.标签/元素选择器

为标签添加样式

2.类选择器

只想选择部分标签进行控制,需要任意对标签进行分类,并分别加上class属性

3.ID选择器

作用于单个标签上

4.全局选择器

选择全部标签

5.属性选择器

6.子字符串匹配选择器

7.忽略大小写匹配选择器

8.伪类选择器

根据状态(普通/行为)分类,不是手动分类

(1)普通伪类选择器

比如永远动态的对第一个段落控制样式

(2)行为伪类选择器

比如被点击的链接,不同的行为可以设置不同的样式

9.关系选择器

(1)交集选择器

格式:标签.类值 (必须标签在前,否则会把标签名当作类名的一部分,产生歧义)

(2)并集选择器

格式:标签和类用逗号隔开,前后顺序无所谓

(3)后代选择器

格式:父标签 空格 子标签

选择所有的子元素,包含直接和间接

(4)子代选择器

格式:父标签 >子标签

只控制一级子元素

(5)兄弟选择器

格式:某个标签+相邻的标签

只会对相邻的标签进行控制,样式对本身不起作用

格式:某个标签~相邻的标签

对同一级别的兄弟标签都会起作用,下面例子中段落123都会有样式,即使3不挨着2

四、样式添加类型

1.行内样式

标签和样式耦合在一起

2.内部样式

将样式抽取出来,但只能针对当面页面控制

在head中添加style,在style中的注释是/* */

3.外部样式

新建一个css文件,将样式写在里面

在html文件中引入css文件

五、选择器的优先级

1.非关系选择器优先级

2.关系选择器优先级

赋分比大小,分数一致遵循就近原则

显示蓝色

六、常见属性

w3school 在线教程 点击参考书有属性汇总

1.背景颜色

2.字体属性

(1)字体族属性

当不支持第一种字体时,依次用后面的

(2)字体大小属性

默认大小是16px

(3)字体风格属性

设置斜体 

(4)字体粗细属性

有的字体不支持所有的选项

(5)字体复合属性

通过font可以同时设置多个属性,不过必须按照一定的顺序来

3.文本属性

(1)文本颜色属性

(2)文本间距属性

英文字母以及汉字之间的间距:

英文单词之间的间距:

(3)文本划线属性

分别为下划线和中划线

(4)文本缩进属性

缩进两个字符,设置的值和字符的大小相关

(5)文本对齐选项

默认靠左对齐

(6)文本行高属性

设置行之间的距离

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

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

相关文章

【算法笔记自学】第 8 章 提高篇(2)——搜索专题

8.1深度优先搜索&#xff08;DFS&#xff09; #include <cstdio>const int MAXN 5; int n, m, maze[MAXN][MAXN]; bool visited[MAXN][MAXN] {false}; int counter 0;const int MAXD 4; int dx[MAXD] {0, 0, 1, -1}; int dy[MAXD] {1, -1, 0, 0};bool isValid(int …

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【21】【购物车】

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【21】【购物车】 购物车需求描述购物车数据结构数据Model抽取实现流程&#xff08;参照京东&#xff09;代码实现参考 购物车需求描述 用户可以在登录状态下将商品添加到购物车【用户购物…

CSS技巧:纯CSS实现文字渐变动画效果

文字渐变动画&#xff0c;可以实现的有两种&#xff1a;一种是一行文字整体变化颜色&#xff1b;另一种一行文字依次变化颜色。接下来&#xff0c;我就介绍一下这两种文字渐变的实现过程。 布局代码&#xff1a; <div class"con"><div class"animate…

7.pwn 工具安装和使用

关闭保护的方法 pie: -no-pie Canary:-fno-stack-protector aslr:查看:cat /proc/sys/kernel/randomize_va_space 2表示打开 关闭:echo 0>/proc/sys/kernel/randomize_va_space NX:-z execstack gdb使用以及插件安装 是GNU软件系统中的标准调试工具&#xff0c;此外GD…

软件设计模式总结

设计模式是软件设计中常见问题的通用解决方案。以下是一些常见的设计模式&#xff0c;分为三大类&#xff1a;创建型模式、结构型模式和行为型模式。 创建型模式&#xff08;Creational Patterns&#xff09; 这些模式提供了对象创建的机制&#xff0c;增加了已有代码的灵活性…

electron 初始使用

electron electron文档地址deno下载地址安装命令 yarn config set electron_mirror https://cdn.npm.taobao.org/dist/electron/ npm install下载文件 文件下载完成后&#xff0c;新建dist目录&#xff0c;解压到list目录下&#xff1b;path文件中写入electron.exe 运行命令 …

排序格式排序格式

排序格式排序格式

P5. 微服务: Bot代码的执行

P5. 微服务: Bot代码的执行 0 概述1 Bot代码执行框架2 Bot代码传递给BotRunningSystem3 微服务: Bot代码执行的实现逻辑3.1 整体微服务逻辑概述3.2 生产者消费者模型实现3.3 consume() 执行代码函数的实现3.4 执行结果返回给 nextStep 4 扩展4.1 Bot代码的语言 0 概述 本章介绍…

什么是CNN,它和传统机器学习有什么区别

CNN&#xff0c;全称为卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;&#xff0c;是一种专门用于处理具有网格结构数据&#xff08;如图像、视频&#xff09;的深度学习模型。它由多个卷积层、池化层、全连接层等组成&#xff0c;通过卷积运算和池化操作…

Vulnhub靶场DC-5练习

目录 0x00 准备0x01 主机信息收集0x02 站点信息收集0x03 漏洞查找与利用1. 利用burpsuite爆破文件包含的参数2. 文件包含3. nginx日志挂马4. 反弹shell5.漏洞利用和提权 0x04 总结 0x00 准备 下载链接&#xff1a;https://download.vulnhub.com/dc/DC-5.zip 介绍&#xff1a; …

kafka-3

Kafka 消费组 consumer-offsets-N 稀疏索引 Kafka集群 集群搭建 集群启动和验证 Topic的意义 Topic和Partition 分区 副本 集群操作指令 多分区&多副本 多分区消费组 Rebalance机制 Rebalance机制处理流程 Rebalance机制-Range Rebalance机制-RoudRobin Rebalance机制-St…

计数排序的实现

原理 对一个数组进行遍历&#xff0c;再创建一个count数组 每找到一个值则在count数组中对应的位置加一&#xff0c;再在count数组中找到数字上方的count值&#xff0c;count值为几&#xff0c;则打印几次数组中的值. 开空间 相对映射 排序的实现 void CountSort(int* a, i…

PageHelper分页查询遇到的小问题

如果我们是这样子直接查询 pagehelper会拼接导我们的sql语句之后 这样子我们搜索出来的list&#xff0c;就是里面参杂了PageHelper的东西 所以我们可以直接转成我们的Page类型 但是如果我们搜索出来的是List<Blog>&#xff0c;我有些信息不想返回给前端&#xff0c;所以…

mac M1安装 VSCode

最近在学黑马程序员Java最新AI若依框架项目开发&#xff0c;里面前端用的是Visual Studio Code 所以我也就下载安装了一下&#xff0c;系统是M1芯片的&#xff0c;安装过程还是有点坑的写下来大家注意一下 1.在appstore中下载 2.在系统终端中输入 clang 显示如下图 那么在终端输…

C++语言相关的常见面试题目(一)

1. const关键字的作用 答&#xff1a; 省流&#xff1a;&#xff08;1&#xff09;定义变量&#xff0c;主要为了防止修改 (2) 修饰函数参数&#xff1a;防止在函数内被改变 &#xff08;3&#xff09;修饰函数的返回值 &#xff08;4&#xff09;修饰类中的成员函数 2. Sta…

Rust入门实战 编写Minecraft启动器#1启动方法

首发于Enaium的个人博客 引言 想必大家都知道Minecraft这个游戏&#xff0c;它是一个非常有趣的游戏&#xff0c;有没有想过它是如何启动的呢&#xff1f;在本系列中&#xff0c;我们将使用Rust编写一个简单的Minecraft启动器。 本系列文章涉及的Rust知识并不多&#xff0c;了…

并发编程-05AQS原理

并发编程-深入理解AQS之ReentrantLock 一 认识AQS 在讲解AQS原理以及相关同步器之前&#xff0c;我们需要对AQS有一些基本的认识&#xff0c;了解下它有什么样的机制&#xff0c;这样追踪源码的时候就不会太过于迷茫&#xff01; 1.1 什么是AQS java.util.concurrent包中的大…

【DevOps】运维过程中经常遇到的Http错误码问题分析(二)

目录 一、HTTP 错误400 Bad Request 1、理解 400 Bad Request 错误 2、排查 400 Bad Request 错误 3、常见的解决方法 二、HTTP 错误401 Unauthorized 1、理解 401 Unauthorized 错误 2、排查 401 Unauthorized 错误 3、常见的解决方法 一、HTTP 错误400 Bad Request …

文件上传漏洞: 绕过方式及原理[表格]

序号绕过原理原理简述详细技术解释绕过方法1前端校验绕过禁用或绕过前端JavaScript验证前端JavaScript用于限制用户上传文件类型&#xff0c;但可被用户禁用或修改使用浏览器插件或开发者工具禁用JavaScript&#xff0c;或修改上传逻辑2MIME类型欺骗更改文件MIME类型以欺骗服务…

海康威视摄像头批量更改源码

更改OSD通道名称 # codingutf-8 import os import time import requests from requests.auth import HTTPBasicAuth, HTTPDigestAuth import xml.etree.ElementTree as ET#和监控摄像头通讯需要一个双方认可的密钥&#xff0c;可以随机生成 def generate_key():# 生成一个16字…