CSS权威指南(一)CSS概述

news2024/9/25 21:23:49

文章目录

  • 1.元素
  • 2.引入样式表
  • 3.样式表
  • 4.媒体查询
  • 5.特性查询

1.元素

(1)置换元素和非置换元素

  • 置换元素,指用来置换元素内容的部分不由文档内容直接表示。比如img标签。
  • 非置换元素,元素的内容是由用户代理在元素自身生成的框中显示。大部分标签都是非置换元素,比如div,span。

(2)元素的显示方式

  • 块级元素,默认生成一个填满父级元素内容区域的框,旁边不能有其他的元素,即块级元素独占一行。代表标签有div和p。
  • 行内元素,在一行文本内生成元素框,不打断所在行。代表标签有span、a、img

ps.通常情况下,块级元素可以包含行内元素,但行内元素包含块级元素就不太符合规则了。除此之外可以通过display属性设置block和inline,这是可以的。

2.引入样式表

(1)link标签

<link rel="stylesheet" type="text/css" href="style.css">

ps.在rel属性中添加alternate,可以将样式表设置为候选样式表,即可切换样式表

(2)@import指令

​ 必须放在样式文件开头

3.样式表

(1)标记

​ 样式表中不允许有标记,但允许有HTML的注释标记

<!--
    h1 {
        font-size: 16px;
    }
-->

(2)规则的结构

在这里插入图片描述

(3)厂商前缀

在这里插入图片描述

(4)css注释

/* 注释内容 */

css注释不能嵌套,比如下面的注释形式就是不支持的

/* 
	/*
	*/
*/

4.媒体查询

  • link元素的media属性
  • style元素的media属性
  • @import声明的媒体描述符部分
  • @media声明的媒体描述符部分

5.特性查询

根据用户代理是否支持特定的CSS属性及其值来应用一段样式。

@support(color: black) {
    body {
        color: black;
    }
}

​ 上述代码段的意思是,如果能够识别并处理color:black这个属性值组合,就应用该样式,否则跳过该样式。

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

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

相关文章

这样的C盘或许还有?救救C盘......

C盘红了&#xff01;&#xff01;&#xff01; 大部分软件默认缓存在C盘&#xff08;有的甚至只能安装到C盘&#xff09; C盘太满电脑运行会很卡顿 对于这种情况&#xff0c;为了节约C盘空间&#xff0c;我们可以将这些被迫存在C盘的文件挪到其他盘 但是有的应用无法更改默…

C++ 显示图片

编译环境为codeblocks 20.03&#xff0c;编译器为mingw64非自带的版本&#xff08;版本号多少忘记了&#xff09; 头文件 #include <graphics.h>//图形库 #include <conio.h>//_getch() 显示图片代码 int main() {initgraph(640,360,EX_SHOWCONSOLE);//初始化绘…

我亲身经历的2022年软件质量工作——测试工作的经验总结及一些建议

2022年对于大部分人来说都是辛苦的一年。对于整个社会&#xff0c;疫情反反复复&#xff0c;折磨的每一个人都心力交瘁。 经济下滑&#xff0c;失业率上升似乎听到的都是不好的消息。对于整个互联网行业也频频传出大厂裁员的消息。 而质量团队在大厂的裁员计划里也是首当其冲。…

4)Django模型,表单,视图,路由

目录 一 Django模型 Django ORM 数据库配置 Django 如何使用 mysql 数据库 实例 定义模型 创建 APP 数据库操作 添加数据 获取数据 更新数据 删除数据 二 Django 表单 HTTP 请求 GET 方法 POST 方法 Request 对象 QueryDict对象 三 Django视图 视图层 请求…

Vault的程序侧接入方式-AppRole

前言&#xff1a; 程序侧的接入对于Vault来说也是一种Accessor的接入&#xff0c;而AppRole绝对不是Vault首推的程序侧接入方式&#xff0c;但它是最方便的接入方式。 AppRole的本质是由Vault为程序单独引入一套由Vault托管的鉴权方式&#xff0c;对于安全平台来说没引入一套…

videojs-flvjs:video.js + flv.js播放m3u8和flv视频

videojs-flvjs是video.js的扩展&#xff0c;让video.js支持flv.js播放器&#xff0c;可以在video.js的techOrder里配置flvjs播放器。 下面做了一个切换m3u8和flv直播流的简易工具&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta ch…

线程安全(万字详解)

目录 线程安全 概念 用一段代码感受线程安全 线程安全问题的原因 修改上述代码,使其线程安全 synchronized synchronized使用方法 锁对象的规则 synchronized用法,代码展示 monitor lock sychronized的特性 java标准库中的线程安全类 死锁 死锁的常见原因 多个…

LVGL学习笔记9 - 标签Label

目录 1. 显示字符串 1.1 lv_label_set_text 1.2 lv_label_set_text_fmt 1.3 lv_label_set_text_static 2. 设置长字符串模式 3. 改变颜色 3.1 改变背景颜色和对比度 3.2 设置字符串颜色 3.2.1 设置Style的字符串颜色 3.2.2 设置对象的字符串颜色 3.2.3 局部改色 显示…

钧瓷产业将占禹州GDP50%以上,产生千亿市值钧瓷生态型科技公司

这里的上市指沪深的主板&#xff0c;创业板和科创板&#xff0c;区域的挂牌不算。 这个数据是根据禹州钧瓷产业2022年实际税收&#xff0c;综合钧瓷产业报税幅度&#xff0c;钧瓷数据开放平台&#xff0c;钧瓷产业决策内参&#xff0c;钧瓷产业化&#xff0c; 数字化后的预期增…

【CUDA入门笔记】GPU存储结构模型(1)

GPU存储结构模型 1.CPU可以读写GPU设备中的Global Memory、Constant Memory以及Texture Memory内存储的内容&#xff1b;主机代码可以把数据传输到设备上&#xff0c;也可以从设备中读取数据&#xff1b; 2.GPU中的线程使用Register、Shared Memory、Local Memory、Global Mem…

信息时代,企业如何安全管理数据

随着企业信息化的发展&#xff0c;企业所产生的数据量也越来越多&#xff0c;企业数据的存储安全和传输安全管理工作则成为企业数据管理者的重中之重。但是对数据的保护要依靠一定的基础设施&#xff0c;目前&#xff0c;世界各国对数据保护的基础设施建设还是不够完善&#xf…

VSCode搭建ruby开发调试环境

安装rvm rvm是ruby版本管理工具&#xff0c;可以管理本地的ruby的版本 curl -sSL https://get.rvm.io | bash -s stable安装ruby 使用 rvm list known获取已知的ruby版本&#xff0c;这里安装3.0.0版本的ruby rvm install 3.0.0新建ruby文件 在VSCode中新建ruby文件main.r…

【强训】Day1

努力经营当下&#xff0c;直至未来明朗&#xff01; 文章目录一、选择二、编程1. 组队竞赛2. 删除公共字符答案1. 选择2. 编程普通小孩也要热爱生活&#xff01; 一、选择 下列选项中属于面向对象编程主要特征的是&#xff08;&#xff09; A 继承 B 自顶向下 C 模块化 D 逐步…

【BP靶场portswigger-服务端4】操作系统命令注入-5个实验(全)

目录 一、操作系统命令注入 1、意义 2、有用的命令 3、注入操作系统命令的方式 4、防止操作系统命令注入攻击 二、执行任意命令 1、示例&#xff1a; 实验1&#xff1a;操作系统命令注入&#xff08;简单&#xff09; 三、盲操作系统命令注入漏洞 1、简述 2、示例 3…

Spring Cloud 2022.0.0正式发布:OpenFeign稳得很全面迈向GraalVM

本文已被https://yourbatman.cn收录&#xff1b;女娲Knife-Initializr工程可公开访问啦&#xff1b;程序员专用网盘https://wangpan.yourbatman.cn&#xff1b;技术专栏源代码大本营&#xff1a;https://github.com/yourbatman/tech-column-learning&#xff1b;公号后台回复“…

Vector在CANdb++中关于XCP和应用报文的定义

Vector DBC规则 前文讲解了dbc有关的属性定义与编辑,本文描述在开发过程中关于XCP和应用报文有关的规则说明,方便开发人员正确配置和代码生成所需的属性及其值。 关联文章: dbc的属性定义:dbc的属性定义 Vector DBC属性定义规则:Vector DBC属性定义规则 DBC编辑问题——…

我理解的proc伪文件系统

一.概念 提供可以动态操作Linux内核信息的接口&#xff0c;实现内核空间与用户空间进行数据交换的途径。 二.观察文件内容 //crtlaltt 快速打开Linux终端 //输入一下内容 cd /proc //进入proc文件夹 ls //观察proc文件夹下的内容 cd 2414 //任意打开一个带数字的文件…

【问题解决】解决xshell7会话窗口只能显示一个的问题

这恐怕会成为最短的一篇文章 问题复现 打开多个终端&#xff0c;最终只显示最后一个 如上图&#xff1a; 再打开一个192.168.1.42 &#xff0c;会覆盖掉1.41&#xff0c;终端上先显示最后打开的那个终端。 想要解决xshell7会话窗口只能显示一个的问题&#xff0c;我们只需要…

日志系统:一条SQL更新语句是如何执行的?

前面我们系统了解了一个查询语句的执行流程,并介绍了执行过程中涉及的处理模块。相信你还记得,一条查询语句的执行过程一般是经过连接器、分析器、优化器、执行器等功能模块,最后到达存储引擎。 那么,一条更新语句的执行流程又是怎样的呢? 之前你可能经常听 DBA 同事说,…

怎么判定自己的账号有没有被限流?短视频运营推广学习日记

短视频运营推广学习日记 今天开始记录自己的学习过程&#xff0c;今天的内容是&#xff0c;怎么知道自己的账号有没有被限流&#xff1f;对比了几个方法&#xff0c;还是我赢的内容比较正常&#xff0c;限流主要是两种方式&#xff1a;作品限流和账号限流 作品限流&#xff1…