前端学习、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;是客户端的…

蓝桥杯(3.1)

92. 递归实现指数型枚举 import java.util.Scanner;public class Main {static int N 16;static int n;static int[] st new int[N]; public static void dfs(int u) {if(u > n) {for(int i1;i<n;i) {if(st[i] 1)System.out.print(i" ");}System.out.print…

798. 差分矩阵

Problem: 798. 差分矩阵 文章目录 思路解题方法复杂度Code 思路 这是一个差分矩阵的问题。差分矩阵是一种用于处理区间修改问题的数据结构&#xff0c;它可以在O(1)的时间复杂度内完成区间的修改操作&#xff0c;然后在O(n)的时间复杂度内完成所有元素的更新操作。 在这个问题中…

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

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

conda目录迁移

conda默认安装在系统目录&#xff0c; 但随着使用&#xff0c; 占用的空间越来越大&#xff0c; 需要迁移到其他目录。 假设原来conda安装在/home/leo/anaconda3目录&#xff0c; 现在要迁移到/data路径。 方法是&#xff1a; 1 移动文件位置 mv /home/leo/anaconda3 /dat…

python笔记_键盘输入

例&#xff1a;从控制台接收员工信息 name input("输入姓名:") age input("输入年龄:") id input("输入id:") print("name",name) print("age",age) print("id",id) ——> 输入姓名: 1&#xff0c;接收到的…

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;过一段时间往往会绝…

苹果 Vision Pro零售部件成本价格分析

苹果公司发布的全新头戴式显示器 Apple Vision Pro 虽然售价高达3499美元&#xff0c;但其制造成本同样不菲&#xff0c;根据研究机构 Omdia 的估计&#xff0c;该头显仅零部件成本就超过了1500美元。这款头显的总零部件成本估计为1542美元&#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 数据…

代码随想录算法训练营|day45

第九章 动态规划 322.零钱兑换279.完全平方数代码随想录文章详解总结 322.零钱兑换 dp[i]表示凑成i所需的最少零钱个数 (1)先遍历物品&#xff0c;后遍历背包 func coinChange(coins []int, amount int) int {maxAmount : amount 1dp : make([]int, amount1)for i : 0; i &l…

下载github项目到pycharm

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

C#判断DataTable1 A列的集合是否为DataTable2 B列的集合的子集

DataSet ds2 (DataSet)res2.Anything; // 检查 集合B是否为集合A的子集 var table1MaterialCodes ds.Tables[2].AsEnumerable().Select(row > row["Code"]).ToList(); //DataSet1 表Code列集合A var table2MaterialCodes ds2.Tables[0].AsEnumerable().Selec…

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/ 题目 题解 采用双指针…