第五弹-HTML2

作者: 聪聪的执著 | 来源:发表于2016-06-01 23:55 被阅读0次

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

    样式引入方式共三种:

    1. 外部样式表:
      <link rel="stylesheet" type="text/css" href="index.css">;
    2. 内部样式表:
      <style type="text/css">
      .inside {
      background-color: #0f0;
      font-size: 2em;
      }
      </style>
    3. 内联样式表:
      <p style="font-size:3rem; background-color:#00f"></p>
      如图,下面分别三种引入方式实例显示:


      样式的三种引入方式

    link 和 @import有什么区别:
    link:它是html的标签,除了调用.css外还可以调用.js等外部数据,它引入的内容复用性好,缺点是调用的代码数据较庞大时浏览器加载时间会长一点,所以适合用在多个元素共用同一个样式表时使用;
    调用方式:<link rel="stylesheet" type="text/css" href="???.css">
    @import:它放置在内部样式表中,属于css的标签,只能调用.css文件,相对link调用少一次网络请求,响应较快。
    调用方式:@import url(???.css)

    二.文件路径../main.css 、./main.css、main.css有什么区别

    .css文件为外部样式文件,放在不同文件目录有不同的路径调用方式

    1. "../main.css":为调用html文件上一目录的main.css样式文件;
    2. "./main.css"和"main.css":都为调用html文件当前目录的main.css样式文件,后者省略"./";

    三. console.log是做什么用的

    用于调试页面程序,可以在审查元素调试时看到你在页面中输出的内容。
    它的作用类似alert(),但是相对于alert()他的优点是:

    1. 它能看到结构化的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的全部内容,
    2. console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。

    四.text-align有几个值,分别有什么作用

    共有4个值:left(靠左)、center(居中)、right(靠右)、justify(两端对齐,窗口变小同样自动换行)
    下面为text-align属性运行效果显示:


    text-align演示

    五 .px、em、rem分别是什么?有什么区别?如何使用

    px、em、rem都为font-size的值的单位:
    px:直接单位(像素),相对于屏幕分辨率来计算其字体所占像素值;
    em:相对单位,其值相对其父元素来确认每em占的像素值,父元素未声明则继续往上一级父元素确认,若任然未声明则依次确认直到根节点(html);
    rem:相对单位,其值相对根节点(html)来确认每rem占的像素值,若根节点未明确声明则默认为1rem=16px;

    六.对chrome审查元素的功能做个简单的截图介绍

    chrome审查元素

    七.如下代码,设置 p为几 rem,让h1和p的字体大小相等?

       <h1>饥人谷</h1>
       <p>饥人谷</p>
        <style>
          html{
    font-size: 62.5%;
          }
          p{
    font-size: ?rem;
         }
             h1{
    font-size: 60px;
              } 
         </style>
    

    计算结果为6rem:计算方式,html默认字体大小为16px,内部样式表再将html设置覆盖为16*62.5%=10px=1rem,那么P的字体大小应设置为6rem=60px;
    如图:实际运行也为6rem;


    fifth question.png

    八.代码

    1. 设置body的字体为微软雅黑,字号16px, 行高1.5倍,字体颜色 #333
    2. 设置段落颜色#000, 首行缩进两个字体宽度,1.5倍行高#

    JS Bin代码地址

    如图,代码运行结果如下:


    代码question

            声明:本博客版权归兰文聪和饥人谷所有,转载需说明来源!

    相关文章

      网友评论

        本文标题:第五弹-HTML2

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