1.CSS的全称
CSS全称是 Cascading Style Sheets, 层叠样式表
2.CSS的引用方式
- 内联样式
样式与html标签混杂在一起
<h1 style="color: red; font-size: 20px;"></h1>
- 内部样式
在style标签中进行样式的设计与页面结构的HTML分离，但css的样式内容仍在HTML文件中
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>简书</h1>
- 外部样式
- HTML文件引用外部css文件
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
href：表明CSS文件的路径
type：表明页面链接文档的类型，值应该是text/css
rel：表明HTML与被链接文件的关系，当链接到CSS文件时，特性应该为stylesheet
通常把link放到head里面
Link是html的标签
- CSS文件引用外部css
<style>
@import url("hello.css");
@import "world.css";
</style>
@import是CSS的语法，在style标签里面用，=不能把这个直接放到html页面里使用
3.文件路径
-
相对路径
-
css/a.css
引用的a.css的html文件与css文件夹在同一级路径下，可以直接进入css引用 -
./css/a.css
“./”，代表当前文件夹，表示意义与上一种相同，用法等价 -
b.css
引用的b.css的html文件与b.css在同一文件夹下，可以直接引用 -
../imgs/a.png
“../”，代表向上一级，从html当前路径向上一级，找到Imgs文件夹，进行引用
-
-
绝对路径
- /Users/hunger/project/css/a.css
本地文件的绝对路径，在本地使能服务器后，可用这种方法来引用本地文件
- /Users/hunger/project/css/a.css
-
网站路径
-
/static/css/a.css
在网站的根目录下，找static文件夹，进入css引用a.css -
http://cdn.jirengu.com/kejian1/8-1.png
将图片上传，得到一个线上地址，引用图片
-
4.如何在JsBin上展示一个图片
-
将图片上传图床，如七牛，得到图片的线上地址，在代码中引用图片的线上地址
-
直接将图片拖到Jsbin中，得到一个线上的url，也可展示，多用于调试
5.HTML和CSS的书写规范
-
HTML
- 用两个空格来代替制表符（tab）
- 嵌套元素应当缩进一次（即两个空格）
- 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，<!DOCTYPE html>
- 为 html 根元素指定 lang 属性，<html lang="en-us">
- 明确声明字符编码，<meta charset="UTF-8">
-
CSS
- 用两个空格来代替制表符（tab）
- 为选择器分组时，将单独的选择器单独放在一行
- 为了代码的易读性，在每个声明块的左花括号前添加一个空格
- 声明块的右花括号应当单独成行
- 每条声明语句的 : 后应该插入一个空格
6.开发者工具常用的功能区
- Element
用于查看页面结构，html元素，可通过选择元素查看对应的HTML代码
Paste_Image.png
- styles
对应网页的样式，可查看元素的样式设计，也可自己修改添加样式，进行验证
Paste_Image.png
- Console
用于调试JS代码，查看执行状态，在console中添加代码，可以查看动画的效果，调试JS时，如果有报错，可以双击定位出错的代码；
Paste_Image.png
- Network
查看请求的信息，调试ajex用到；Header，看到向接口传递的参数；Response看后台给的响应；可以通过请求的种类进行筛选
Paste_Image.png
- Source
可用于JS调试，可添加断点
Paste_Image.png
- Resources/Application
当前页面的资源，包括页面的图片，样式表，用的最多的是local storage和cookies
localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中
Cookie 实际上是指小量信息，是由 Web 服务器创建的，将信息存储在用户计算机上的文件。一般网络用户习惯用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 Session 跟踪而存储在用户本地终端上的数据
Paste_Image.png
- Emulation
用于移动端网页开发，模拟手机
可模拟不同手机分辨率，不同网速下网页加载响应速度；
Paste_Image.png
Paste_Image.png
网友评论