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调试,可添加断点
- Resources/Application
当前页面的资源,包括页面的图片,样式表,用的最多的是local storage和cookies
localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中
Cookie 实际上是指小量信息,是由 Web 服务器创建的,将信息存储在用户计算机上的文件。一般网络用户习惯用其复数形式 Cookies,指某些网站为了辨别用户身份、进行 Session 跟踪而存储在用户本地终端上的数据
Paste_Image.png- Emulation
用于移动端网页开发,模拟手机
可模拟不同手机分辨率,不同网速下网页加载响应速度;
网友评论