前端学习、CSS

CSS可以嵌入到HTML中使用。

每个CSS语法包含两部分,选择器和应用的属性。

div用来声明针对页面上的哪些元素生效。

具体设置的属性以键值对形式表示,属性都在{}里,属性之间用;分割,键和值之间用:分割。

因为CSS的特殊命名风格,CSS不能进行算术运算。

注释:/* */

CSS的引入方式

1.内部样式

2.内联样式

使用style属性(每个标签都可以有style属性,里面就可以直接写CSS,不必写选择器,只是针对当前元素生效)

当给一个元素分多种方式设置样式时,如果是不同的属性,则会叠加,CSS就叫层叠样式表

如果是相同的样式,通过style属性的设置,优先级高于style标签。CSS的样式优先级,有一套复杂的规则。

3.外部样式

把CSS写到一个单独的.css文件中,通过link标签引入到html文件里

外部样式和内联样式冲突了,内联样式优先级高。

外部样式和内部样式冲突了,看谁离元素更近。

实际开发中,最主要的写法是外部样式,外部样式可以让页面结构和样式分离开。

同时也就可以复用样式到其他页面中了。内联样式往往是修修补补,比较直接,具有针对性。

样式格式

紧凑风格

p{color:red; font-size; 30px;}

展开风格

p{

color:red;

font-size:30px;

}

CSS选择器

描述了我们要选中页面中的哪个元素

{}的样式就是针对这些元素生效的。

CSS选择器有多种写法:

1.标签选择器

写个标签名字,标签名就表示针对当前页面中所有的指定标签,都会被选中。

2.类选择器

可以让样式差异化效果

类选择器允许让多个元素,引用同一个类。

类选择器是CSS选择器中,最灵活的一种方式,也是最常用的方式

3.id选择器

每个元素都有一个id属性,需要id值在页面中是唯一的。使用id选择器来选中到对应的元素上。

#开头表示是id选择器,后面的the-id对应到页面上的id位'the-id'的元素

4.通配符选择器

*{}

选中页面中的所有元素,可以让页面所有元素都被选中,通常用于干掉浏览器的默认样式。例如:文本默认的颜色,字体大小,默认段落间距等,这种没有指定样式,也会默认带的,这是浏览器赋予的默认样式,在不同浏览器上可能不一样。

上述这四个成为基础选择器,还有一类,符合选择器,简单来说就是把多个基础选择器给组合起来了。

复合选择器

1.后代选择器

即在指定的元素里面去筛选后代元素。

具体的写法:元素1 元素2 {样式声明}

元素1和元素2可以是标签选择器,也可以是类选择器,还可以是id选择器

效果一样

2.子选择器

和后代选择器类似,但是只能选择子标签,无法选择孙子及其以后得标签

3.并集选择器

针对多个不同的选择器,应用相同的样式属性。

4.伪类选择器

是选中元素的不同状态。主要先学两个:

:hover鼠标放上去

:active鼠标按下去

常用元素属性

字体类型、字体大小、字体粗细(100-900的整数)、文字倾斜。

rgb:计算机表示颜色的基本方式

三原色,可以构成各种颜色。计算机中典型的标识方式,就是使用一个字节,表示R,一个字节表示G,一个字节表示B。每种颜色的取值范围在0-255。合在一起,颜色的取值种类就很多了。

前端里就是这样表示颜色的。

rgba比rgb多一个参数,表示透明度(取值为0-1),透明度是1时,表示不透明。

十六进制也能表示颜色,全0表示黑色,#ff0000表示红色。这六位里,只有前两位为f表示红色,只有中间两位为f表示绿色,只有最后两位为f表示蓝色。

十六禁止的表示方式可以缩写,例如#AABBCC就可以缩写成#ABC。#AABCDD不能缩写

text-align:left、center、right。左对齐、居中对齐、右对齐。

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

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

相关文章

MySQL 常用优化方式

MySQL 常用优化方式 sql 书写顺序与执行顺序SQL设计优化使用索引避免索引失效分析慢查询合理使用子查询和临时表列相关使用 日常SQL优化场景limit语句隐式类型转换嵌套子查询混合排序查询重写 sql 书写顺序与执行顺序 (7) SELECT (8) DISTINCT <select_list> (1) FROM &…

ctf_show笔记篇(web入门---php特性)

目录 php特性 89&#xff1a;直接数组绕过preg_match当遇到数组时会直接报错输出0 90&#xff1a;这里利用了intval的特性 91&#xff1a;这里需要细节一点 92-93&#xff1a;这两题的方法很多可以发散思维 94&#xff1a;还是利用小数绕过例如4476.0 95&#xff1a;这里…

HTML和CSS (前端共三篇)【详解】

目录 一、前端开发介绍 二、HTML入门 三、HTML基础标签 四、CSS样式修饰 五、HTML表格标签 六、HTML表单标签 一、前端开发介绍 web应用有BS和CS架构两种&#xff0c;其中我们主要涉及的是BS架构。而BS架构里&#xff0c;B&#xff08;Browser浏览器&#xff09;是客户端的…

【k8s管理--两种方式安装prometheus】

1、k8s的监控方案 1.1 Heapster Heapster是容器集群监控和性能分忻工具&#xff0c;天然的支持Kubernetes和CoreOS。 Kubernetes有个出名的监控agent–cAdvisor。在每个kubernetes Node上都会运行cAdvisor&#xff0c;它会收集本机以及容器的监控数(cpu,memory,filesystem,ne…

Ubuntu将c++编译成.so文件并测试

一、准备cpp和h文件 创建test.cpp 在cpp中定义相加的函数funcAdd&#xff0c;给出函数的细节代码 #include <iostream> using namespace std;int funcAdd(int x, int y) {return xy; }创建test.h 在h中声明定义的函数&#xff0c;不需要任何细节 #ifndef __TEST__ #…

LeetCode 热题 HOT 100(P1~P10)

&#x1f525; LeetCode 热题 HOT 100 这里记录下刷题过程中的心得&#xff0c;其实算法题基本就是个套路问题&#xff0c;很多时候你不知道套路或者模板&#xff0c;第一次尝试去做的时候就会非常懵逼、沮丧和无助。而且就算你一时理解并掌握了&#xff0c;过一段时间往往会绝…

腾讯云服务器CVM_云主机_云计算服务器_弹性云服务器

腾讯云服务器CVM提供安全可靠的弹性计算服务&#xff0c;腾讯云明星级云服务器&#xff0c;弹性计算实时扩展或缩减计算资源&#xff0c;支持包年包月、按量计费和竞价实例计费模式&#xff0c;CVM提供多种CPU、内存、硬盘和带宽可以灵活调整的实例规格&#xff0c;提供9个9的数…

【算法】顺时针打印矩阵(图文详解,代码详细注释

目录 题目 代码如下: 题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字。例如:如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则打印出数字:1 2 3 4 8 12 16 15 14 13 9 5 6 7 11 10 这一道题乍一看,没有包含任何复杂的数据结构和…

Doris实战——美联物业数仓

目录 一、背景 1.1 企业背景 1.2 面临的问题 二、早期架构 三、新数仓架构 3.1 技术选型 3.2 运行架构 3.2.1 数据模型 纵向分域 横向分层 数据同步策略 3.2.2 数据同步策略 增量策略 全量策略 四、应用实践 4.1 业务模型 4.2 具体应用 五、实践经验 5.1 数据…

下载github项目到pycharm

一、下载git 1.下载git链接 https://git-scm.com/ 2.一路点击next&#xff0c;最后finish 二、使用git 1.安装成功后在开始菜单栏会找到如下内容&#xff0c;其中常用的是Git Bash 2.点击Git Bash 3.这里就可以克隆github上的代码了 点击复制&#xff0c;在命令行输入…

2024免费mac苹果电脑的清理和维护软件CleanMyMac X

对于 Mac 用户来说&#xff0c;电脑的清理和维护是一件让人头疼的事情。但是&#xff0c;有了 CleanMyMac X&#xff0c;这一切都将变得轻松愉快。CleanMyMac X 是一款专为 Mac 设计的电脑清理软件&#xff0c;它以其强大的功能和简单的操作&#xff0c;让无数用户为之倾倒。 C…

艾尔登法环备份存档方法

1.PC端使用WinR输入%AppData%\EldenRing 2.如图创建文件夹“我这取名叫备份存档”&#xff0c;将其中的三个文件复制到新建的文件夹中 3.理论上只需要备份替换ER0000.sl2文件即可

【双指针】合并两个有序数组O(N)

合并两个有序数组 链接 . - 力扣&#xff08;LeetCode&#xff09;. - 备战技术面试&#xff1f;力扣提供海量技术面试资源&#xff0c;帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/merge-sorted-array/ 题目 题解 采用双指针…

青少年CTF擂台挑战赛 2024 #Round 1 Web方向题解 WP 全

EasyMD5 题目描述&#xff1a;php没有难题 考点总结&#xff1a;脑洞题目&#xff0c;不如我出&#xff08;狗头 只允许两个都上传pdf文件。 文件还不能太大了。burp多次发包发现要求两个pdf内容不一样 不一样时候&#xff0c;提示我们MD5碰撞。 科学计数法绕过 PHP的后门 …

把Anaconda添加进环境变量的方法(解决pip识别不到环境的问题)

找到你的Anaconda的安装根目录 比如我的是在&#xff1a;C:\ProgramData\Anaconda3 那么只需要将以下目录添加进环境变量即可&#xff1a; C:\ProgramData\Anaconda3C:\ProgramData\Anaconda3\ScriptsC:\ProgramData\Anaconda3\Library\binC:\ProgramData\Anaconda3\condabin…

吴恩达deeplearning.ai:通过偏差与方差进行诊断

以下内容有任何不理解可以翻看我之前的博客哦&#xff1a;吴恩达deeplearning.ai专栏 文章目录 偏差与方差高偏差高方差合适的模型理解偏差与方差 总结 当你构建神经网络的时候&#xff0c;几乎没有人能够在一开始就将神经系统构建得十分完美。因此构建神经网络最重要的是直到…

Qt 简约又简单的加载动画 第七季 音量柱风格

今天和大家分享两个音量柱风格的加载动画,这次的加载动画的最大特点就是简单,只有几行代码. 效果如下: 一共三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QGridLayout> int main(int argc…

寻找峰值[中等]

优质博文IT-BLOG-CN 一、题目 峰值元素是指其值严格大于左右相邻值的元素。给你一个整数数组nums&#xff0c;找到峰值元素并返回其索引。数组可能包含多个峰值&#xff0c;在这种情况下&#xff0c;返回 任何一个峰值 所在位置即可。 你可以假设nums[-1] nums[n] -∞。 你…

python统计分析——泊松回归

参考资料&#xff1a;用python动手学统计学 概率分布为泊松分布、联系函数为对数函数的广义线性模型叫作泊松回归。解释变量可以有多个&#xff0c;连续型和分类型的解释变量也可以同时存在。 1、案例说明 分析不同气温与啤酒销量的关系。构造不同气温下的销量的数学模型&…

Unity--自动版面(Horizontal Layout Croup)||Unity--自动版面(Vertical Layout Group)

Unity--自动版面&#xff08;Horizontal Layout Croup&#xff09; Horizontal Layout Croup&#xff1a; “水平布局组”组件将其子布局元素并排放置。它们的宽度由各自的最小&#xff0c;首选和灵活的宽度决定&#xff0c;具体取决于以下模型&#xff1a; 所有子布局元素的…