CSS基础小记

2017-06-13 本文已影响0人 upup_dayday

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>

外部样式
1. 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
  本地文件的绝对路径，在本地使能服务器后，可用这种方法来引用本地文件
网站路径
- /static/css/a.css
  在网站的根目录下，找static文件夹，进入css引用a.css
- http://cdn.jirengu.com/kejian1/8-1.png
  将图片上传，得到一个线上地址，引用图片

4.如何在JsBin上展示一个图片

将图片上传图床，如七牛，得到图片的线上地址，在代码中引用图片的线上地址
直接将图片拖到Jsbin中，得到一个线上的url，也可展示，多用于调试

5.HTML和CSS的书写规范

HTML
1. 用两个空格来代替制表符（tab）
2. 嵌套元素应当缩进一次（即两个空格）
3. 为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，<!DOCTYPE html>
4. 为 html 根元素指定 lang 属性，<html lang="en-us">
5. 明确声明字符编码，<meta charset="UTF-8">
CSS
1. 用两个空格来代替制表符（tab）
2. 为选择器分组时，将单独的选择器单独放在一行
3. 为了代码的易读性，在每个声明块的左花括号前添加一个空格
4. 声明块的右花括号应当单独成行
5. 每条声明语句的 : 后应该插入一个空格

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

上一篇下一篇

猜你喜欢

热点阅读