1-6.CSS基础

作者: guidetheorient | 来源:发表于2017-04-17 22:44 被阅读0次

一、CSS全称

CSS(Cascading Style Sheets)指层叠样式表,层叠的意思是多个样式可以按照样式规则的优先级形成一个层次结构。CSS实现了内容和样式的分离。

二、CSS引入方式? link 和@import 区别?

1.Best way to include CSS? Why use @import?

1.CSS引入方式

  • 内联样式:即在标签中使用style属性
    <h1 style="color: red; font-size: 20px;"></h1>
  • 内部样式表,html内部使用style标签
<head>
<style type="text/css">
  body {
    background-color: red
  }
</style>
</head>
  • 外部样式,通过html中使用link标签或在style标签中使用@import
<!--1-->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<!--2-->
<style>
     @import url("hello.css");
     @import "world.css";
</style>

2. link 和@import 区别

  • link是html中的标签,可以引入样式表,也可以引入其他文档,而@import是css语法,只能引入样式表
  • @import需要在style标签下
  • 当使用js控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的
  • @import中的css文件不能同时下载,link标签引入的css可以
  • 每一个@import都会生成一次http请求

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

  • 相对路径
    • css/a.css 当前目录下css文件夹中的a.css
    • ./css/a.csscss/a.css
    • b.css 当前目录下的b.css
    • ../imgs/a.png 当前目录的上一级目录下的imgs文件夹中的a.png
  • 绝对路径
    • /Users/hunger/project/css/a.css 文件在本地的绝对位置
  • 网站路径
    • /static/css/a.css 主域名下的static文件夹下的css文件夹下的a.css
    • css/a.css 网站上的相对路径。当前页面所在目录下css文件夹中的a.css
    • http://cdn.jirengu.com/kejian1/8-1.png 绝对寻址,网站主域名下的kejian1文件夹中的8-1.png

四、如何在js.jirengu.com上展示一个图片?

将图片上传至任一网站,得到url后,在jirengu.com的页面中用<img src=''url' alt="123"/>使用。在同一网站下可使用相对路径引入。

五、html和 css 的书写规范

  • 内容缩进
  • 建议使用小写
  • 不要使用内联样式
  • 建议使用h5的声明和utf-8的字符编码
  • id和class使用-连接多个单词
  • 在可以使用缩写的情况下,尽量使用属性缩写。
  • 属性有一定的书写顺序,如:
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

六、chrome 开发者工具功能区简要介绍

参考文献
1.Chrome开发者工具详解

chrome开发者工具功能区简介

相关文章

  • 1-6.CSS基础

    一、CSS全称 CSS(Cascading Style Sheets)指层叠样式表,层叠的意思是多个样式可以按照样...

  • 机械设备安装技术

    设备基础种类及应用 垫层基础允许产生沉降:大型储罐 浅基础扩展基础联合基础:轧机独立基础 深基础桩基础:适用于需要...

  • 基础,基础,基础

    如果有人现在问我,JAVA该怎么学,我会告诉他不要急于求成,少看视频,多练,多思考。但说到这里有人可能会反...

  • 【Android】知识点汇总,坚持原创ing

    Android基础 Java基础 Java基础——Java内存模型和垃圾回收机制 语法基础 语法基础——C语法基础...

  • Java 基础

    Java 基础01Java开发入门 Java 基础02Java编程基础 Java 基础03面向对象 Java 基础...

  • 零基础学画画从入门到放弃

    零基础应该怎么学画画?零基础那就从基础开始学啊!基础是什么?造型基础和色彩基础。 造型基础就是用点线面组成起码能让...

  • 面试题汇总

    1.Java基础面试问题 Java基础之基础问题 Java基础之面向对象 Java基础之数据结构 Java基础之I...

  • 基础基础还是基础

    这次去面试,还是被基础给打趴下了。 对于PHP7的新特性没有了解。 对于TP的新特性没有了解。 再一个就是独立完成...

  • 零基础学UI设计需要美术基础吗?

    零基础学UI设计需要美术基础吗?零基础学UI设计需要美术基础吗?零基础学UI设计需要美术基础吗?零基础学UI设计需...

  • 基础基础!

    人生中第一个自主设计的实验方案终于得到认可^O^在设计方案过程中认识到基础知识以及细心的重要性,还有半个学期可以努...

网友评论

    本文标题:1-6.CSS基础

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