CSS

2017-06-25 本文已影响0人 ezrealor

css全称

Cascading Style Sheet （层叠样式表）
CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。
层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

css有几种引入方式

内联样式

<div style="color:red; border:1px solid"></div>

内部样式

<head>
 <style>
  h1{
     color:blue;
   }
 </style>
</head>

外联样式

<link type="text/css" rel="stylesheet" href="index.css">

导入样式

<style>
 @import url()
</style>

link和@import的区别

导入的语法不同
link 和 import 语法结构不同，前者 <link> 是 html 标签，只能放入 html 源代码中使用， link 标签除了可以加载 CSS 外，还可以做很多其它的事情，比如定义 RSS ，定义 rel 连接属性等， @import 看作为 css 的样式，就只能加载 CSS 了
使用 link 方式，浏览器将 CSS 文件和 HTML 的主体部分一同装载，所以显示出来的页面从开始就是带样式效果的；而采用 @import 方式，浏览器则会先装载完整个 HTML 文件后再装载 CSS 文件
当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的
link 是 HTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持

以下几种文件路径什么意思?

css/a.css
相对路径当前目录下css下的a.css文件

./css/a.css
相对路径等同于css/a.css

b.css
相对路径当前目录下的b.css文件

../imgs/a.png
相对路径当前目录的父目录下imgs下的a.png文件

/User/hunger/projects/css/a.css
绝对路径本地电脑下的a.css文件

/static/css/a.css
网站路径网站根目录下 static目录下的css目录下的a.css文件

http: //cdn.jirengu.com/kejian1/8-1.png
网站路径在域名下的kejian1下的/8-1.png文件

如果我想在网站上展示一个图片，需要怎么操作?

将本地图片上传到线上某个网址，然后采用网络路径引用；
将本地图片上传到网站服务器，然后采用相对路径引用；

css 的一些书写规范

使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符
选择器与 { 之间必须包含空格
属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格
列表型属性值书写在单行时，, 后必须跟一个空格。
每行不得超过 120 个字符，除非单行不可分割。
+、~ 、 > 选择器的两边各保留一个空格。
更多css书写规范：https://github.com/fex-team/styleguide/blob/master/css.md

chrome 开发者工具

chrome开发者

Elements(元素面板): 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，可以自由的操作DOM和CSS来迭代布局和设计页面
Console(控制台面板): 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
Sources(源代码面板): 主要用来调试js，设置断点来调试 js，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。
Network(网络面板): 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等. 使用网络面板了解请求和下载的资源文件并优化网页加载性能。
Performance(性能面板): 使用时间轴面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能。在 Chrome 57 之后时间线面板更名为性能面板.
Memory(内存面板): 如果需要比时间轴面板提供的更多信息，可以使用“配置”面板，例如跟踪内存泄漏. 在 Chrome 57 之后分析面板更名为内存面板.
Application(应用面板): 使用资源面板检查加载的所有资源，包括IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。在 Chrome 52 之后资源面板更名为应用面板.
Security(安全面板): 使用安全面板调试混合内容问题，证书问题等等。
Audits(审计面板)：分析页面加载情况优化前端页面

CSS