CSS学习笔记(需知)

0x00 引入

link标签

<link rel="stylesheet" type="text/css" href="sheet1.css">
## rel(relation) 属性规定当前文档与被链接文档之间的关系。
## type 指定被链接文档之间的类型。
## href 指定被链接文档地址，可以是绝对地址，也可以是相对地址。

注意：为了正确加载外部样式表，link标签必须放在head元素中，不能放在其他元素中。

候选样式表

定义方式：将rel属性设置为 "alternate stylesheet"
说明：

1.候选样式表只有当用户自己选择时，文档才会使用。
2.如果浏览器支持候选样式表，会使用link元素title属性的值生成候选样式列表。
3.可以为不同的候选样式表设置相同的title值，把它们分组放一起。

style标签

<style type="text/css">...</style>
## ...处填写CSS代码

@import指令

<style type="text/css">
@import url(styles1.css);
@import url(styles2.css);
h1 {color:gray;}
</style>
## @import放在<style>标签中
## @import只放在开头

HTTP链接

Apache中

.htaccess

Header add Link "</url/css/style.css>;rel=stylesheet;type=text/css"
## /url/css/style.css为url链接

或
httpd.conf

<Directory /path/to/ /public/html/directory>
Header add Link "</ui/testing.css>;rel=stylesheet;type=text/css"
</Directory>

行内样式

<h1 style="color:gray;"></h1>
## 除了body元素之外的标签(如head和title)，所有HTML标签都能设定style属性

0x01 厂商前缀

说明

浏览器厂商通过它标记实验性或专属的属性、值或其他内容

出现目的

浏览器为测试新特性，这么做能保证兼容性，不必担心被过时的行为限制，导致与其他浏览器不兼容。

现状

现在开发基本不使用，常见于以前代码。

0x02 注释

注释符

/* 注释 */
## 不支持嵌套
/* 注释
   /*注释*/
   注释
        */

0x03 媒体查询

用法

• link元素的media属性

<link rel="stylesheet" type="text/css" href="style.css" media="print and (color)">

• style元素的media属性

<style type="text/css" media="print and (color)">
...
</style>

• @import声明的媒体描述部分

<style type="text/css">
@import url("style.css") print and (color)
</style>

• @media声明的媒体描述符部分

@media print and (color){...}

可以是简单的媒体类型，也可以是复杂的媒体类型和特性组合

媒体类型

• all：用于所有媒体展示
• print：打印文档时使用，也在预览打印效果时使用
• screen：屏幕媒体展示时使用
• projection：以幻灯片形式展示文档时使用

逻辑运算符

and

连接的两个或多个媒体特性必须同时满足条件，整个查询得到的结果才是真值。

@media (color) and (orientation:landscape) and (min-device-800px){...}
## 只有当媒体环境为彩色、横向放着、设备宽度至少为800像素时对应的样式表才会被应用

not

对整个查询取反。

@media not (color) and (orientation:landscape) and (min-device-800px){...}
## not只能放在开头，才会生效否则不起作用，表示后面所有取反
## 当媒体环境不为为彩色、不为横向放着、设备宽度大于为800像素时对应的样式表才会被应用

不支持or

媒体设备不支持OR关键字；不过，分隔多个媒体查询的逗号相当于OR。

0x04 特性查询

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

用法

@supports (color: red) {
      h1 {color: red}
      }
## 如果浏览器支持color属性值为red，设置h1的颜色为red；否则，跳过这段样式。如果浏览器不支持@supports，整段样式都会跳过。

支持嵌套

@supports (display: flex) {
      @media screen {...}
      @media print {...}
      }
## 或者
@media screen {
      @supports (display: flex){...}
      }
@media print {
      @supports (display: flex){...}
      }

逻辑运算符

• not
• and
• or

注意

特性查询不是正确性查询，浏览器可能支持某属性，但是实现上存在缺陷。