重学前端之CSS(一)CSS介绍

时间 2020-04-04

标签前端 css 介绍栏目 CSS 繁體版

原文原文链接

这一系列文章主要是关于CSS内容部分,内容包括: CSS选择器API、CSS权重、布局、黏性布局、BFC等内容。若是有哪些地方我写的不对,请你们不吝赐教。若是你们以为有什么重要的内容我没有提的话,能够告诉我,谢谢。css

如何将CSS应用与HTML？

1) 外部样式表 <link rel="stylesheet" href="index.css"> 或者在CSS中使用 @import url("index.css")
2) 内部样式表将CSS放在<style></style>HTML内包含的元素<head>中
3) 内联样式在标签上添加 style 属性,而后在该属性中设置CSS。除非必须须要,不然不要这样作。html

CSS(层叠样式表)的特色

CSS(层叠样式表)的特色:
1) css是一门用于指定网页文件如何展现给用户的语言--包括网页的样式,布局等等。
2) CSS是一门基于规则的语言,能够定义网页特定元素样式的规则。git

CSS使用时的注意点

1) 给一个元素以百分比设置padding和margin时，它是根据body的宽度计算得出的。
2) 外边距(margin)的值可正可负;内边距(padding)的值必须为0或正的值，不然无效。
3) 可使用HTML的contenteditable属性来让元素容许编辑。IE5.5支持。
4) 视口(浏览器页面的可见区域)也具备大小。在CSS中，有和视口大小相关的vw单位(视口宽度)和vh单位(视口高度)。1vh等于视口高度的1%。IE9支持。github

CSS的顶层样式表规则

1、定义
CSS的顶层样式表规则: CSS的顶层样式表规则由两种规则组成的规则列表构成,一种被称为at-rule,也就是at规则,另外一种是qualified rule,也就是普通规则。
2、相关API
at-rule: 该规则是由一个@关键字和后续的一个区块组成的,若是没有区块,则以分号结束。
qualified rule: 该规则是指普通的CSS规则,由选择器和属性指定构成的规则。
at-rule规则的关键字:
1) @charset: 指定样式表中使用的字符编码。它必须是样式表中的第一个元素,且前面不能有任何字符。若是有多个@charset规则被声明,只有第一个会被使用,且不能在HTML元素或HTML页面的<style>元素内的样式属性中使用。浏览器在解析样式表时，在开发人员没有特定设置时，假设文档是UTF-8格式。IE5.5支持。(@charset "UTF-8"; @charset "utf-8";)
2) @import: 用于从其余样式表导入样式规则，@charset规则除外。该规则必定要写在@charset外的任何CSS规则以前,若是位于其余位置将会被浏览器忽略，并且@import以后若是存在其余样式,则@import以后的分号是必须书写的，不可省略。IE5.5支持。(@import url("./index.css");)
3) @media: 媒体查询,可根据一个或多个媒体查询的结果应用样式表的一部分。IE9支持。(@media only screen and (max-width: 1200px) { body {color: red;} })
4) @page: 用于在打印文档时修改某些CSS属性。你不能用@page规则来修改全部的CSS属性，而是只能修改margin,orphans,widow 和 page breaks of the document。对其余属性的修改是无效的。IE8支持。(@page {margin: 10%;})
5) @counter-style: 它让开发者能够自定义counter的样式。一个 @counter-style规则定义了如何把一个计数器的值转化为字符串表示。只有firefox33支持。(@counter-style triangle { system: cyclic; symbols: ‣; suffix: " ";})
6) @keyframes: 经过在动画序列中定义关键帧（或waypoints）的样式来控制CSS动画序列中的中间步骤。IE10支持。(@keyframes move { from {top: 50px;} to {top: 0;} })
7) @font-face: 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 若是提供了local()函数，从用户本地查找指定的字体名称，而且找到了一个匹配项, 本地字体就会被使用. 不然, 字体就会使用url()函数下载的资源。IE4支持。( @font-face { font-family: "Open Sans"; src: url ("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff") format("woff");} )
8) @support:关联了一组嵌套的CSS语句, 由逻辑与,逻辑或,逻辑非组合而成. 这样的条件语句称为支持条件。该语句能够用来作特性查询。只有firefox支持。(@supports (animation-name: test) {/* 若是支持不带前缀的animation-name,则下面指定的CSS会生效 */ @keyframes {}})
9) @viewport: 让咱们能够对文档的大小进行设置 viewport。IE10支持。(@viewport {width: 100vw;})
qualified rule: 由一个选择器(selector)开头,后面接着一对大括号{},在大括号内部定义一个或多个形式为 属性(prototype):值(value); 的声明。值还能够为函数。
参考连接:
MDN上的@charset
MDN上的@charset
MDN上的@pageweb

常见的CSS计算函数

常见的CSS计算函数:
1) calc(): 能够在声明CSS属性值时执行一些计算。IE9支持。(.border { width: calc(100% - 80px); })
2) max(): 用在CSS属性值中,能够从逗号分隔的表达式中取出最大的值来设置。IE、Edge、Firefox都不支持。(.logo {width: max(50vw, 300px);})
3) min(): 用在CSS属性值中,能够从逗号分隔的表达式中取出最小的值来设置。IE、Edge、Firefox都不支持。(.logo {width: min(50vw, 300px);})
4) clamp(): 容许在定义的最小值和最大值之间的值范围内选择中间值。它有三个参数,分别是最小值、首选值、最大容许值。Edge、Firefox、IE、Safari都不支持。(.box {width: clamp(10px, 4em, 80px);} /* 当前em的值若是在10px和80px之间,则宽为4em */)
5) attr(): 用来获取选择到的元素的某一HTML属性值，并用于其样式。它也能够用于伪元素，属性值采用伪元素所依附的元素。IE8支持。(.msg::before { content: attr(data-word) " "; })浏览器

CSS命名规则

1) 类名使用小写字母，以中划线分隔（.element-content {}）
2) id采用驼峰式命名（#myDialog {}）
3) scss中的变量、函数、混合采用驼峰式命名 ( @mixin centerBlock {} )
来源: 腾讯AlloyTeam代码书写习惯服务器

CSS特色

1) 在CSS中,属性和值均区分大小写。若是属性未知,或者对于给定属性值无效,则声明被视为无效,而且浏览器的CSS引擎将彻底忽略该声明。
2) 与HTML同样,浏览器倾向于忽略CSS内部的大部分空白,大量空白只是为了提升可读性。
3) 浏览器解析CSS时,若是遇到它不理解的属性或值,它将忽略它并继续进行下一个声明。若是拼写了错误的属性或值,或者该属性或值太新而且浏览器尚且不支持它,它将执行此操做。一样，若是浏览器遇到一个没法理解的选择器，它将忽略整个规则并继续执行下一个规则。(如h1, ..test{}将被忽略)
4) CSS的选择器解析的时候是从右到左的,对于浏览器来讲,ID选择器是最快的,其次是class选择器、html元素选择器。当有多个选择器时, 如 .layout span {} 会先找到全部的 span 节点,对于每个span,向上寻找 class="layout" 的节点。
5) CSS的执行顺序是从上到下,在相同权重、相同的规则下,后面的规则覆盖前面的规则。
6) CSS中定义的样式,权重不一样时,权重高的决定元素的样式ide

CSS注释书写方式: `/* 这是CSS注释,能够是多行的 */`。

CSS权重

1、定义
CSS权重: 权重决定了CSS规则怎样被浏览器解析直到生效。CSS权重是由每一个选择器相加计算而来的。
2、基本规则
权重的基本规则:
1) 权重相同时，之后面出现的选择器为最后规则
2) 权重不一样时，权重值高则生效
3、权重级别
权重级别:
1) 0 : 通配符选择器(*)的权重0
2) 1 : 一个元素或者伪元素的权重为1，伪元素选择器有::before 、::after 、::first-letter 、::first-line 、::selection等。
3) 10 : 一个属性选择器/class或者伪类的权重为10
4) 100 : 一个ID选择器的权重为100
5) 1000 : 行内样式的权重为1000
6) 最高 : 在样式的属性值后面加上 ##!important## 表示该样式权重最高，只能被后面相同属性且属性值后面带有 ##!important##所覆盖
4、权重计算案例
权重计算案例:函数

01. *{}                         ====》0
02. li{}                        ====》1(一个元素)
03. li:first-line{}             ====》2(一个元素，一个伪元素)
04. ul li {}                    ====》2（两个元素）
05. ul ol+li{}                  ====》3（三个元素）
06. h1+ *[rel=up] {}            ====》11（一个属性选择器，一个         元素）
07. ul ol li.red{}              ====》13（一个类，三个元素）
08. li.red.level{}              ====》21（两个类，一个元素）
09. style=""                    ====》1000(一个行内样式)
10. p {}                        ====》1（一个元素）
11. div p {}                    ====》2（两个元素）
12. .sith {}                    ====》10（一个类）
13. div p.sith{}                ====》12（一个类，两个元素）
14. #sith{}                     ====》100（一个ID选择器）
15. body #darkside .sith p {}   ====》112(1+100+10+1,一个Id选择器，一个类，两个元素)

参考连接:
MDN上的伪元素
 你应该知道的一些事情——CSS权重布局

CSS盒模型

标准盒模型: 盒子的总宽/高 = width/height + margin + padding + border。浏览器默认使用标准盒模型。
怪异(IE)盒模型: 盒子的总宽/高 = width/height + margin。(即width/height已经包含了padding和border值)。若是想要使用怪异盒模型，须要设置.box {box-sizing: border-box;}。

字体大小单位

1) px(像素): 这是一个绝对单位，它致使在任何状况下，页面上的文本所计算出来的像素值都是同样的。
2) em: 1em等于当前元素的父元素上设置的字体的大小。
3) rem: 1rem等于HTML中的根元素的字体大小，而不是父元素的。IE8及如下版本不支持。

处理不一样的文字方向

1、定义及模式的API
CSS中的书写模式(writing-mode): 指的是文本是水平放置仍是垂直放置。
该writing-mode属性的三个可能值是:
1) horizontal-tb：从上到下的块流动方向。句子水平排列。这是默认状况下。
2) vertical-rl：从右到左的块流动方向。句子垂直排列。
3) vertical-lr：从左到右的块流动方向。句子垂直排列。

上图为水平书写模式下的两种维度(horizontal-tb)

上图为纵向书写模式下的两种维度(vertical-rl、vertical-lr)

以writing-mode的值horizontal-tb为例，在该书写模式下，block为垂直方向，inline为水平方向。

2、相关属性
inline-size: 定义元素块的水平或垂直大小，具体取决于元素的写入模式。它对应于width和height属性，具体取决于写入模式的值。在writing-mode的值为horizontal-tb下是宽的尺寸。IE、Edge都不支持。
block-size: 定义元素块的水平或垂直大小，具体取决于元素的写入模式。它对应于width和height属性，具体取决于写入模式的值。在writing-mode的值为horizontal-tb下是高的尺寸。IE、Edge都不支持。
参见: MDN上的处理不一样方向的文本

以上内容若有不对,但愿你们指出,谢谢。

1. 前端学习之路-CSS介绍，Html介绍，JavaScript介绍
2. 前端学习之 CSS（一）
3. 前端之css（一）
4. 前端之CSS（一）
5. 后端学前端之css
6. 前端学习之路之CSS （一）
7. 前端之CSS
8. 前端之css
9. 重学前端之CSS(四)CSS过渡与动画
10. Boostrate之CSS介绍
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Java Agent入门实战（一）-Instrumentation介绍与使用
• Kotlin学习（一）基本语法