任务5-HTML2

2016-09-20 本文已影响0人饥人谷_桶饭

样式有几种引入方式? link 和 @import有什么区别
- 外部样式表：
```
    <head>
    <link rel="stylesheet" type="text/css" href="index.css">
    </head>
```
- 内部样式：
```
<body>
        <p style="color: blue; font-size:14px;">段落</p>
 </body>
```
- 嵌入样式：
```
<head>
    <style type="text/css">
          p {
              color:red;
              font-size：18px;
          }
   </style>
</head>
```
- 导入式样式：
```
<head>
    <style>
    @import url("#.css")
    </style>
</head>
```
  link 和 @import的区别：
  - link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
  - link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
  - link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
  - link支持使用Javascript控制DOM去改变样式；而@import不支持。
文件路径../main.css 、./main.css、main.css、/main.css有什么区别

…/main.css代表上级目录的main.css文件
./main.css代表当前目录main.css文件
main.css代表当前目录的main.css文件
/main.css 是在当前目录的根目录寻找 css文件

console.log是做什么用的

用于调试代码，在控制台中更改变量。

text-align有几个值，分别有什么作用？写截图说明区别

text-align：left 表示文本排列到左边
text-align：center 表示本文居中
text-align：right 表示文本排列到右边
text-align：inherit 表示文本继承父元素text-align属性值进行排列
text-align：justify表示文本排列水平对

Paste_Image.png

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

px：px是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em：em是指相对于父元素的大小, 例如 ·font-size
中设置一个<div>

字体为16px,那在此div 后代继承字体大小均为16px ，
如果设置其中某子元素字体大小为0.5em，那此元素字体大小为8px，2em则为32px
rem：rem是指相对于html根元素的字体大小。

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

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

6rem

任务5-HTML2

link 和 @import的区别：

猜你喜欢

热点阅读