【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)文本行高属性

设置行之间的距离

4.列表属性

5.边框属性

顺序没有要求

七、盒子模型

选择中间的容器,对内外上下左右有8个属性

八、元素分类

1.块级元素

2.行内元素

3.行内块级元素

4.元素类型转换

九、浮动

将二维的文档流变为三维,脱离文档流,让元素漂浮,将原来文档流的内容推开,从而实现图片可以和文字在一行

十、定位

1.静态定位

是文档流的默认位置

2.相对定位

3.绝对定位

4.固定定位

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

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

相关文章

2.4G芯片开发的遥控玩具方案介绍 东莞酷得

玩具从早期的简单功能,到现如今各种各样的智能操作,发展的速度也是飞速的。随着玩具市场的逐步完善与推进,中国的智能玩具市场也出现了很多远程遥控玩具。遥控玩具也是从最初的有线到现在的无线,从地上跑的到天上飞的,…

N6 word2vec文本分类

🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者:K同学啊# 前言 前言 上周学习了训练word2vec模型,这周进行相关实战 1. 导入所需库和设备配置 import torch import torch.nn as nn import torchvision …

3,区块链加密(react+区块链实战)

3,区块链加密(react区块链实战) 3.1 哈希3.2 pow-pos-dpos3.3非对称加密(1)对称加密AES(2)非对称加密RSA 3.4 拜占庭将军3.5 P2P网络3.6 区块链 3.1 哈希 密码学,区块链的技术名词 …

四川赤橙宏海商务信息咨询有限公司抖音电商服务靠谱吗?

在数字化浪潮席卷全球的今天,电商行业蓬勃发展,各种新兴电商平台层出不穷。其中,抖音电商以其独特的社交属性和庞大的用户基础,迅速崛起为行业新星。四川赤橙宏海商务信息咨询有限公司,作为专注于抖音电商服务的佼佼者…

[Linux]五种IO模型(图文讲解+故事讲解)

目录 一、对IO的理解:等拷贝 等 拷贝 二、五种IO模型(解释其概念) 1.阻塞IO 2.非阻塞IO 3.信号驱动IO 4.IO多路复用 5.异步IO IO速度比较 三、一个故事让你了解五种IO模型 四、同步VS异步 阻塞VS非阻塞 同步VS异步 阻塞VS非阻…

2023 年 GitHub 上最受欢迎的编程语言

JavaScript 仍然是使用最多的编程语言,在 Web 开发中占据重要地位。 被广泛用于 Web 应用程序开发,框架如 React 和 Angular 促进了单页应用程序的开发。 Node.js 的出现使其在后端编程中同样重要。 Python 由于其简单性和广泛的库,Pyth…

07-7.5.1 散列表的基本概念

👋 Hi, I’m Beast Cheng 👀 I’m interested in photography, hiking, landscape… 🌱 I’m currently learning python, javascript, kotlin… 📫 How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

【测试开发】--安全渗透测试

1. 安全渗透 1.1 分类 web数据库安全web应用服务器安全(文件上传漏洞、文件包含漏洞)web客户端安全(XSS跨站攻击) 2. sql注入 2.1 sql注入介绍 sql注入在安全问题中排行榜首sql注入攻击是输入参数未经过滤,然后直…

MySQL的约束键多表查询

约束 概念 概念:约束是作用于表中字段上的规则,用于限制存储在表中的数据。目的:保证数据中数据的正确、有效性和完整性。 外键约束 概念 ​ 外键用来让两张表的数据之间建立连接,从而保证数据的一致性和完整性。 注意&#x…

最优化(10):牛顿类、拟牛顿类算法

4.4 牛顿类算法——介绍了经典牛顿法及其收敛性,并介绍了修正牛顿法和非精确牛顿法; 4.5 拟牛顿类算法——引入割线方程,介绍拟牛顿算法以及拟牛顿矩阵更新方式,然后给出了拟牛顿法的全局收敛性,最后介绍了有限内存BFG…

202-509SF 同轴连接器

型号简介 202-509SF是Southwest Microwave的连接器。这款连接器机身和法兰由不锈钢合金 UNS-30300 制成,螺纹接头则采用 5C360 黄铜合金。接触点采用 BeCu 合金,并经过镀金处理,以提供优异的导电性和耐腐蚀性。绝缘体则由 PTFE 氟碳或 ULTEM …

Backend - C# 的日志Lognet4

目录 一、安装 log4net 插件 (一)作用 (二)操作 (三)注意 二、配置 (一)配置AssemblyInfo.cs (二)配置log4net.config 1. 创建log4net.config文件&#xff08…

3.动态规划.基础

3.动态规划.基础 基础理论背包基础理论01背包完全背包多重背包 题目1.斐波那契数2.爬楼梯3.使用最小花费爬楼梯4.不同路径5.不同路径2 基础理论 动态规划,英文:Dynamic Programming,简称DP,如果某一问题有很多重叠子问题&#xf…

【Linux】常见指令收官权限理解

tar指令 上一篇博客已经介绍了zip/unzip指令,接下来我们来看一下另一个关于压缩和解压的指令:tar指令tar指令:打包/解包,不打开它,直接看内容 关于tar的指令有太多了: tar [-cxtzjvf] 文件与目录 ...…

VSCode升级后不能打开在MacOS系统上

VSCode 在MacOS无法打开 版本 VSCode version: 1.91.0 (x64) 错误信息: MacBook-Pro ~ % /Users/mac/Downloads/FirefoxDownloads/Visual\ Studio\ Code.app/Contents/MacOS/Electron ; exit; [0710/142747.971951:ERROR:crash_report_database_mac.mm(753)] op…

RFID技术革新养猪业,构建智能化养殖场

RFID技术作为无线射频识别技术的一种,凭借着非接触、高效识别的特性,在养殖业行业中得到了广泛的应用,为构建智能化、高效化的养殖场提供了强大的技术支持,给传统养殖业带来了一场前所未有的技术变革。以下是RFID技术在养猪行业不…

Qt 网络编程 网络信息获取操作

学习目标:网络信息获取操作 前置环境 运行环境:qt creator 4.12 学习内容 一、Qt 网络编程基础 Qt 直接提供了网络编程模块,包括基于 TCP/IP 的客户端和服务器相关类,如 QTcpSocket/QTcpServer 和 QUdpSocket,以及实现 HTTP、FTP 等协议的高级类,如 QNetworkRe…

mysql判断时间段是否重合

mysql判断时间段是否重合 SELECT CASE WHEN t1.start_time < t2.end_time AND t1.end_time > t2.start_time THEN ‘重合’ ELSE ‘不重合’ END AS result FROM table_name t1, table_name t2 WHERE t1.id <> t2.id;

dolphinScheduler + hive + datax报错记录

1、参数错误 报错信息 [INFO] 2024-04-11 06:43:18.386 - [taskAppIdTASK-29-3301-84461]:[498] - after replace sql , preparing : insertoverwrite table mis_month partition (dt) select nvl(sl.slid , ) as id,--水量 IDnvl(sl.hh …

张量笔记(4):张量网络

张量分解通常是将高维张量分解成一系列较低维的张量&#xff0c;表示能力相对较低。而张量网络可以表示复杂的高维数据结构&#xff0c;通过连接多个张量形成网络结构&#xff0c;可以更灵活地表示和处理复杂的数据关系。本节主要介绍HT和TT网络。 2.5.1 HT分解——首先我们引入…