【每日十分钟前端】基础篇1，DOCTYPE、@规则、typeof

黎明初时

已于 2022-06-30 10:52:44 修改

阅读量319

点赞数

分类专栏：重学前端文章标签：前端 javascript html

于 2022-02-16 11:10:16 首次发布

本文链接：https://blog.csdn.net/u013035708/article/details/122959323

版权

重学前端专栏收录该内容

24 篇文章 8 订阅

订阅专栏

1、[HTML] DOCTYPE 有什么作用？
2、[CSS] css@规则有哪些，有什么用？
3、[JS] JS中typeof的类型有哪些？

1、DOCTYPE 有什么作用？

用于声明文档类型，这样浏览器才能正确地呈现内容。
位于文档最前面，处于html标签之前。

类型有：
1、Quirks Mode(兼容模式/混杂模式/怪异模式)
2、Standards Mode（严格模式/标准模式）
3、Almost Standards Mode（几乎严格模式）

2、css@规则有哪些，有什么用？

常规：

@charset

规定样式文件（.css）中使用的字符编码，且只能在css文件中试用。样式列表的第一个元素，如果写了多个规则，则只有第一个会被使用，且不能再<style>标签内使用。

@charset "utf-8";

@import

从其他样式表导入样式规则，书写顺序优于别的规则（@charset除外）。
允许将样式表a导入到样式表b中。
支持媒体查询，可以允许依赖媒体的导入

//css文件中使用：
@import "./css/css.css";
@import url(./css/css.css);

//html文件中使用：
<style>
@import "./css/css.css";
</style>

补充：

@import与link的区别：

1、link属于html标签，而@import是css提供的语法规则；
2、link可以加载别的文件，@import只能加载css文件；
3、页面加载时，link同步加载，@import在页面加载完毕后加载（多个@import会导致下载顺序紊乱，网页速度慢的时候会导致样式出现闪烁）；
4、@import需要IE5以上支持；
5、link的样式权重大于@import；
6、@import必须放在style标签中，@import可在css文件中使用；
7、js可以操作link标签来改变css文件，但是无法通过操作@import的方式去改变。

@namespace

可以用来定义样式表的“默认名称空间”，定义默认名称空间时，所有通用类型选择器仅适用于该名称空间中的元素。
也可以定义一个“名称空间前缀”。如果通用选择器和属性选择器带这个前缀，那么这些选择器只有在元素或属性的名称空间和名称匹配时才能使用。
注：命名空间（xmlns）存在于xhtml中。

@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

svg|a {}

嵌套：

@media

多用于响应式布局，根据不同的屏幕尺寸设置不同的样式。
重置浏览器或浏览器的窗口的大小时，页面也会根据新的尺寸重新渲染页面。

@media (min-width: 1280px){
	//屏幕尺寸大于1280px时，使用这里的内容
	//……
}

@media (max-width: 680px){
	//屏幕尺寸大于680px时，使用这里的内容
	//……
}

@media (min-width:880px) and (max-width:1080px){
	//屏幕尺寸大于880px与1080px之间时，使用这里的内容
	//……
}

@page

规定打印时候的该页面区域大小和边缘无内容区域大小（打印时内容在整张纸中的区域）。

@page {
  margin: 1cm;
}

@supports

如果条件，将执行大括号内的代码。
有单一条件，也支持“and”和“or”修饰的多条件，如果and和or混合使用的时候，必须要用括号来确定优先级。

//@supports(运行条件)

@supports(display: flex){
    // 如果浏览器支持display:flex属性的话，那么执行这里的内容
　　// ……
}

@supports not (display: flex) {
    // 如果浏览器不支持display:flex属性的话，那么执行这里的内容
　　// ……
}


@supports (display: flex) and (not (transition-property: color) or (animation-name: foo)){
    
}

@counter-style

自定义一种counter的样式，实现多样化的有序样式。

// 定义
@counter-style counter-circled {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}
// 使用
.items {
   list-style: counter-circled;
}

结果：
Ⓐ 1
Ⓑ 2
.
.
.
Ⓩ 26
27 27