css入门

CSS全称

Cascading style Sheets, 层叠样式表

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

1.内部引入

<style>
        p{
            background-color: yellow;
        }
</style>

注:写在head标签里

2.内联式

<p style="border: 3px solid #fff; border-radius: 3px;">内容</p>

注:写在具体的元素标签里

3.外部引入(link, import)

<link rel="stylesheet" href="index.css">

 @import url(./index.css);

注:写在head标签里

link与import区别

1.link会在页面显示之前全部加载完,import是在文件读取完之后才加载。在网络环境差的情况下,import的使用可能会出现瞬间没有样式,而后再会刷出有样式的页面。
2.@import可能低版本的浏览器会有不支持的情况。
3.使用dom控制样式时的差别。当使用js控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4.大部分都通用的地方,用link来做比较适合,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
    一般不推荐绝对路径,路径写太死,换个地方就找不到文件了
    网络路径:
  • /static/css/a.css
  • http://cdn.jirengu.com/kejian1/8-1.png

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

图片上传到网络 生成图片地址 然后连接进jsbin
在本地开个服务器 ,通过locoalhost加载图片 然后连接进jsbin

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

  • 语法不区分大小写,建议全小写
  • 不使用内联样式
  • id和class的命门用有意义的单词,分隔符建议用-
  • 属性值是0的时候单位不写
  • 代码块内容缩进
  • 属性名冒号后面加个空格

chrome审查元素

title
title
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1,CSS的全称是什么? 答:CSS的全称是CASCADING STYLE SHEET,层叠式样式表。 2,CSS...
    小松鼠hust阅读 305评论 0 1
  • 一,CSS是什么? 定义:CSS全称是层叠样式表; 作用:为页面内容设置好看的模样,在整个页面中,CSS就像是人的...
    大春春阅读 501评论 0 2
  • 1、CSS的全称是什么? CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制...
    大胡子歌歌阅读 207评论 0 0
  • 1.CSS的全称是什么? 层叠样式表 (Cascading Style Sheets) 2.CSS有几种引入方式?...
    饥人谷_林嘉俊阅读 498评论 0 1
  • 文章简要:CSS介绍DIV+CSS的优点CSS 语法CSS新建格式 CSS入门 CSS介绍 CSS(Cascadi...
    Locdee_落地阅读 583评论 6 1