CSS权威指南(一)CSS概述

news/2024/11/18 0:00:28/

文章目录

  • 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.ppmy.cn/news/8383.html

相关文章

Rust入门(三):内存与指针

Rust内存回收 所有程序都必须管理其运行时使用计算机内存的方式。 一些语言中具有垃圾回收机制&#xff0c;比如说java&#xff1b; 一些语言需要程序员手动分配和释放内存&#xff0c;比如说c&#xff1b; rust采用了第三种方式&#xff0c;使用所有权管理系统来管理内存 …

分布式事务二阶段提交协议和三阶段提交协议

二阶段提交协议和三阶段提交协议都是分布式系统数据一致性问题解决方案。同时&#xff0c;这2种方案也不是百分之百可靠的&#xff0c;虽然这么说&#xff0c;但是也能极大的提高了一致性。有效解决分布式一致性问题的是Paxos算法。 一、二阶段提交&#xff08;two phase comm…

ext4 extent详解2之内核源码详解

在查看本文前&#xff0c;希望先查看《ext4 extent详解1之示意图演示》这篇文章&#xff0c;有助于理解本文。本文内核源码版本3.10.96&#xff0c;详细内核详细源码注释见https://github.com/dongzhiyan-stack/kernel-code-comment。 什么时候会用到ext4 extent B树呢&#xf…

(函数介绍)puts()函数

功能介绍 1. puts()函数用来向标准输出设备屏幕输出字符串并换行。 2. 函数的参数就是一个起始的地址&#xff0c;然后就从这个地址开始一直输出字符串&#xff0c;直到碰到\0就停止&#xff0c;然后这个\0是不进行输出的&#xff0c;是不能够算在里面的。与此同时&#xff…

Java算法_LeetCode26:删除排序数组中的重复项

LeetCode26&#xff1a;删除排序数组中的重复项 给你一个 升序排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。 由于在某些语言中不能改变数组的长度&a…

异步任务执行:workqueue与taskwork

workqueue workqueue就是用来异步执行逻辑的内核组件。异步执行是很常见的需求,workqueue组件为异步执行抽象出三个概念: work:指需要异步执行的任务 woker:处理work的异步执行上下文,就是一个内核线程 workqueue:work的链表,异步执行需求者产生work,将work加入到w…

周赛326总结

周赛326总结 感谢力扣&#xff0c;第一次全部做完&#xff0c;耗时43分37秒&#xff0c;很满足了&#xff0c;虽然是题比较简单&#xff0c;新的一年继续努力呀&#xff01;&#xff01; 计能整除数字的位数 Given an integer num, return the number of digits in num that …

Leetcode 36. 有效的数独

请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#xff08;请参考示例图&#xff09;注意…