CSS基础

2017-06-09 本文已影响0人 QQQQQCY

1.CSS的全称是什么?

CSS的全称是Cascading Style Sheet，汉语意思是「级联样式表」，通常又称为“风格样式表（Style Sheet）

三种

<h1 style="color: red; font-size: 20px;"> Hello World </h1>

<style>
    h1{
      color: red;
      font-size: 20px;
    }
</style>
<h1>Hello World  </h1>

<head>
        <link rel="style sheet"  type="text/css"  href="css/style.css">
</head>

  <style>
    @import url("hello.css");
    @import "world.css";
  <\style>

link 和@import 区别如下

从属差别
link是XHTML中的标签，除了用来引用CSS之外，还能加载RSS等其他事物，@import属于CSS范畴，只能加载CSS
加载顺序差别
link引用的CSS会和HTML同时加载，@import会在HTML渲染完之后再开始加载
兼容性差别
link标签可以说没有浏览器不能识别，@import是CSS 2.1中提出的，老浏览器不能识别，IE5以上才能识别（不过现在应该没有人用IE5以下的版本了）
使用DOM控制样式时的区别
当使用JavaScript控制DOM来改变样式的时候，只能使用link标签，因为@impotent不是DOM可控的
@import可以用在CSS中嵌套使用（注意写在最前面，否则无法生效）

路径	含义	分类
`css/a.css`	当前文件位置下的 css 文件夹中的 a.css 文件	相对路径
`./css/a.css`	当前文件位置下的 css 文件夹中的 a.css 文件	相对路径
`b.css`	当前文件位置下的 b.css 文件	相对路径
`../imgs/a.png`	当前文件位置的上一级地址位置下的 imgs 文件夹中的 a.png 文件	相对路径
`/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`	相应服务器上网站根目录下 kejian1 文件夹中的 8-1.png 文件	网站路径

将所需图片上传至任意图床，获取到该图片的url，然后在需要用该图片的地方引入它的url

Elements 元素
查找网页源代码HTML中的任一元素，手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
自由操纵DOM和CSS来调整页面的布局和设计
左上第一个按钮点击之后，再选择页面中的任何元素，Elements窗口中会实施跳转到选中的元素的源码

Elements 元素

左上第二个按钮点击之后，可以模拟出各种尺寸的移动设备

Device
Console 控制台
在开发期间，可以使用控制台面板记录诊断信息。或者使用它作为 shell，在页面上与JavaScript交互

Console 控制台
Sources 源代码
在“源代码”面板中，可以断点调试 JavaScript 。或者通过Workspaces（工作区）连接本地文件，使用开发者工具实时编辑

Sources 源代码
Network 网络
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这些信息来进行网络性能优化

Network 网络

Performance 性能
使用时间轴面板，可以通过记录并分析页面内的各种事件，由此可以针对性的进行优化，提供网页运行的性能

erformance 性能
Application 资源面板
记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等

Application 资源面板

Security 安全

Audits 审计