HTML-2

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

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

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

    
    


    

        
采用内联样式的标题
        
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。
        
    

效果：

Paste_Image.png

• 内部样式，嵌入样式应用于整个网页文档，这些样式放在head部分的

  采用内部样式的标题

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

  效果

  

  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: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.
  
  
  
  

  实现效果：

  

  Paste_Image.png
  

  Paste_Image.png

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

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

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

  

  无标题.png

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

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

  • ```
    

  
  
  
  
  

  
  
  

  饥人谷

  
  

  饥人谷

  
  
  

  ```
  

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