CSS的小开始

CSS（Cascading Style Sheets,层叠样式表）

引入方式

• 通过<link>标签引入（外部样式）
  为了成功加载一个外部样式表（外部样式表只能包含css注释和css规则，不能有其他文档标记，否则会造成一部分或者全部被忽略），link标签需要放置在head标签内部。
  候选样式表，即将rel属性的值设置为alternate stylesheet,大多数基于Gecko的浏览器都可以支持候选样式表，不过通过js,IE也可支持。
• 通过在<style>标签中（内部样式）写入样式，一定要设定type属性

图片.png

• 通过在<style>标签中的@import
  @import一定要写在style标签内，并且要在所有CSS规则之前

图片.png

• 通过在标签中加入style属性(内联)

图片.png

相对路径和绝对路径

• 相对路径
  相对于目前路径名的文件写法，只要开头不是（/）就不是绝对路径

• 绝对路径
  由根目录（/）开始写起的文件名或目录名称

• . 表示当前目录； .. 表示上一层目录
  以下这几种文件路径分别用在什么地方，代表什么意思?

  css/a.css （网站路径，css路径下的a.css文件）
  ./css/a.css （相对路径，当前路径下css下的a.css文件）
  b.css （相对路径，当前路径下的b.css文件）
  ../imgs/a.png （相对路径，当前路径的上一级下的a.png图片）
  /Users/hunger/project/css/a.css （绝对路径，根目录下的User文件夹下的hunger文件夹下的project文件夹下的css文件夹下的 a.css文件）
  /static/css/a.css （网站路径，代表网站服务器根目录static文件夹中的css文件夹中的a.css文件）
  http://cdn.jirengu.com/kejian1/8-1.png （8-1.png的网站路径）
  **ps:如果我想在js.jirengu.com上展示一个图片，需要怎么操作? **
  方法1：可以直接将图片上传到服务器，在页面使用这张图片；
  方法2：如果这个图片本来就存在网络上其他的服务器上，可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片

html和css的一些书写规范

1. 语法不分大小写，推荐统一使用小写
2. 内容与样式分离
3. id和class使用有意义的单词，分隔符建议使用-
4. 有可能尽量用缩写
   5.属性值是0的省略单位
5. 块内容缩进
6. 属性名冒号后添加一个空格

chrome 开发者工具

• 使用Elements面板检查和实时编辑页面的HTML和CSS
• 在 Elements 面板中检查和实时编辑 DOM 树中的任何元素。
• 在 Styles 窗格中查看和更改应用到任何选定元素的 CSS 规则。
• 在 Computed 窗格中查看和修改选定元素的框模型。
• 在 Sources 面板中查看在本地对页面所做的更改。
• 使用 Computed 窗格检查和编辑当前元素的框模型参数。 框模型中的所有值均可修改，只需点击它们即可。
  [参考]

图片.png