CSS基础

1、CSS 的全称是什么?

CSS全称Cascading Style Sheets,即层叠样式表,用于为HTML文档定义布局样式,例如为HTML的元素颜色、背景图像、定位等等。

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

引入方式(主要运用外部css的方式):

  • 内联css 如下

    This

  • 内部css 即在html文档的head中加入style标签

  • 外部css 在html中引入外部链接,如下

  • 导入css@import url()

link与@import的区别

  • 使用的差别:本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别,link属于XHTML标签,可加载CSS和其他资源,而@import完全是CSS提供的一种语法,只加载CSS。语法如下:
CSS基础_第1张图片
1.png
  • 加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时性能较差

  • .兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题

  • 使用DOM控制样式时的差别:当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。

3、绝对路径、相对路径和网站路径

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          //绝对路径,本地绝对路径下的a.css文件
/static/css/a.css          //以绝对路径的方式在服务器中寻找css文件夹下a.css文件
http://cdn.jirengu.com/kejian1/8-1.png   //需找网站上的8-1.png图片

4、CSS书写规范

  • 语法不区分大小写,但应该得到统一(建议小写)
  • 不使用内联的style属性定义样式
  • 属性值为0的省去单位
  • ID和class使用比较规范有意义的单词,分隔符使用-
  • 属性名冒号后面加上一个空格
  • 块内容有缩进

你可能感兴趣的:(CSS基础)