2024.4.1-[作业记录]-day06-认识 CSS(三大特性、引入方式)


个人主页:学习前端的小z
个人专栏:HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结,欢迎大家在评论区交流讨论!


day06-认识 CSS(三大特性、引入方式)

文章目录

  • day06-认识 CSS(三大特性、引入方式)
  • 作业
  • 2024-4-1 学习笔记
    • 1 CSS三大特性
      • 1.1 层叠性
      • 1.2 继承性
      • 2 text-align注意事项
      • 3 a标签注意事项
      • 4 优先级
      • 5 a:hover
      • 6 CSS引入方式
      • 7 chrome调试技巧

作业

在这里插入图片描述

.text-center {
    text-align:center;
    font-size: 30px;
    color: red;
}
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="测试" content="测试">
        <meta description="测试" content="测试">
        <title>测试</title>
        <link rel="stylesheet" href="./test.css">
        <style>
            .text-right{
                text-align:right;
                color:green;
                font-size:50px;
            }
        </style>
    </head>
    <body>
        <div class="text-center">
            <p>这是一个链接式</p>
            <span class="text-right">
                <p>这是一个链接式+嵌入式,遵循就近原则</p>
                <p style="text-align:left;color:blue;font-size:70px;">这是一个链接式+嵌入式+行内式,也遵循就近原则</p>
            </span>
        </div>
    </body>
</html>

优先级的计算

ul li a ----> (0,0,0,1)+(0,0,0,1)+(0,0,0,1)=(0,0,0,3)
#bbb a ----> (0,1,0,0)+(0,0,0,1)=(0,1,0,1)
a:hover div .red —>(0,0,1,1)+(0,0,0,1)+(0,0,1,0)=(0,0,2,2)
.abc!important ---->(0,0,1,0)+无穷=无穷

2024-4-1 学习笔记

1 CSS三大特性

1.1 层叠性

1相同属性:.就近原则
2.不同属性:合并

1.2 继承性

自身有该样式,不能继承,就近原则
百分号%的line-height不会继承,会先算好再到下一个,这时候子元素设置font-size就无效了

在这里插入图片描述

在这里插入图片描述

2 text-align注意事项

text-align不能放到行内元素上面,因为行内元素它本身就是内容的宽度,没有剩余空间,所以对齐方式无意义
text-align要放在块的最外面的那个标签

在这里插入图片描述

在这里插入图片描述

3 a标签注意事项

a 标签可以继承color,但是要注意有可能本来a标签浏览器给它添加了一些样式了的,那么继承的权重是小于标签本身的权重,所以可能无效。

在这里插入图片描述

4 优先级

继承<标签,伪类<id<行内<!important
继承的优先级是最弱的,有!important也没用

在这里插入图片描述

5 a:hover

a是标签选择器 :hover 是伪类选择器,是两个

在这里插入图片描述

在这里插入图片描述

6 CSS引入方式

css一般添加顺序:1.链接式,2.嵌入式,3.行内式。

在这里插入图片描述

7 chrome调试技巧

可以只用chrome查看deatails,然后回vscode按ctrl+g输入行数修改

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

xss.pwnfunction-Ma Spaghet!

根据代码得知 这个是根据get传参的并且是由someboby来接收参数的 所以 <script>alert(1137)</script> js并没有执行因为 HTML5中指定不执行由innerHTML插入的<script>标签 所以 ?somebody<img%20src1%20onerror"alert(1337)"> 这样就成…

Java栈和队列的实现

目录 一.栈(Stack) 1.1栈的概念 1.2栈的实现及模拟 二.队列(Queue) 2.1队列的概念 2.2队列的实现及模拟 2.3循环队列 2.4双端队列&#xff08;Deque&#xff09; 一.栈(Stack) 1.1栈的概念 栈:一种特殊的线性表&#xff0c;其 只允许在固定的一端进行插入和删除元素操作…

JavaWeb--JavaScript Part 01

1. JavaScript概述 JavaScript&#xff08;简称JS&#xff09;是一种轻量级的、解释执行的客户端脚本语言&#xff0c;主要用于增强网页的交互性和动态性。它起源于Netscape的LiveScript&#xff0c;并在1995年发布时更名为JavaScript。尽管名称中包含"Java"&#xf…

JS 利用 webcam访问摄像头 上传到服务器

webcam JS 较为详细的指南 定义标题 <!doctype html> <html> <head><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>How to capture picture from webcam with Webcam.js</title></…

FreeMarker系列--指令的用法(全面,有示例)

原文网址&#xff1a;FreeMarker系列--指令的用法(全面&#xff0c;有示例)_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍FreeMark指令的用法。 相关网址 中文官方参考手册 assign 描述 使用该指令你可以创建一个新的变量&#xff0c; 或者替换一个已经存在的变量。注…

Redis实现高可用持久化与性能管理

前言 在生产环境中&#xff0c;为了实现Redis的高可用性&#xff0c;可以采用持久化、主从复制、哨兵模式和 Cluster集群的方法确保数据的持久性和可靠性。这里首先介绍一下使用持久化实现服务器的高可用。 目录 一、Redis 高可用方法 1. 持久化 2. 主从复制 3. 哨兵 4.…

2024.4.5-[作业记录]-day10-CSS 布局模型(层模型)

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;HTML5和CSS3悦读 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; 文章目录 作业 2024.4.5-学习笔记1 CSS定位1.1 相对定位 relative1.2 绝对定位 absolut…

【C++】map set 底层刨析

文章目录 1. 红黑树的迭代器2. 改造红黑树3. map 的模拟实现4. set 的模拟实现 在 C STL 库中&#xff0c;map 与 set 的底层为红黑树&#xff0c;那么在不写冗余代码的情况下使用红黑树同时实现 map 与 set 便是本文的重点。 1. 红黑树的迭代器 迭代器的好处是可以方便遍历&…

Day84:服务攻防-端口协议桌面应用QQWPS等RCEhydra口令猜解未授权检测

目录 端口协议-口令爆破&未授权 弱口令爆破 FTP&#xff1a;文件传输协议 RDP&#xff1a;Windows远程桌面协议 SSH&#xff1a;Linux安全外壳协议 未授权案例(rsync) 桌面应用-QQ&WPS&Clash QQ RCE 漏洞复现 WPS RCE 漏洞复现 Clas* RCE 漏洞复现 知识点…

90天玩转Python—04—基础知识篇:Python编程基础:标识符、保留字、注释、多行语句、print输出以及模块导入详解

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

淘宝里的优惠券在哪里查看_淘宝优惠券怎么找到领取

淘宝里的优惠券在哪里查看&#xff1f; 1、打开手机淘宝APP&#xff0c;点击右下角我的淘宝&#xff1b; 2、在我的淘宝里找到我的权益&#xff0c;看到优惠券后点击进入&#xff1b; 3、我淘宝我的权益券里可以看到已领取到的淘宝天猫优惠券&#xff1b; 淘宝优惠券怎么找到领…

开源代码分享(17)-基于足球队训练算法(Football Team Training Algorithm,FTTA)的组合风速预测

参考文献&#xff1a; [1]Tian Z, Gai M. Football team training algorithm: A novel sport-inspired meta-heuristic optimization algorithm for global optimization[J]. Expert Systems with Applications, 2024, 245: 123088. 1.算法基本原理 足球队训练算法&#xff0…

(学习日记)2024.04.01:UCOSIII第二十九节:消息队列实验(待续)

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

独角数卡对接码支付收款教程

1、到码支付后台找到支付配置。2、将上面的复制依次填入&#xff0c;具体看下图&#xff0c;随后点立即添加 商户ID商户PID 商户KEY异步不能为空 商户密钥商户密钥

jenkins_Pipeline使用测试

jenkins—Pipeline使用测试 安装jenkins # jar包启动 https://sg.mirror.servanamanaged.com/jenkins/war-stable/2.346.1/jenkins.war https://download.oracle.com/java/17/latest/jdk-17_linux-x64_bin.tar.gz [rootvm ~]# tail /etc/profile ... export JAVA_HOME/opt…

51单片机入门:LED点阵屏

LED点阵屏介绍 LED点阵屏由若干个独立的LED组成&#xff0c;LED以矩阵的形式排列&#xff0c;以灯珠亮灭来显示文字、图片、视频等。LED点阵屏广泛应用于各种场合&#xff0c;如&#xff1a;广告屏、公告牌等。 分类&#xff1a; 按颜色&#xff1a;单色、双色、全彩&#x…

GPT4解除限制使用次数了!GPT5预计要推出了!

今天登录GPT Plus的时候&#xff0c;出现了如下提示&#xff1a; With DALLE,browing and analysis Usage limits may apply GPT4已经没有了数量和时间限制的提示。 更改前&#xff1a;每 3 小时限制 40 次&#xff08;团队计划为 100 次&#xff09;&#xff1b;更改后&#…

尚硅谷html5+css3(1)

1.基本标签&#xff1a; <h1>最大的标题字号 <h2>二号标题字号 <p>换行 2.根标签<html> 包括<head>和<body> <html><head><title>title</title><body>body</body></head> </html> 3…

C语言-预定义符号

编译和链接&#xff08;基础速通版&#xff09;-CSDN博客https://blog.csdn.net/Jason_from_China/article/details/137182220 预定义符号 包含 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 __FILE__ //进⾏编译的…

二叉树中所有距离为k的节点

题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 从目标节点的左孩子&#xff0c;右孩子&#xff0c;父亲节点出发去找&#xff0c;左孩子 右孩子 做法简单 &#xff0c; 主要是父亲节点 &#xff0c;因此我们需要知道每个节点的父亲节点&am…