CSS的全称是什么?
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
@charset "utf-8";
h1 {
color: red;
font-size: 20px;
/*这是注释*/
}
a:hover{
color: red;
}
作用
- CSS不仅可以修饰静态网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
- CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS有几种引入方式? link 和@import 有什么区别?
css的四种引入方式:
1.内联方式
直接在 HTML 标签中的 style 属性中添加 CSS。
<div style="background: red"></div>
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div> 拥有相同的样式,你不得不重复地为每个 <div> 添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
2.嵌入方式
嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
<head>
<style>
.content {
background: red;
}
</style>
</head>
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
3.链接方式
链接方式指的是使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
4.导入方式
导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
link和@import区别:
1.引用的方式不同
link(外部引用):<link rel="stylesheet" href="xxx.css" type="text/css" / >
@import(导入式):@import url(xxx.css);
2.放置的位置不同
link一般放在head标签中
@import必须放在<style type="text/css">标签中
3.加载方式不同
link会和dom结构一同加载渲染
@import只能能dom结构加载完成以后才能渲染页面
4.link样式可以被js改变,@import引入的样式不可以
当使用 Javascript 控制 DOM 去改变样式的时候,只能使用 link 方式,因为 @import 眼里只有 CSS ,不是 DOM 可以控制的;
5.兼容性不同
link是在xhtml的标签,兼容IE各个版本
@import是css2.1时提出来的,只能在IE6以上进行解析。
6.加载内容不同
link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;
@import属于CSS范畴,只能加载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 |
绝对路径 |
指定地址文件 |
/static/css/a.css |
网站相对路径 |
在服务器上通过该路径寻找相关文件 |
http://cdn.jirengu.com/kejian1/8-1.png |
网站路径 |
网上地址 |
如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
本地图片:上传到图窗,获取url
网上图片:直接引入图片的url
html和 css 的书写规范
- 语法不区分大小写,但建议统一使用小写
- 不使用内联的style属性定义样式
- id和class使用有意义的单词,分隔符建议使用-
- 有可能就是用缩写
- 属性值是0的省略单位
- 块内容缩进
- 属性名冒号后面添加一个空格
chrome 开发者工具的功能区
1、先打开谷歌浏览器,然后打开调试界面,打开方式有三种 :
- 第一:按F12,
- 第二:shift+ctrl+i,
- 第三:鼠标右键点审查元素
2、功能区介绍
Element 标签页: 用于查看和编辑当前页面中的 HTML 和 CSS 元素。
Console 标签页:用于显示脚本中所输出的调试信息,或运行测试脚本等。
Source 标签页:用于查看和调试当前页面所加载的脚本的源文件,可以打断点进行调试。
Network 标签页:用于查看 HTTP 请求的详细信息,如请求头、响应头及返回内容等。
**TimeLine 标签页: **用于查看脚本的执行时间、页面元素渲染时间等信息。
Profiles 标签页:用于查看 CPU 执行时间与内存占用等信息。
Resource 标签页:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件,图片等。
Audits 标签页:用于优化前端页面,加速网页加载速度等。