初识CSS

1.CSS全称是什么

  • 层叠样式表( Cascading Style Sheets)

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

引入方式

CSS有三种引入方式,分别是内联样式,内部样式和外部样式

  1. 内联样式:

直接在HTML标签的style属性中设定CSS样式

<h1 style="color: red; font-size: 20px;"></h1>

2.内部样式:

在<style>标签内书写 CSS 代码(<style>标签一般位于HTML头部)

<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>
<h1>饥人谷</h1>

3.外部样式:

  • 链接式

通过HTML头部的<link>标签从外部引入CSS文件

<head>
  <link rel="stylesheet" type="text/css" href="index.css">
</head>
  • 导入式

使用 CSS 规则,通过@import导入外部CSS文件

<style>
        @import url(../css/style.css);
        @import "world.css";
</style>

link和@import的区别

  • 本质不同
    • link是HTML标签,可以放在HTML文件的任何位置
    • @import是CSS语法,应该位于样式文件或者< style>标签里
  • 加载顺序不同
    • link标签内的样式会随着页面内容加载同步加载
    • @import引用的文件则会等页面全部下载完毕再被加载,对于有的浏览器来说,在一些情况下,如果网页文件的体积比较大,则会出现先显示无样式的页面,闪烁一下之后再出现设置样式后的效果,从浏览者的感受来说,这是导入式的一个缺陷
  • 兼容性的差别
    • @import是CSS2.1提出的,所以老的浏览器不支持,@import只在IE5以上的才能识别,而link标签无此问题。
  • 使用DOM控制样式差别
    • 当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

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

  • HTML
    • id class建议单词全字母小写,单词间以 -分隔。同项目必须保持风格一致。
    • HTML 标签的使用应该遵循标签的语义。
    • 禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
    • 使用 button元素时必须指明 type 属性值。
    • 在 CSS 可以实现相同需求的情况下不得使用表格进行布局
  • CSS
    • 语法不区分大小写,但建议统一使用小写
    • 不使用内联的style属性定义样式
    • id和class使用有意义的单词,分隔符建议使用-(中横线)
    • 有可能就是用缩写
    • 属性值是0的省略单位
    • 块内容缩进
    • 属性名冒号后面添加一个空格
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 引言 本人在慕课网学习HTML+CSS基础课程,记录一些文字,方便自己回忆,也希望对大家有所帮助 上次给大家带来了...
    zhaolion阅读 12,065评论 18 272
  • 1 什么是CSS CSS(Cascading Style Sheets)层叠样式表,主要是用来修饰网页。CSS的语...
    IsGirl阅读 1,716评论 0 1
  • 1. CSS的全称是什么? CSS(CasCading Style Sheet)全称层叠样式表。 2. CSS有几...
    hui_mamba阅读 1,943评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,323评论 19 139