HTML-2

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

I. 样式在HTML中有三种引入方式,分别是

  • 内联样式,样式作为元素的style属性写在元素开始标签内。例如:



    
    内联样式


    

采用内联样式的标题

这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

效果:

HTML-2_第1张图片
Paste_Image.png
  • 内部样式,嵌入样式应用于整个网页文档,这些样式放在head部分的

    采用内部样式的标题

    这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

    效果

    HTML-2_第2张图片
    Paste_Image.png
    • 外部样式,外部样式是包含CSS样式规则的文本文件,使用.css扩展名。这种.css文件同服哦link元素与网页关联,因此,多个网页可以关联同一个.css文件。.css文件中部包含任何HTML标记,他只包含CSS样式规则。例如:
      HTML
    
    
    
        
        外部样式
        
    
    
        

    采用外部样式的标题

    这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

    CSS

    .div1 {
        background-color:#333;
    }
    .div1 h1 {
        font-size:30px;
        color:#11bbaa;
    }
    .div1 p{
        font-size:16px;
        color:#ff22bb;
    }
    

    效果:

    Paste_Image.png

    II. link元素位于HTML文本的 head部分,用于将外部CSS文件链接到该文件。而 @import用作将外部样式导入内部样式或者导入另一个外部样式表。

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

    ../main.css指向当前目录的上一层目录下的的main.css文件;./main.css、main.css指向当前目录下的main.css文件。link元素没有兼容性问题,而@import则从CSS2.1才开始支持。

    3.console.log是做什么用的

    console.log用于调试javascript,并将信息展示在控制台上。

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

    text-align属性配置文本和内联元素在块元素中的对齐方式,属性值包括:
    left(默认):左对齐
    right:右对齐
    center:水平居中
    justify:两端对齐
    代码:

    
    
    
        
        text-align属性
        
    
    
    

    text-align:left

    In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.

    text-align:right

    In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.

    text-align:center

    In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.

    text-align:justify

    In grand celebrations to mark her milestone birthday, the Queen on Saturday sported a daring neon green outfit as she greeted the public, impossible to miss in her horse and open carriage, even past the thousands of viewers and hundreds of marching officers.

    实现效果:

    HTML-2_第3张图片
    Paste_Image.png
    HTML-2_第4张图片
    Paste_Image.png

    5.pxemrem分别是什么?有什么区别?如何使用?

    • px:像素(显示屏幕上的一个点)
    • em:em是一种相对字体单位,在网页中,em相对于父元素(通常是网页的body元素)所用的字体字号。1em=当前字体尺寸,2em=2倍当前字体尺寸。
    • rem:rem类似于em,也是一种相对单位,不过是相对于根元素字体大小(在HTML元素上设置的字体大小)的单位。

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

    HTML-2_第5张图片
    无标题.png

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

    浏览器默认字体大小为16px,则该网页根元素(HTML)字体大小为16px*62.5=12px,即1rem=12px,由于h1字体大小为60px,所以设置p为5rem时h1p字体大小相等。
    代码:

    • ```
      





    第7题

    
    



    饥人谷


    饥人谷



    ```
    

    本教程版权归王康和饥人谷所有,转载需要说明来源。

你可能感兴趣的:(HTML-2)