[CSS权威指南读书笔记]第一章：CSS和文档_css权威指南读书心得-CSDN博客

本文链接：https://blog.csdn.net/qq_42136832/article/details/121492366

CSS权威指南读书笔记

写在前面

写在前面

主要是记录在读css权威指南的时候产生的和自己以前的认知不同的点，漏掉的点和有灵魂共鸣的点(并且是个人认识比较重要的点)

元素和引入css

置换元素和非置换元素的概念：前者如img，input，会改变的
块级元素和行内元素：块级元素能包含行内元素，反之不行
把css应用在html
- link标签(候选样式表，title不同。默认第一个)
- @import指令
  - import必须放在其他css规则前面，否则不会起作用
  - url后面可以提供媒体描述符(后面的章节详细说)
HTTP链接(不太懂，先放着，也许遇到了就懂了)
行内样式：style="" 形式引入

厂商前缀

前缀	厂商
-epub-	国际数字出版论坛指定的ePub格式
-moz-	基于Mozilla的浏览器(Firefox)
-ms-	微软 IE
-o-	基于Opera的浏览器
-webkit-	基于Webkit的浏览器(如Safari和Chrome)

媒体查询

用在下面几个地方

link元素的media属性
style元素的media属性
@import生命的媒体描述符部分
@media生命的媒体描述符部分

例子：CSS 多媒体查询，适配各种设备尺寸

        @media screen and (min-width:300px){
            body{
                background-color: aliceblue;
            }
        }
        @media screen and (min-width:500px){
            body{
                background-color: blue;
            }
        }
        @media screen and (min-width:700px){
            body{
                background-color: red;
            }
        }

媒体类型

类型	作用
all	用于所有展示媒体
print	为有视力的用户打印文档时使用，也在预览打印效果时使用
screen	在屏幕媒体上展示文档时使用，这个应该最常用
projection	幻灯片
handheld

常用的媒体查询：

min-width
orientation: portrait 竖屏
orientation: landscape 横屏
only专门用于保证向后兼容(只能用在开头)
其实很多，不列举了，book 32页

特性查询

@supports举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       @import url(style.css); // h1{color:red;}
       @supports (color:red){
           h1{color:blue;}
           h2{color:red;}
       }
    </style>
</head>
<body>
    <h1>123</h1>  //blue
    <h2>456</h2>  //red
</body>
</html>