css入门

CSS全称

Cascading style Sheets, 层叠样式表

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

1.内部引入


注:写在head标签里

2.内联式

内容

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

3.外部引入(link, import)



 @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

你可能感兴趣的:(css入门)