美文网首页
任务6-css入门

任务6-css入门

作者: 大胡子歌歌 | 来源:发表于2017-01-04 16:19 被阅读0次

    1、CSS的全称是什么?

    CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

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

    1)使用HTML标签的STYLE属性
    将STYLE属性直接加在单个的HTML元素标签上,控制HTML标签的表现样式。这种引入CSS的方式是分散灵活方便,但缺乏整体性和规划性,不利于后期的修改和维护,当需要修改网站的样式时,一个相同的修改可能涉及多个地方,维护成本高。使用STYLE属性的样式效果最强,会覆盖掉其它几种引入方式的相同样式效果。

    <div style="color:red">
    ...
    </div>
    

    2)将样式代码写在页面<STYLE>...</STYLE>标签之中
    <STYLE>...</STYLE>结构可以位于页面<HTML>标签中的任何位置,也可以多次出现。通常是将整个<STYLE>...</STYLE>结构写在页面的<HEAD>...</HEAD>部分中。这种引入CSS方式的特点是每个页面的CSS代码可能具有统一性和规划性,一个页面内部便于复用和维护,但多个页面之间的CSS代码复用仍然不够。

    <style>
      bdoy{
        font-size:14px;
      }  
    </style>
    

    3)使用 LINK标签,引入外部CSS文件
    先将css代码写在一个单独的文件中,用link标签直接引入该文件到页面中。一个页面可以多次使用LINK标签引入多个外部css文件,注意这些CSS代码的相互影响,通常是后引入的CSS文件会覆盖前面引入的CSS文件的相同效果。这种引入CSS的方式是目前最为流行的,可以在站个网站范围内进行CSS代码的规划,方便复用和维护,但这样将代码高度集中,代码量可能过大,维护不当的话又容易出现混乱。

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

    4)使用@import引入CSS文件
    使用@import引入CSS文件,可以放在页面中的<style>...</style> 中,用法如下:

    <style>
      @import url(index2.css);
    </style>
    

    @import与Link都是外部引用CSS的方式,但是存在一定的区别:
      区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
      区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
      区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
      区别4:link支持使用Javascript控制DOM去改变样式;而@import不支持。

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

    相对路径
    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 当前站点根目录下的static目录下的css目录下的a.css文件
    http: //cdn.jirengu.com/kejian1/8-1.png cdn.jirengu.com服务器上的一张png图片URL。

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

    1)可以将这张图片上传到jirengu.com服务器上,指向存放的目录。
    2)将这张图片上传到网络上其它可提供完整url路径的服务器上,再指向此url。

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

    1)语法不区分大小写,但是建议统一写小写
    2)不使用关联的style属性定义样式
    3)id和class使用有意义的单词,分隔号建议使用-
    4)有可能就是用缩写
    5)属性值是0的省略单位
    6)块内容缩进
    7)属性名冒号后面添加一个空格

    6、介绍 chrome 开发者工具

    相关文章

      网友评论

          本文标题:任务6-css入门

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