HTML+CSS学习笔记（六）

时间 2020-08-17

标签 html+css html css 学习笔记栏目 CSS 繁體版

原文原文链接

上次咱们说到了CSS的一些基础性的概念，这里咱们将要说的，是如何从零开始，构建一个样式表。样式表的种类，一般分为三种：外部样式表（推荐）、嵌入样式表和内联样式（最不可取），咱们分开来讲。 css

1、 html

外部样式表： 浏览器

将全部的样式，统一的放在一个文件中，并添加合适的注释，保存为.css文件。缓存

一般在index.html同级文件下新建一个"CSS"文件夹，专门用来存放css文件，若是css文件只有一个，一般写为style.css。服务器

优势是与HTML文件松散耦合，有的时候多个HTML引用同一份CSS，只需修改CSS文件，就可改变HTML显示的样式，浏览器的缓存机制，也使得使用这种方式的页面加载更快。推荐使用！ 网站

加载样式表到HTML中，一般使用连接的方式：(须要注意的是URL是相对于服务器上该样式表的位置，即相对于根目录，而不是HTML文件) url

<head> spa

</head>htm

能够link多个样式表，后面的把前面的覆盖，优先级更高。

嵌入式样式表：

这种方式直接将CSS规则写在HTML文件里，准确的说是放在<head>标签里，同时用<style>标签包围。

<head>

<style>p{color:red;

font-size:1.2em;}

</style>

</head>

若是嵌入式样式表出如今link以后，会把外部样式表的规则覆盖。

内联样式表：

这是最后因该考虑的方式，尽管优先级是最高的，除非有！important，不然内联样式会将以前的全部规则覆盖。因为这种方式将内容（HTML）与表现（CSS）混在了一块儿，严重违背了最佳实践，而且一般内联样式一次只影响单个元素，效率低下，修改起来也很困难。类+外部样式，就可实现对于元素的精确控制，修改起来也很容易，没有必要写成内联样式。

2、

样式的层叠和顺序：只需记住一点，越晚出现的，优先级越高，固然，！important除外，所以，一般状况下，内联样式老是会优先显示出来。！important不多使用，但也有例外，如你的网页引用了第三方服务的新闻源，若是这些HTML中有些样式不符合你的设计思路，就能够用！important实现覆盖！

使用与媒体相关的样式表：

能够指定一个只用于输出，如打印的样式表，货只用于查看屏幕，又或者能够新建一个具备打印和屏幕通用的样式表，再分别编写只用于打印，和只用于屏幕版本的样式。

output能够是print,screen和all（这三个是最经常使用的），除此以外还有aural,braille,handheld,projection,tty和tv，不一样浏览器的支持程度不一样，不过最经常使用的仍是前面的三个。若是输出的方式有多个，用逗号隔开，如meida="print,screen"

还有一种方式，就是在样式表，一般是外部样式表，添加媒体输出：

p{color:red;}

@media print {

p{color:blue;}

}

在后面咱们还会接触到媒体查询，构建响应式网站，一样也是使用media。

借鉴他人的灵感：

查看网页源代码，若是是外部样式的话，就能够在<head>里找到引用的位置，点击便可打开，查看其CSS。

总结：此次的内容比较少，以后咱们统一用外部样式表的形式创建CSS，让HTML，CSS和JavaScript各自独立，这样以来，不管是编写仍是维护，都比较简单，这是构建Web最简单的方法论，遵循"渐进加强"的原则。