推广赚钱是真的吗/武汉seo结算
视频链接:https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from=333.999.0.0&vd_source=1ad00d913eae8281cbadad6ae66fb06c
文章目录
- 一、CSS语法
- 1.结构
- 2.样式类型
- 1)内联样式 Inline Style
- 2)内部样式 Internal Style
- 3)外部样式 External Style
- 二、选择器(Selector)
- 1.类型
- 1)类型选择器
- 2)类选择器
- 3)id选择器
- 4)属性选择器
- 5)通用选择器
- 2.使用
- 1)组合使用
- 2)优先级(Priority)
- 三、盒子模型(Box Model)
- 1.边框 border
- 2.内边距padding
- 3.外边距margin
一、CSS语法
1.结构
2.样式类型
1)内联样式 Inline Style
特点:直接写到html元素上,没有选择器,直接就是声明,仅对当前的html元素有效
<p style="color:red">我是一段文字</p>
2)内部样式 Internal Style
特点:写在html文档的head标签中,使用style标签,包含一个或多个css规则
<head><meta charset="UTF-8"><style>.box{width:600px;height:1200px;}</style>
</head>
3)外部样式 External Style
特点:先在外部存储独立的css文件,通过把Link标签放在head标签内,指定其href属性,来指定外部css属性,使用最多
<!--主体代码-->
<html><head><meta charset="UTF-8"><title>我是标题</title><link rel="stylesheet" href="mystyle.css"></head><body>......</body>
</html>
/*css文件mystyle.css*/
h1{width:600px;height:1200px;margin:auto;
}
二、选择器(Selector)
描述:用于在css语句或文档中,选择html元素。
1.类型
1)类型选择器
特点:直接写元素标签的名称,例如上面的h1,可用于选择页面上所有的该类型标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2></body>
</html>
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
2)类选择器
特点:点.+类名,类名可自定义,同时html对应元素中,有同名的class属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p></body>
</html>
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
3)id选择器
特点:#加id名称,同时html对应元素中,有同名的id属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p></body>
</html>
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/}
#my_pid{color: orange;/*类选择器*/
}
4)属性选择器
特点1:不常用,标签[属性],选择所有该类型标签并包含该属性的所有元素
<!DOCTYPE html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1>我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
特点2:属性也可指定值,更精确选择
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
5)通用选择器
特点:星号*,代表所有元素
/*css文件 mystyle-选择器测试.css*/
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
2.使用
1)组合使用
组合1:以上选择器直接连写,需要满足所有同条件后生效;
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a></body>
</html>
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器,字体斜体*/
}
组合2:以上选择器用逗号连接,则对列出的选择器都生效
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器,字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器,字体大写变成20px*/
}
组合3:父子组合,需要一个父标签用空格连接一个子标签
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1>我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div> </body>
</html>
h1{color: red;
}
h2{color: blue;
}
.my_p{color: green;/*类选择器*/
}
#my_pid{color: orange;/*类选择器*/
}
a[title]{color: fuchsia;/*属性选择器*/
}
a[title=""]{color: saddlebrown;/*属性选择器-指定属性内容*/
}
*{font-family: KaiTi;/*通用选择器,更改字体为楷体*/
}
h1.my_p{font-style: oblique;/*组合选择器,字体斜体*/
}
h1,h2{font-size: 20px;/*组合选择器,字体大写变成20px*/
}
div h1{text-decoration: underline;/*组合选择器,字体加下划线*/
}
2)优先级(Priority)
a.相同的规则按照加载顺序,写在后面的优先级更高
h1{color: red;/*字体红色*/
}
h1{color: green;/*字体绿色*/
}
这里先定义了红色,后定义了绿色,以绿色为准
b.继承下来的样式优先级永远低于直接指定的样式
案例1:
body{color: skyblue;/*字体天空蓝色*/
}
h1{color: green;/*字体绿色*/
}
h1本来应该继承body的天空蓝,但它自己定义了绿色,自己指定的优先级高于继承,所以最终显示绿色
案例2:
h1{color: green;/*字体绿色*/
}
div h1{color: blue;/*字体蓝色*/
}
后面的标签对同一属性有自己的直接指定的时候就不再继承前面统一定义过的属性
c. 内联样式优先级最高,!important是个例外
内部样式和外部样式的优先级没有太大区别,主要是语句顺序导致的加载顺序,但内联样式的优先级最高
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>
在之前的基础上,单独给h2添加了内联样式,最后呈现的是内联样式指定的颜色
加了important,可以打破内联样式的优先级,颜色又被扳到外部样式的绿色
body{color: skyblue;/*字体蓝色*/
}
h1{color: green!important;/*字体绿色,并且!important*/
}
d. 类型选择器<类选择器<ID选择器
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>外部样式</title><link rel="stylesheet" href="mystyle-选择器测试优先级.css"></head><body><h1 class="my_p">我的第一个h1标签</h1><h1 style="color:red;">我的第二个h1标签</h1><h1>我的第三个h1标签</h1><h2>我的第一个h2标签</h2><h2>我的第二个h2标签</h2><h2>我的第三个h2标签</h2><p class="my_p">我是一个段落</p><p id="my_pid" class="my_p">我也是一个段落</p><a title="baidu" href="http://www.baidu.com">百度</a><a title="" href="http://www.baidu.com">百度</a><a href="http://www.baidu.com">百度</a><div><h1>我是div里的h1标签 </h1></div></body>
</html>
.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}
类选择器高于类型选择器,与加载顺序无关
#my_pid{color: coral;/*字体珊瑚红色*/
}
.my_p{color:peru;/*字体褐色*/
}
p{color: green;/*字体绿色*/
}
id选择器的加载顺序最高
三、盒子模型(Box Model)
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>盒子模型</title><link rel="stylesheet" href="myboxstyle.css"></head><body><div class="box">div内容</div></body>
</html>
.box{width: 100px;height: 100px;background-color: red;
}
1.边框 border
.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/
}
出现了3px的实线蓝色边框
2.内边距padding
.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/
}
文字和边框产生了距离,同时外框也变大
.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法:上右下左*/
}
也可单独指定上下左右的内边距
右击-审查元素
3.外边距margin
.box{width: 100px;height: 100px;background-color: red;border: 3px solid blue;/*3px 实线 蓝色*/padding: 20px;/*内边距20px*/padding-left: 5px;padding-top: 10px;padding-right: 15px;padding-bottom: 25px;padding: 10px 15px 25px 5px;/*简洁写法:上右下左*/margin: 25px;margin-top: 20px;margin-bottom: 30px;margin-left: 15px;margin-right: 10px;margin: 20px 10px 30px 15px;/*简洁写法:上右下左*/}
}
外框和页面产生了距离
相关文章:

【CSS】快速入门笔记
视频链接:https://www.bilibili.com/video/BV1mS4y1Z7Ga/?spm_id_from333.999.0.0&vd_source1ad00d913eae8281cbadad6ae66fb06c 文章目录一、CSS语法1.结构2.样式类型1)内联样式 Inline Style2)内部样式 Internal Style3)外部…...

第161篇 笔记-去中心化的含义
本文主要内容来自Vitalik Buterin的文章。“去中心化”这个词是在加密经济学领域用得最多的一个词,通常也作为辨别区块链的依据。然而,这个词也可能是被定义得最不恰当的一个词。数千小时的研究和价值数十亿美元哈希算力的投入都旨在实现去中心化&#x…...

「计算机组成原理」数据的表示和运算(二)
文章目录五、奇偶校验码六、算术逻辑单元ALU6.1 电路的基本原理6.2 加法器的设计6.2.1 一位全加器6.2.2 串行加法器6.2.3 串行进位的并行加法器6.2.4 并行进位的并行加法器七、补码加减运算器八、标志位的生成九、定点数的移位运算9.1 算数移位9.2 逻辑移位9.3 循环移位五、奇偶…...

建立自己的博客
环境安装: w10系统安装 第一步:安装git Git 官网: https://git-scm.com/ 第二步:安装Node.js Node.js官网:https://nodejs.org/zh-cn/ 使用cmd检测: node -v 第三步:安装Hexo Hexo官网:htt…...

Docker 安装mysql Mac 环境下
已安装桌面端 Docker (Mac安装Docker) 安装方式一 打开链接 https://www.docker.com/products/docker-desktop 选择平台下载 安装方式二 安装homebrew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/m…...

《C++代码分析》第三回:类成员函数覆盖父类函数的调用(分析this指针的变化)
一、前言 在C的学习中我们知道,子类是可以覆盖父类的方法,这里我们探讨一下子类方法调用父类方法时this指针时如何变化的。 二、示例代码 #include "windows.h" #include "windef.h" #include <iostream> #include <tch…...

Altium designer--软件简介及安装教程(Altium designer16)
一、软件介绍(完整安装包资源见文末链接,含破解license) Altium Designer 是一款简单易用、原生3D设计增强的一体化设计环境,结合了原理图、ECAD库、规则和限制条件、BoM、供应链管理、ECO流程和世界一流的PCB设计工具。通过原理…...

Windows系统下基于开源软件的多物理场仿真
Windows系统下基于开源软件的多物理场仿真实践技术应用随着计算机技术的发展,计算机仿真技术日益成为继实验和理论之后的第三种重要研究和设计手段。真实世界中遇到的问题往往是固体力学,流体力学,热,电磁等多种现象耦合而成&…...

【STL】list剖析及模拟实现
✍作者:阿润菜菜 📖专栏:C 初识list 1. list基本概况 list是可以在常数范围内在任意位置进行插入和删除的序列式容器,并且该容器可以前后双向迭代。list的底层是双向链表结构,双向链表中每个元素存储在互不相关的独立…...

Go打包附件内容到执行文件
前言 如果我们的应用在启动的时候需要对数据库进行初始化(比如建表等), 可以通过读取.sql文件内容直接执行. 但是, 这样会带出一个问题: 在发送可执行文件的时候, 需要连带着附件文件, 并且相对路径还不能出错. 这样太麻烦了有时我们并不希望附件的内容被使用者看到 处于种种…...

Spring的配置属性
介绍 以前都是用XML来设置属性值,SpringBoot的自动配置可以简化Spring应用的开发。配置属性只是配置Spring应用上下文中bean的属性而已,可以通过多个源来配置,包括JVM系统属性、环境变量等。 Spring中有两种不同(但相关)的配置 bean装配&…...

132.《render-props, Hoc,自定义hooks 详解》
文章目录render-props 模式props 方式children 方式(推荐)Hoc(高阶组件)使用步骤示例props 丢失解决方案自定义 hook1.只执行一次2.防抖hook高阶组件与自定义hook有什么区别相同点不同点React 中代码逻辑复用有三种方式,render-props, Hoc&am…...

通过Session共享数据验证码进行用户登录
通过Session共享数据验证码进行用户登录 需求: 访问带有验证码的登录页面login.jsp。用户输入用户名,密码以及验证码。 ①。如果用户名和密码输入有误,跳转登陆页面,提示:用户名或密码错误。 ②。如果验证码输入有误…...

C++STL详解(六)——stack和queue
文章目录空间适配器stackstack的定义方式stack的使用stack的模拟实现queuequeue的定义方式queue的使用queue的模拟实现空间适配器 适配器是一种设计模式(设计模式是一套被反复使用的,多数人知晓的,经过分类编目的,代码设计经验的…...

javaEE 初阶 — CSS 的 基本语法 与 引入方式
文章目录1. 基本语法规范2. 三种引入方式1. 基本语法规范 CSS 的基本语法规范是由 选择器 和 若干个声明 组成的。 选择器选中一个元素之后,这些属性都是针对于这个元素展开的。 先来看一个没有 CSS 的效果。 <body><p>这是一个段落</p> </bo…...

QEMU启动ARM32 Linux内核
目录前言前置知识ARM Versatile Express开发板简介ARM处理器家族简介安装qemu-system-arm安装交叉编译工具交叉编译ARM32 Linux内核交叉编译ARM32 Busybox使用busybox制作initramfs使用QEMU启动ARM32 Linux内核模拟vexpress-a9开发板模拟vexpress-a15开发板参考前言 本文介绍采…...

than的用法合集
首先需要了解一下than的词性,其有两个词性,一个是介词,一个是连词。 介词后面一定要接上名词性的词语,比如 i am taller then him 我比我的老师高 连词就比较自由,一般用来连接两个句子;但是使用than连词词…...

Unet 基于TCGA颅脑肿瘤MRI分割(高阶API分割模型)
目录 1. 介绍 2. dice 指标 3. resnet34 作为 backbone 的分割 4. deeplabv3 图像分割 4.1 问题 4.2 训练 4.3 预测 5. MAnet 图像分割...

[NIPS 2017] Improved Training of Wasserstein GANs (WGAN-GP)
Contents IntroductionDifficulties with weight constraintsCapacity underuseExploding and vanishing gradientsGradient penaltyReferencesIntroduction WGAN 增加了 GAN 模型训练的稳定性,但有时仍然会有生成质量不高或难以收敛的问题。作者发现上述问题经常是由 WGAN 中…...

力扣-每天的领导和合伙人
大家好,我是空空star,本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目:1693. 每天的领导和合伙人二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.…...

考虑分配与合并,用GO实现GCMarkSweep
完整源码 ≧ω≦ 希望各位爸爸们,给我点赞吧 kokool/GCByGo: 《垃圾回收的算法与实现》有感而发 (github.com) 书接上文 我们之前不考虑分配与合并情况下,用GO实现GCMarkSweep(标记清除算法),而这次我们继续回顾书本…...

浙江大学海宁IMBA提面经验分享
先来介绍一下我的个人情况:本人毕业于浙江一所普通的本科院校,毕业已经6年了,在一家互联网公司担任市场部经理。其实在参加浙大IMBA项目提面之前,我也参加了浙大MBA项目的提面,可惜只拿到了良好的结果,所以…...

Mybatis源码分析系列之第四篇:Mybatis中代理设计模型源码详解
一: 前言 我们尝试在前几篇文章的内容中串联起来,防止各位不知所云。 1:背景 我们基于Mybatis作为后台Orm框架进行编码的时候,有两种方式。 //编码方式1 UserDao userDao sqlSession.getMapper(UserDao.class); userDao.quer…...

JDBC的API详解
🍎道阻且长,行则将至。🍓 目录 一、DriverManager 驱动管理类 1.注册驱动 2.获取数据库连接 二、Connection 数据库连接对象 1.获取执行对象 2.事务管理 三、Statement 1.执行DDL、DML语句 2.执行DQL语句 四、ResultSet 以JDBC快速…...

【深度强化学习】(4) Actor-Critic 模型解析,附Pytorch完整代码
大家好,今天和各位分享一下深度强化学习中的 Actor-Critic 演员评论家算法,Actor-Critic 算法是一种综合了策略迭代和价值迭代的集成算法。我将使用该模型结合 OpenAI 中的 Gym 环境完成一个小游戏,完整代码可以从我的 GitHub 中获得…...

SQL注入——文件上传
目录 一,mysql文件上传要点 二,文件上传指令 一句话木马 三,实例 1,判断注入方式 2,测试目标网站的闭合方式: 3,写入一句话木马 4,拿到控制权 一,mysql文件上传…...

【ESP32+freeRTOS学习笔记之“ESP32环境下使用freeRTOS的特性分析(新的开篇)”】
目录【ESP32freeRTOS学习笔记】系列新的开篇ESP-IDF对FreeRTOS的适配ESP-IDF环境中使用FreeRTOS的差异性简介关于FreeRTOS的配置关于ESP-IDF FreeRTOS Applications结语【ESP32freeRTOS学习笔记】系列新的开篇 ESP-IDF对FreeRTOS的适配 FreeRTOS是一个可以适用于多个不同MCU开…...

Uipath Excel 自动化系列18-RefreshPivotTable(刷新透视表)
活动描述 RefreshPivotTable(刷新透视表):如果透视表的数据源发生变化,需使用刷新透视表活动,该活动需与Use Excel File 活动选择的 Excel 文件一起使用。 使用如下图: RefreshPivotTable(刷新透视表)属性 属性 作用 Display…...

设计模式之不变模式
在并行软件开发过程中,同步操作是必不可少的。当多线程对同一个对象进行读写操作时,为了保证对象数据的一致性和正确性,有必要对对象进行同步操作,但同步操作对系统性能有损耗。不变模式可以去除这些同步操作,提高并行…...

C++11 map
C11中Map的使用Map是c的一个标准容器,她提供了很好一对一的关系,在一些程序中建立一个map可以起到事半功倍的效果,总结了一些map基本简单实用的操作!1. map最基本的构造函数;map<string , int >mapstring; map&l…...