样式引入5

本教程版权归凯旋和饥人谷所有,转载须说明来源

、样式有几种引入方式 ?

1.外部样式也称外联式(Linking):将网页链接到外部样式表。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>```

2.内页样式也称嵌入式(Embedding):在网页上创建嵌入的样式表。

<head>
<style type="text/css">
body {
background-color: green;
}
</style>
</head>

3.行内样式也称内联式(Inline):应用内嵌样式到各个网页元素。
<p style="color: red; margin-left: 20px">
this is word
</p>
> *1.2* link和@import的区别

link
和@import
都是外部CSS引入样式,区别在于@import
属性用来指定导入的外部样式表及目标设备类型, link
除了调用CSS外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import
就只能 调用CSS。最根本的区别在于link
是html的一个标签,而@import
是一个CSS的一个标签。

但是我们不提倡是用@import
因为使用@import
引用的文件只有在引用它的那个css文件被下载、解析之后,
浏览器才会知道还有另外一个css需要下载,这时才去下载,然后下载后开始解析、
构建render tree等一系列操作。 浏览器在页面所有css下载并解析完成后才会开始渲染页面.因此css@import
引起的css解析延迟会加长页面留白期。 所以,要尽量避免使用css @import
而尽量采用link标签的方式引入。
补充性总结:
① link 属于 XHTML 标签,而 @import 完全是 CSS 提供的一种方式。link 标签除了可以加载 CSS 外,还可以做很多其它的事情,比如定义 RSS,定义 rel 连接属性,等,@import 就只能加载 CSS 了。
② link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。
③ link 支持使用 Javascript 控制 DOM 去改变样式;而 @import 不支持。
④ link是 XHTML 标签,无兼容问题;@import 是在 CSS2.1提出的,低版本的浏览器不支持。


@import css中应用实例:

@charset "UTF-8";
/**

  • @authors Your Name (you@example.org)
  • @date 2016-01-17 13:45:56
  • @version $Id$
    */
    @import url(./index.css);
@import html中应用实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>饥人谷-凯旋</title>
<meta name="description" content="第一次作业">
<meta name="keywords" content="凯旋">
<style type="text/css">
@import url(css/index.css);
</style>
</head>
<body>
<div>
<h1>第一次作业</h1>
<p>
设置body的字体为微软雅黑,字号16px, 行高1.5倍,字体颜色 #333,
</p>
<p>
设置段落颜色#000, 首行缩进两个字体宽度,1.5倍行高
</p>
</div>
</body>
</html>```
link使用实例:(导入CSS)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>饥人谷-凯旋</title>
<meta name="description" content="第一次作业">
<meta name="keywords" content="凯旋">
<link href="css/index.css" rel="stylesheet" type="text/css">
 <!-- <link>标记必须放到页面的 <head>type="text/css" 
表示这个信息的类型是 "text/css" 。换句话说,这是一个 CSS 样式表。在 HTML5 中,
不再需要这个属性(可选)。rel="stylesheet" 此属性指定了
 HTML 文件与所链接的文件之间的关系。
我们要链接到一个样式表,这里使用值 "stylesheet"。href="index.css" 是文件所在的位置。
区内。-->
</head>
<body>
    <div>
        <h1>第一次作业</h1>
        <p>
            设置body的字体为微软雅黑,字号16px, 行高1.5倍,字体颜色 #333,
        </p>
        <p>
            设置段落颜色#000, 首行缩进两个字体宽度,1.5倍行高
        </p>
    </div>
</body>
</html>

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

…/main.CSS
表示父目录的main.ccs文件
./main.css
表示当前目录
/main.css
表示根目录

、console.log是做什么用的

主要是方便调式javascript用的。可以看到在页面中输出的内容。
相比alert的优点是:
console.log能看到结构话的东西,如果是alert,
淡出一个对象就是[object object],但是console能看到对象的内容。
console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,
但是console输出内容后你页面还可以正常操作。
console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到:
Console {memory: MemoryInfo, debug: 
function, error: function, info: function, log: function…}

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

①left  把文本排列到左边。

②right  把文本排列到右边。

③center  把文本排列到中间。

④justify  实现两端对齐效果,在一行文字较多时,使用此效果,
可以使文字较为均匀的分布于行内,由于字数较多,字间距较小,视觉效果可以忽略。

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

px:px是相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em:em是指相对于父元素的大小, 例如 ·font-size
 中设置一个<div>
字体为16px,那在此div 后代继承字体大小均为16px ,
如果设置其中某子元素 字体大小为0.5em,那此元素字体大小为8px,2em则为32px
rem:rem是指相对于html根元素的字体大小。

、chrome 审查元素功能简单的截图介绍

截图.png
答案.png
浏览器默认字体大小是16px,h1的字体大小是60px,则16×0.625×?=60px。解出来为6,所以是6rem。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 121,074评论 16 134
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,101评论 1 91
  • 在权力的制约和束缚之下,有几个人会过得舒心愉快?拥有权力的人会最大化发挥权力的优势,他们在使用权力,被权力压榨的人...
    向日葵3阅读 78评论 0 0
  • 象山耕夫阅读 134评论 0 0
  • 大概是从我发出去的朋友圈只有点赞,没有一句评论的时候开始的吧。我想离开那个世界,那个我花了好久好久的时间,编辑了好...
    蛋蛋旅安阅读 83评论 0 0