CSS基础

作者: D一梦三四年 | 来源:发表于2017-09-01 03:09 被阅读0次

CSS的全称是什么?

Cascading Style Sheets 层叠样式表

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

CSS有4种引入方式

  1. 行内样式:直接在HTML的style属性中添加样式
<div style="background: blue; color: red;"></div>

缺点:太过混乱

  1. 内部样式:在HTML头部的<style>标签中添加样式
<head>
    <style>
        #div1 {
            backgoround: blue;
            color: red;
        }
    </style>
</head>

缺点:多个页面之间CSS的复用不够

  1. 链接方式:通过头部的<link>标签从外部引入CSS文件
<head>
    <link rel="stylesheet" href="style.css">
</head>

(推荐)

  1. 导入方式:通过@import导入外部CSS文件
<style>
        @import url(../css/style.css);
</style>

或者在CSS文件中@import url(../css/style.css)
缺点:性能差

link 与@import 的区别

  1. 范畴不同:link属于HTML的标签,通过其href属性来引入外部文件;@import属于CSS,所以@import导入语句应写在CSS中,且应该写在样式标的开头,否则无法正确导入外部文件
  2. 加载顺序的不同:页面在加载时,link引入的CSS会同时加载;而@import导入的CSS需要在页面完全载入之后再加载,所以浏览使用@import导入的页面时,最开始会没有样式(就是闪烁)
  3. 兼容性的区别:link是XHTML标签,无兼容问题;而@import是CSS2.1提出的,IE5以上的浏览器才能识别
  4. 是否支持JavaScript DOM改变:link支持使用DOM改变CSS样式;而@import不支持

以下这几种文件路径分别用在什么地方,代表什么意思?

  1. 相对路径(不以"/"开头):以当前文件的所在路径为基准来查找文件
  • css/a.css 当前文件夹下的css文件夹下的a.css文件
  • ./css/a.css 同上
  • b.css 当前文件夹下的b.css文件
  • ../imgs/a.png 父文件夹下的imgs文件下的a.png文件
  1. 绝对路径(以"/"开头):文件在硬盘或目录下的真实路径
  • /Users/hunger/project/css/a.css 根文件夹(根目录)/ Users文件夹/hunger文件夹/project文件夹/css文件夹/a.css文件
  • /static/css/a.css 根文件夹(根目录)/static文件夹/css文件夹/a.css文件
  1. 网站路径:文件上传到服务器后生成的地址链接
  • http://cdn.jirengu.com/kejian1/8-1.png 8-1.png在互联网上的地址

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

  • 将图片上传到服务器(如七牛),通过外部链接可直接调用

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

HTML书写规范

  • HTML页面开头使用<!DOCTYPE>指明标准模式
  • <html>标签应加上lang属性 <html lang="zh-cn">
  • 在HTML头部声明字符编码方式 <meta charset="UTF-8">
  • 属性名小写
  • 不要使用内联样式

CSS书写规范

  • 缩进使用4个空格
  • 每个属性声明末尾都要加分好
  • 注释统一用"/* */"
  • 类名小写,以中划线分隔
  • id采用驼峰式命名 myList
  • 去掉小数点前面的0
  • 属性值0后面不要加单位

截图介绍 chrome 开发者工具的功能区

Chrome开发者工具.png

相关文章

网友评论

      本文标题:CSS基础

      本文链接:https://www.haomeiwen.com/subject/asthjxtx.html