1.CSS简介:
- CSS(Cascading Style Sheets):层叠样式表
- 样式定义如何显示 HTML 元素,样式通常存储在样式表中
2.CSS引入方式
- 内联样式:
<h1 style="color:red; font-size: 20px;"></h1>
- 内部样式:
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
- 外部样式:
- 用link标签来引入(link是HTML的一个标签)
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
* 用@import来引入(@import 是css的语法)
<style>
@import url("hello.css");
@import "world.css";
</style>
- 样式表优先顺序:内联样式 > 内部样式 > 外部样式 > 浏览器缺省设置
3.文件路径
- 相对路径:以文件(HTML页面)所在路径为基准来查找相关文件
- css/a.css:在当前路径(HTML文件所在路径)下存在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:在本地计算机上可以通过该路径找到a.css文件
- 网路路径:例如当前页面的地址为http://localhost:8080/code/index.html, 在该HTML文件中存在以下路径:
- /static/css/a.css:以绝对路径的方式在服务器中寻找a.css文件,即在服务器上直接通过该路径寻找相关文件
- css/a.css:以相对路径的方式在服务器中寻找a.css文件,即在index.html文件所在路径(目录)中寻找css文件夹下的a.css文件
- http://cdn.jirengu.com/kejian1/8-1.png: 通过该地址可以找到网络上的8-1.png文件
4.在js.jirengu.com上展示一个图片
-
打开某图床网站,上传所需图片,得到图片的链接
-
在img标签的src属性中填写图片的网络路径,即可展示图片
5.html和css书写规范:
HTML常用规范(强制):
- 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
- class 必须单词全字母小写,单词间以 - 分隔。
- 对于无需自闭合的标签,不允许自闭合,例如input、br、img、hr等
- 对 HTML5 中规定允许省略的闭合标签,不允许省略闭合标签。
- 使用 HTML5 的 doctype 来启用标准模式,建议使用大写的 DOCTYPE。
- 页面必须使用精简形式,明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
- 引入 CSS 时必须指明 rel="stylesheet"。
- 页面必须包含 title 标签声明标题。title 必须作为 head 的直接子元素,并紧随 charset 声明之后。
- 有文本标题的控件必须使用 label 标签将其与其标题相关联。
<label><input type="checkbox" name="confirm" value="on"> 我已确认上述条款</label>
- 使用 button 元素时必须指明 type 属性值。
- 其他建议规范:HTML编码规范
CSS常用规范(强制):
- 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
- 选择器 与 { 之间必须包含空格。
- 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。
- 列表型属性值 书写在单行时,, 后必须跟一个空格。
font-family: Arial, sans-serif;
- 每行不得超过 120 个字符,除非单行不可分割。
- 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。
/* good */
.post,
.page,
.comment {
line-height: 1.5;
}
/* bad */
.post, .page, .comment {
line-height: 1.5;
}
- >、+、~ 选择器的两边各保留一个空格。
- 属性选择器中的值必须用双引号包围。
- 属性定义必须另起一行。
- 属性定义后必须以分号结尾。
- 文本内容必须用双引号包围。
- 当数值为 0 - 1 之间的小数时,省略整数部分的 0。
- url() 函数中的路径不加引号。
- 长度为 0 时须省略单位。
- RGB颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb()。
- 颜色值可以缩写时,必须使用缩写形式。
- 颜色值不允许使用命名色值。
- 需要在 Windows 平台显示的中文内容,其字号应不小于 12px。
- 其他建议规范:CSS编码规范
6.chrome开发者工具介绍:
-
移动开发:
-
页面与样式:
-
JavaScript相关:
-
资源相关:
网友评论