CSS基础

作者: 饥人谷_WRMSUXI | 来源:发表于2017-09-14 00:09 被阅读0次

CSS的全称是什么?

Cascading Style Sheets 层叠样式表

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

引入方式

  • 内联样式:style属性直接写在元素标签里
<h1 style="color:red;font-size:15px"></h1>
  • 内部样式:将样式写在<style></style>标签内。(<style></style>标签一般写在<head></head>内)
<style>
 h1{
      color:red;
      font-size:15px;
     }
</style>
  • 外部样式:样式写在.css文件中,再在html中引用样式文件
    引用样式文件的方法有两种:
    1. link标签
<link rel="stylesheet"  type="text/css" href="XXX.css"></link>
  1. @import引入
<style>
    @import url("XXX.css");
    @import "XXXX.css";
</style>

link 和@import 的区别

 1. link是html的标签,而@import是CSS语法,@import必须写在<style></style>标签内或.css文件内。
 2. link在页面加载时同时加载,而@import引用的css会在页面加载结束后再加载。
 3. link没有兼容性问题,而@import只有IE5以上才能识别。
 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 绝对路径 表示根目录下的对应路径下的a.css文件
  • /static/css/a.css 网站路径 表示网站服务器根目录下的对应路径下的a.css文件
  • http://cdn.jirengu.com/kejian1/8-1.png 网站路径 表示互联网上8-1.png文件对应的url

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

将图片上传到服务器,然后用相对路径读取

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

  • 不区分大小写,但建议统一小写
  • 不使用内联的style样式属性定义样式
  • id和class使用有意义的单词,分隔符建议使用-,尽量使用缩写
  • 属性值是0的省略单位
  • 块内容缩进
  • 属性名冒号后添加一个空格

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

Paste_Image.png

相关文章

网友评论

    本文标题:CSS基础

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