CSS的全称
Cascading Style Sheets，层叠样式表。是一种样式表语言，用于为HTML文档定义布局
CSS的引入方式? link 和@import 有什么区别?
-
引入方式
- 内联式：把css代码直接写在现有的HTML标签中
eg.<p style="color:#ccc; font-size:18px;">学习使我快乐 我愿沉迷于学习无法自拔-.-</p>
- 内联式：把css代码直接写在现有的HTML标签中
- 内部式(嵌入式)：把css样式代码写在<style type="text/css"></style>标签之间
一般情况下写在<head></head>之间，也可写在<body>标签内
eg：
<style type="text/css">
p {
color: #ccc;
font-size: 18px;
}
</style>
- 外部式：把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
eg：
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
- 导入@import
eg： <style> @import url("index.css"); @import "index.css"; </style>
JS Bin示例：
CSS引用方式
-
link 和@import 的区别
- link是链接式，@import是导入式 。两者都是从外部引入CSS文件。@import会在整个页面加载完成后再加载CSS文件，当网页内容较大时会产生不好的体验；而link会同时加载。
- link是html的一个标签，@import是CSS的语法。两者效果相同。但是link不止可以调用CSS，还能调用其他类型的文件；而@import只能调用CSS文件。
- @import不兼容过早版本的浏览器，而link没有这个问题。
文件路径
| 符号 | 意义 |
|---|---|
| ./ | 表示当前文件所在的目录的上一级目录 |
| ../ | 表示当前文件所在的目录(可以省略) |
| / | 表示当前站点的根目录(域名映射的硬盘目录) |
- 相对路径：以当前文件(HTML页面)所在路径为基准来查找相关文件
- css/a.css：选择当前目录(HTML文件所在路径)下css文件夹中的a.css文件
- ./css/a.css：等价于css/a.css，选择当前目录下css文件夹中的a.css文件
- b.css：选择当前目录中的b.css文件
- ../image/a.png：选择上一级目录中的imgs文件夹下的a.png文件
- 绝对路径：从盘符开始的路径，是指文件在硬盘上真正存在的路径
注：不常用，在本地计算机上浏览可能会一切正常，但是上传到Web服务器上浏览就很有可能不会显示图片- /Users/hunger/project/css/a.css：在本地计算机上可以通过该路径找到a.css文件
- 网站路径：
- /static/css/a.css：以相对路径的方式在服务器中寻找a.css文件，网站根目录下 static目录下的css目录下的a.css文件
-
http://cdn.jirengu.com/kejian1/8-1.png：
网络路径，通过该路径可以找cdn.jirengu.com域名下kejian1目录下的8-1.png文件
如何在js.jirengu.com上展示一个图片
- 上传图片至网络获取图片的URL，并将该值赋给img标签的src属性
- 上传到服务器，获取相对路径（适用于本地调试）
html和 css 的书写规范
- 统一使用小写（包括标签、属性、命名id class等）
- id class命名使用有意义的单词，尽量使用缩写，分隔符用-
- 尽量不使用内联的style属性定义样式
- 属性名“：”后面添加一个空格
- 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符
- 属性书写顺序：Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果）
注：
- Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
- Box Model 相关属性包括：border / margin / padding / width / height 等
- Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
- Visual 相关属性包括：background / color / transition / list-style 等
- 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签
- 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
chrome 开发者工具的功能区
chrome调试工具
- Elements:允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以在右下方(5)的styles中修改样式更改页面显示效果
- Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互(6)
- Sources: 主要用来调试js
- Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等
- Application(应用面板): 使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。在 Chrome 52 之后资源面板更名为应用面板.
网友评论