css基础

作者: 小囧兔 | 来源:发表于2017-04-25 20:11 被阅读0次

    CSS的全称是什么?

    css的全称是层叠样式表(Cascading Style Sheet,CSS),是一种指定HTML文档视觉表现的标准,CSS的本意是想让视觉设计师使用的,它允许设计师精确指定文档元素的字体、颜色、外边距、缩进、边框、定位等。

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

    css有以下三种引人方式:
    1.内联方式
    内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
    如:

      <div style="height: 200px;width: 200px;"></div>
    
    

    2.内嵌方式
    内嵌方式是在 HTML 头部中的 <style> 标签下书写 CSS 代码
    如:

    <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <title>Title</title>
       <style>
           div{height: 300px;height: 300px;}
       </style>
    </head>
    <body>
    </body>
    </html>
    

    3.外部链接方式
    外链方式是在 HTML 头部的 <head> 标签之间引入外部的 CSS 文件。
    如:

       <head>
            <meta charset="utf-8">
            <link href="css/style.css" rel="stylesheet" type="text/css" />
        </head>
    

    link 和@import 的区别

    link 属于 HTML标签,通过 <link>标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在 样式 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
    @import是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
    当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import引用的文件则会等页面全部下载完毕再被加载;

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

    css/a.css
    ./css/a.css
    b.css
    ../imgs/a.png
    /Users/hunger/project/css/a.css
    /static/css/a.css
    http://cdn.jirengu.com/kejian1/8-1.png
    

    css/a.css、./css/a.css、 b.css、../imgs/a.png都是相对路径。
    css/a.css和./css/a.css表示当前目录下css文件夹的a.css文件。
    b.css表示当前文件夹下的b.css文件。
    ../img/a.png表示上级目录中img文件夹下的a.png图片。
    /Users/hunger/project/css/a.css表示绝对路径,电脑本地/Users/hunger/project/css/文件夹下的a.css文件。
    /static/css/a.css表示服务器上的相对路径,
    http://cdn.jirengu.com/kejian1/8-1.png 表示网络上的绝对路径。

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

    1.把图片上传到服务器上存放图片的文件夹,引用服务器上的相对路径。
    2.引用该图片在网络上的绝对路径。

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

    HTML:
    1.用两个空格来代替制表符(tab)
    2.嵌套元素应当缩进一次(即两个空格)
    3.对于属性的定义,确保全部使用双引号,绝不要使用单引号
    4.不要在自闭合(self-closing)元素的尾部添加斜线。
    5.不要省略可选的结束标签(closing tag)
    6.为每个 HTML 页面的第一行添加标准模式(standard mode)的声明,这样能够确保在每个浏览器中拥有一致的展现。
    7.强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
    8.尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
    9.HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

    class
    id, name
    data-*
    src, for, type, href, value
    title, alt
    role, aria-*
    

    class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
    css:
    1.用两个空格来代替制表符(tab).
    2.为选择器分组时,将单独的选择器单独放在一行。
    3.为了代码的易读性,在每个声明块的左花括号前添加一个空格。
    4.声明块的右花括号应当单独成行。
    5.每条声明语句的 : 后应该插入一个空格。
    6.为了获得更准确的错误报告,每条声明都应该独占一行。
    7.所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。
    8.对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow).
    9.对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。
    10.尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。
    11.相关的属性声明应当归为一组,并按照下面的顺序排列:

    Positioning
    Box model
    Typographic
    Visual
    

    由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
    其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
    上述规范的例子如下:

    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }
    
    .declaration-order {
      /* Positioning */
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 100;
    
      /* Box-model */
      display: block;
      float: right;
      width: 100px;
      height: 100px;
    
      /* Typography */
      font: normal 13px "Helvetica Neue", sans-serif;
      line-height: 1.5;
      color: #333;
      text-align: center;
    
      /* Visual */
      background-color: #f5f5f5;
      border: 1px solid #e5e5e5;
      border-radius: 3px;
    
      /* Misc */
      opacity: 1;
    }
    

    更多参考;

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

    image.png

    2.Elements
    左侧就是对页面HTML结构的查看与编辑,可以直接在某个元素上双击修改元素的属性,或者点右键选"Edit asHtml"直接对元素的HTML进行编辑,或者删除某个元素,所有的修改都会即时在页面上得到呈现.


    image.png

    3.Console
    查看错误信息、打印调试信息(console.log())、写一些测试脚本.

    image.png

    4.Sources
    可以打断点刷新调试代码,显示网页的源代码。

    image.png

    5.Network
    Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助


    image.png

    点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:
    在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息


    image.png

    6.Security
    判断当前的网页是否安全。

    image.png

    7.Application
    Application同旧版浏览器的resource功能差不多,可以查看web程序跑起来后所加载的一些资源,包括图片或者其他“值”,以及Cookies


    image.png

    相关文章

      网友评论

        本文标题:css基础

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