CSS基础

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是什么? CSS全称是Cascading Style Sheets,简写为CSS,称作:层叠样式表,又称...
    青鸣阅读 867评论 0 1
  • CSS的全称是什么? CSS全程是Cascading Style Sheets层叠样式表 CSS有几种引入方式? ...
    Taaaaaaaurus阅读 380评论 0 1
  • CSS的全称是什么? CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定...
    饥人谷_全阅读 449评论 0 1
  • 1.CSS简介 CSS 的全称是Cascading Style Sheets,层叠样式表 2.CSS的引入方式 内...
    毛毛独角兽阅读 334评论 0 0
  • 周冰洁阅读 151评论 0 1