WEB前端第八课——CSS基础

时间 2020-08-02

标签 web 前端第八 css 基础栏目 HTML 繁體版

原文原文链接

1.CSS用于HTML文档中元素样式的定义，实现了将内容与表现分离，提升了代码的可重用性和可维护性，文件后缀是“.css”css

2.HTML=结构层，CSS=表示层，JavaScript=行为层html

3.CSS样式表的引入方式：缓存

　　① 内联方式（行内样式），直接把CSS代码用style属性添加到开始标签中，dom

　　　　语法：<p style="color:red;">红色字体</p>工具

　　② 内部样式表，直接把CSS代码添加到头部<head>的style标签中，语法：字体

<head>
      <style type="text/css">
             p{color:red;}
      </style>
 </head>

　　③ 外部样式表，将CSS代码单独存放于外部文件，HTML页面调用fetch

　　　　语法：<link rel="stylesheet" herf=""/>，stylesheet的意思是样式调用url

　　④ 导入式，相似于第③种方式spa

<head>
    <style>
        @import url(CSSfile.css);
    </style>
</head>

　　优先级：行内样式>内部样式＞外部样式＞导入样式翻译

4.CSS加载方式Link和@import的区别，为何不推荐使用@import

　　① @import只能用于加载CSS，link标签除了能够加载CSS外，还能够作不少其余事情，好比定义rel链接属性等

　　② 加载顺序差异，当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面所有下载完再被加载，因此有时候浏览@import加载CSS的页面时开始会没有样式（不断闪烁），网速慢的时候会比较明显

　　③ 兼容性差异，@import在IE5以上才能识别，而link标签无此问题

　　④ 使用dom控制样式时的差异，当使用JavaScript控制dom去改变样式的时候，只能用link标签，由于dom操做元素的样式时，用@import方式的样式也许还未加载完成

　　⑤ 使用@import方式会增长HTTP请求，会影响加载速度

5.CSS规则和注释

　　语法：color:red;

　　　　① css是以属性和属性值成对形式出现

　　　　② 属性和属性值之间使用冒号（:）链接

　　　　③ 多对属性之间用分号（;）隔开

　　注释：

① 注释标识 “/* css注释语句 */”，HTML注释标识 “”

　　　　② 注释快捷键，HTML和CSS都是 “ Ctrl+/ ”（单行注释/取消注释）、“ Ctrl+shift+/ ”（多行注释/取消注释）

6.Chrome调试小技巧

　　① 调试工具打开快捷方式“ F12 或 Ctrl+shift+i ”

　　② 调试界面左边为HTML元素结构，右边为css样式

　　③ 在右边css样式中能够直接修改数值和颜色查看更改后的效果

7.CSS基础选择器

　　选择器种类：

　　① 通用选择器/全局选择器，用“ * ”表示，可与任何元素匹配，经常使用语设置一些默认样式，适用范围最广但优先级别最低

　　② 元素选择器，用HTML文档中的标签元素表示，如 p、b、div、a、img、body等

　　③ 类选择器，书写格式 “ . className{ } ”，一个页面中class名称能够重复，要配合标签的class属性使用

　　④ ID选择器，书写格式 “ #idName{ } ”，一个页面中id相同的id名只能出现一次，要配合标签的id属性使用

　　⑤ 合并选择器，书写格式 “ 选择器1,选择器2,…{ } ”，能够提取共一样式，减小重复代码

　　优先级，ID选择器＞类选择器＞元素选择器＞通用选择器

　　一般须要重复使用的样式不适用ID选择器，由于ID属性是惟一的

　　选择器命名规范：

　　① 建议使用字符a-z、A-Z、0-九、链接符（-）、下划线（_），不建议使用中文

　　② 类名不能以数字开头

　　组合选择器：

　　① 后代选择器，以空格分隔，如 div p{ }

　　② 子元素选择器，以大于号分隔，如 div>p{ }

　　③ 相邻兄弟选择器，以加号分隔，如 div+p{ }

　　④ 普通兄弟选择器，以波浪号分隔，如 div~p{ }

8.CSS样式表特性

　　继承性，指被包含在内部的标签能够拥有外部标签的样式，好比text-*、font-*、line-* 等，但有些属性不能继承，如border、padding、margin等

　　层叠性，能够定义多个样式

　　优先级，样式定义冲突时，按照不一样样式规则的优先级来应用样式

9.link，用于在文档与将要使用的外部资源之间创建联系，最多见的用途是连接样式表，只能存在于<head>部分

　　语法样式：<link rel="stylesheet" type="text/css" href="items.css">

　　经常使用属性：

　　　　type，规定被连接文档的MIME类型，只有设置了href属性时才能使用该属性，link标签经常使用的MIME类型是“text/css”，它规定样式表

　　　　href，定义被连接文档的位置地址url

　　　　rel，定义当前文档与被连接资源之间的关系（必需属性）

10.rel属性值

　　alternate，连接到该文档的替代版本（好比打印页、翻译或镜像）

　　author，连接到该文档的做者

　　help，连接到帮助文档

　　icon，导入表示该文档的图标

　　license，连接到该文档的版权信息

　　next，表示该文档是集合中的一部分，且集合中的下一个文档是被引用的文档

　　prefetch，规定应该对目标资源进行缓存

　　prev，表示该文档是集合中的一部分，且集合中的上一个文档是被引用的文档

　　search，连接到针对文档的搜索工具

　　stylesheet，要导入的样式表的URL