CSS 简介
2017-07-07 本文已影响88人
_空空
CSS 是什么
- CSS全称为“层叠样式表（Cascading Style Sheets）”，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言
@charset "utf-8"; /* 如果存在中文注释，加上这句最好 */
h1 {
color: red;
font-size: 20px;
/* 这是注释 */
}
a:hover{
color: red;
}
引入CSS
-
引入方式：
- 在
<head>里面使用<link rel="stylesheet" href="xxx.css">引用外部文件 - 在
<head>中的<style>标签里面写样式 - 在要使用样式的元素中写
<p style="xxx:xxx;"> - 在
<style>里面写上@import url(http://xxx.css);
- 在
内联引用CSS
-
内联式（行间样式）：如果只是想为单个元素指定一些样式，而不需要嵌套或外部样式表，可以使用HTML的style属性来设置一个行间样式
- 注意：行间样式若存在多个
style属性，只能识别第一个
- 注意：行间样式若存在多个
<p style="color: red; font-size: 15px;">这里的文字是红色，字号15px。</p>
<!-- 要写在元素的开始标签里 -->
<!-- css样式代码要写在 style="" 双引号中，如果有多条css样式代码设置可以写在一起，中间用英文分号 ; 隔开 -->
内部引用CSS
-
嵌入式：如果我们要对多个地方进行相同的css样式设置，使用内联式步骤会很繁琐。嵌入式css样式，就是把css样式代码写在
<style type="text/css"></style>标签之间- 注意：嵌入式css样式必须写在
<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间
- 注意：嵌入式css样式必须写在
<style type="text/css">
span {
color: red;
}
</style>
通过 link 标签外部引用CSS
-
外部式（外联式）：就是把css代码写在一个单独的外部文件中，这个css样式文件以
.css为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到Html文件内，如下所示- 注意：
- css样式文件名应以有意义的英文进行命名，如“main.css”
-
rel="stylesheet" type="text/css"是固定写法不可修改 -
<style>标签和<link>标签可以写在<body>标签里面。但一般我们会写在<head>标签之内
- 注意：
<head>
<meta charset="utf-8">
<title>外联式</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!-- 在link标记中rel和href属性是必须的，type属性和media属性可省略 -->
<!-- 样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释 -->
<!-- 若CSS文件中存在除了CSS样式和CSS注释的其他标记，则会导致在该标记后面的CSS样式将无法被识别 -->
</head>
- 三种方法的优先级：关于CSS的优先级先后问题，与外部、内部、行间这三种引入CSS的方式关系不大，主要与重要性、特殊性和出现顺序有关。在重要性相等的情况下，行间样式的优先级最高，外部样式和内部样式无可比性（遵循就近原则，离被设置元素越近优先级别越高）
<!-- 实例 -->
<head>
<meta charset="utf-8">
<title>三种方法的优先级</title>
<!-- 外部式设置文本颜色为蓝色 -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- 嵌入式设置文本颜色为红色 -->
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<!-- 内联式设置文本颜色为粉色 -->
<span style="color: pink;">超酷的互联网</span>
</body>
-
候选样式表：将
rel属性的设置为alternate stylesheet可以定义候选样式表，只有在用户选择这个样式表时才会用于文档表现。如果浏览器能使用候选样式表，它会使用link元素的title属性值生成一个候选样式列表，可在菜单栏中查看 -> 样式中进行选择。（IE和firefox支持）- 注意：若一个候选样式表没有设置
title，那么它将无法在候选样式列表中出现，也就无法被引用
- 注意：若一个候选样式表没有设置
<link rel="stylesheet" type="text/css" href="sheet1.css">
<link rel="alternate stylesheet" type="text/css" href="sheet2.css" title="sheet2">
通过 @import 引用CSS
- 与
link类似，@import指令用于指示Web浏览器加载一个外部样式表，并在表现HTML文档时使用其样式。唯一的区别在于命令的具体语法和位置。@import指令常用于样式表需要使用另一个样式表中的样式的情况 -
@import必须出现在style元素中，且要放在其他CSS规则之前，否则将根本不起作用 - 可以使用
@import指令导入多个CSS样式表，且可以使用 media 来限制应用场景
<style type="text/css">
/* 使用 url() 方式，加不加引号都可以 */
@import url(sheet1.css) all;
@import url("sheet2.css");
/* 若不使用 url() 方式，则需要加引号 */
@import "sheet3.css";
body{
background-color: red;
}
</style>
link 和 @import 的区别
- 老祖宗的差别。link 属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义 rel 连接属性等作用；而 @import 是CSS提供的，只能用于加载CSS;
- 加载顺序的差别。页面被加载的时，link 会同时被加载，而 @import 引用的CSS会等到页面被加载完再加载
- 兼容性的差别。@import 是CSS2.1 提出的，只在IE5以上才能被识别，而 link 是XHTML标签，无兼容问题;
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用 link 标签，因为 @import 不是dom可以控制的
文件路径
// 相对路径
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 // 一般是指在相对本地路径找到User文件夹下 hunger 文件夹下 project 文件夹下 css 文件夹下 a.css 文件
// 网站路径
// 假设将个人电脑作为站点，localhost:8080
/static/css/a.css // 一般情况下在当前项目的 根目录下的 static 文件下的文件下的a.css 文件
static/css/a.css // 相对路径：当前项目对应的目录下的 static 文件下的文件下的a.css 文件
http://cdn.jirengu.com/kejian1/8-1.png // 一般情况下是引用http://cdn.jirengu.com这个CDN服务下的kejian1文件下的8-1.png
- 如果要在网站上展示一个图片，需要怎么操作?
- 第一种是将图片上传到该网站的服务
- 第二种是生成图片的链接，然后引用图片。
chrome 开发者工具
- Elements 元素：和对网页右键查看源代码有所不同，是经过js代码执行以后真实的html代码，因此直接改动就会在页面生效。同时进入该面板以后还会有额外的一块功能区出现，这里可以查看和修改样式，也可以查看元素绑定的事件等
- Console 控制台：在这里可以自由的撰写js代码，可以使用浏览器提供的内置对象，同时可以自己新定义对象和函数。在控制台输入代码和许多IDE一样提供了自动补全功能
- Source 资源：查看当前页面引用的资源文件
- Network 网络：查看页面的网络请求（打开开发者工具并且选择开启录制以后以后才会记录），这里可以开启过滤，通过关键字或者请求的类型来更快的定位想查找的请求，概况里可以查看请求的方式，状态，大小，来源等属性
- Application 应用：cookie，local storage 等信息
