css入门

CSS全称

Cascading style Sheets, 层叠样式表

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

1.内部引入

<style>
        p{
            background-color: yellow;
        }
</style>

注：写在head标签里

2.内联式

<p style="border: 3px solid #fff; border-radius: 3px;">内容</p>

注：写在具体的元素标签里

3.外部引入（link, import）

<link rel="stylesheet" href="index.css">

 @import url(./index.css);

注：写在head标签里

link与import区别

1.link会在页面显示之前全部加载完，import是在文件读取完之后才加载。在网络环境差的情况下，import的使用可能会出现瞬间没有样式，而后再会刷出有样式的页面。
2.@import可能低版本的浏览器会有不支持的情况。
3.使用dom控制样式时的差别。当使用js控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4.大部分都通用的地方，用link来做比较适合，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
  一般不推荐绝对路径，路径写太死，换个地方就找不到文件了
  网络路径:
• /static/css/a.css
• http://cdn.jirengu.com/kejian1/8-1.png

在js.jirengu.com上展示一个图片

图片上传到网络 生成图片地址 然后连接进jsbin
在本地开个服务器 ，通过locoalhost加载图片 然后连接进jsbin

列出5条以上html和 css 的书写规范

• 语法不区分大小写，建议全小写
• 不使用内联样式
• id和class的命门用有意义的单词，分隔符建议用-
• 属性值是0的时候单位不写
• 代码块内容缩进
• 属性名冒号后面加个空格

chrome审查元素

title