css基础

css的全称： cascading style sheets 层叠样式表

      css是一种用来表现HTML或XML等文件样式的计算机语言。
      CSS不仅可以静态地修饰网页，
      还可以配合各种脚本语言动态地对网页各元素进行格式化

CSS有几种引入方式? link 和@import 有什么区别?

css引入方式有三种

• 内联样式
  <h1 style="color:red"></h1>
• 内部样式，一般放在head里
  <style type="text/css>
  h1{
  color:red;
  }
  </style>
• 外部样式
  <link rel="style/sheet" type="text/css" href="index.css">
  @import url("hello.css");
  link 和import 的区别
  1）link是xhtml样式，可以做引入其他的语言，import属于css范围，只能引入css
  2）link 引用css时，在页面载入时候，同时加载，import需要页面加载完后再加载
  3）link无兼容问题，import是css2.1提出的，个别浏览器可能不支持
  4）link支持用JavaScript控制DOM去改变样式，而import不支持

文件路径

• 相对路径
  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 本地电脑Users/hunger/project/css/下的a.css 文件

• 网站路径
  /static/css/a.css 网站相对路径
  http://cdn.jirengu.com/kejian1/8-1.png 网站的一张图片，采用网站路径进入一张图片

如果我想在js.jirengu.com上展示一个图片，需要怎么操作?

将要显示的图片，放到饥人谷服务器存放照片的路径下，在页面上用img标签引入图片，src写服务器的相对路径，从而将图片显示在网站上，可以通过css来调节图片的大小，达到大小合适美观的目的

html和 css 的书写规范

1、语法不区分大小写，建议统一用小写
2、不使用内联的style属性定义样式
3、id和class使用有意义的单词，分割符用-
4、有可能单词可以用缩写
5、属性值是0可以省略单位
6、块级内容缩进
7、属性名冒号后面加一个空格

chrome 开发者工具的功能

Paste_Image.png