css基础

CSS全程是什么

css全称:层叠样式列表(cascading style sheets)

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

css引入方式:

  • 内联样式

<h1 style="color: red;font-size: 30px">饥人谷</h1>

  • 内部样式






    <style type="text/css">
      h1{
            color: red;
                font-size: 30px;
    }
    </style>
    <h1>饥人谷</h1>
  • 外部样式

        <head>
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>


    <style>
        @import url("hello.css");
        @import "word.css"
    </style>
  • 浏览器默认样式

link和@import的区别:

  • link是html标签,@import是css(一种CSS语法)
  • link是写在html中的,@import是写在css文件中的
  • 加载的时候link标签引用的css文件会和html主体部分一起加载,@import用法的需要在加载完html之后才会加载css
  • 当使用JavaScript控制DOM去改变样式的时候,只能使用link标签,因为@import不是DOM可以控制的
  • @import可以在CSS中再次引入其他样式表

以下这几种文件分别用在什么地方?代表的意思

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 绝对路径,表示Users文件目录下hunger文件目录下project文件目录下css目录下的a.css文件
static/css/a.css 主域名下static文件目录下css文件目录下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 网站路径,http://cdn.jirengu.com网站的kejian1目录下的8-1.png文件

如果我想在js.jirengu.com上展示一个图片,需要怎么操作?

  • 将图片文件夹传至服务器上使用相对路径
  • 使用网站路径链接的方式

书写规范

  • 语法不区分大小写,一般情况下都使用小写
  • 不使用内联的style属性定义样式
  • id和class使用有意义的单词,分隔符使用-
  • 有可能就是用缩写
  • 属性值是0的省略单位
  • 块内容缩进
  • 属性名冒号后面添加一个空格

截图介绍 chrome 开发者工具的功能区

Instagram Pic
  • element:用于查看和编辑当前页面中的 HTML 和 CSS 元素;编辑html标签和css样式;测试标签的边界条件
  • Network:可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间,当然也能看到哪些资源不能成功加载。此外,还可以查看HTTP的请求头,返回内容等
  • Source:用于查看和调试当前页面所加载的脚本的源文件;断点调试
  • Resource:用于查看当前页面所请求的资源文件,如 HTML,CSS 样式文件等
  • console:用于调试JS
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、css是什么? CSS全称是Cascading Style Sheets,简写为CSS,称作:层叠样式表,又称...
    青鸣阅读 889评论 0 1
  • CSS的全称是什么? CSS全程是Cascading Style Sheets层叠样式表 CSS有几种引入方式? ...
    Taaaaaaaurus阅读 382评论 0 1
  • 一.CSS的全称是什么? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTM...
    Sunset125阅读 423评论 0 1
  • CSS的全称是什么? 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(...
    阿鲁提尔阅读 234评论 0 3
  • 笔名:车文老妖 简介:自从那件事之后,她们的身边总有怪事发生,直到那一天… 第一章 田小雨:依晨…我觉得最近老是有...
    旁趣PUNCH阅读 300评论 0 0