CSS相关知识

作者: leocz | 来源:发表于2017-05-16 17:40 被阅读0次

CSS是什么

css 全称Cascading Style Sheets, 层叠样式表,用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)

CSS的引入方式,link与@import的区别

引入方式:

  • 内联方式
    <p style="color:red,font-size:16px,">我是一个段落</p>
  • 内部样式
<style>
  p{
  color: red;
 font-size: 16px;
}
</style>
  • 外部样式
通过link方式
<head>
  <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
通过@import方式
<head>
  @import url(index.css)  /*路径引号可有可无,也可以写成  @import "index.css" */
</head>
  • link与@import的区别如下
    • link 是 XHTML 标签,除了加载 CSS 外,还可以定义RSS等其他事务;@import 是 CSS 的一个语法,只能加载 CSS 。
    • link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。
    • link是 XHTML 标签,无兼容问题;@import 是在 CSS2.1 提出的,低版本的浏览器不支持,只有IE5以上才能识别。
    • link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。

为体现内容,样式,行为分离原则,目前的大多数网页的css是通过link来引入。

常见文件路径写法

相对路径

  • css/a.css 当前目录css文件夹里面的 a.css 文件
  • ./css/a.css 同上,上面的写法不过是将./省略而已
  • b.css 当前目录下的 b.css 文件
  • ../imgs/a.png 当前目录的上一级目录里面 imgs 文件夹里面的 a.png 文件

绝对路径
/user/hunger/project/css/a.css 本地电脑 user/hunger/project/css文件夹下的a.css文件

网站路径
/static/css/a.css 网站相对路径 网站根目录下static文件夹下的css文件夹下的 a.css 文件
http://cdn.jirengu.com/kejian1/8-1.png 网上的一张图片,通过网站路径引入一张图片

在 js.jirengu.com 上展示一张图片

首先将图片上传到饥人谷的服务器,然后在页面上将img的scr属性设置成刚刚上传图片的路径即可。

html和css的书写规范

html书写规范

  1. html中不要混入样式代码
  2. id和class的命名要有意义
  3. html不区分大小写,但统一小写
  4. 做好缩进,使代码便于阅读
  5. link 中type属性可省略,默认值就是我们需要的值

css书写规范

  1. 属性值时0的可以省略单位,属性值是 0.2 等可以省略0 写成 .2
  2. 一些可缩写的属性就缩写,既精简代码又便于阅读
  3. 在需要写多个样式的时候,影响元素位置的属性写在前面,颜色等外观写在后面
  4. 简写形式的十六进制值,例如,用 #fff 代替 #ffffff
  5. 所有声明语句都应当以分号结尾

相关文章

  • CSS相关知识

    CSS是什么 css 全称Cascading Style Sheets, 层叠样式表,用来为结构化文档(如 HTM...

  • html和CSS基础课程(7-1 7-2 7-3 7-4)

    7章 CSS样式基本知识 这一章节主要讲解与CSS样式相关的基础知识:CSS样式的位置及相关的优先级,为后面的CS...

  • CSS 详细相关知识!!

    CSS 被称为层叠样式表,那么首先我们要怎么引用呐? 【1]CSS 引用有四种方式,如下 (1)行间样式 直接在d...

  • 前端入门——CSS3 基础记录

    HTML 基础知识已经过了一遍了,按照顺序,开始看 CSS 相关知识。众所周知,现在 CSS 最新标准是 CSS3...

  • css布局

    最近在学习css相关的知识,本文主要总结一些css布局相关的知识。 一、左右布局和左中右布局 左右布局和左中右布局...

  • HTML之CSS——初识CSS

    更多关于CSS的相关知识可以访问如下网站:https://www.w3school.com.cn/css/css_...

  • CSS基础

    介绍css相关知识 和 非布局属性。 css:Cascading Style Sheet 层叠样式表,简而言之 就...

  • HTML-CSS布局-4

    HTML-CSS布局相关元素小心得 在这里分享给大家一些HTML-CSS的相关知识,供新人学习,老人查阅,共勉。-...

  • css相关知识点

    width写在前面,height写在后面,用@文件或者文件夹跟小写,用../../ , 之类文件或者文件夹跟大写

  • H5+C3

    一、基础知识要求 1.各种标签的使用以及相关的CSS属性 (CSS是Cascading Style Sheet 的...

网友评论

    本文标题:CSS相关知识

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