美文网首页
Learn HTML&CSS the hard way

Learn HTML&CSS the hard way

作者: INTERNALENVY | 来源:发表于2016-05-31 20:10 被阅读27次

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

1.<style>标签:

<style>

 p

    {

     background-color:balck;

    }

</style>

2.<link>标签:

<link rel="stylesheet" type="text/css" href="./index.css">

3.内联样式:

<p style="border:1px solid #fff">hello world</p>

link与import区别:

1.link与页面同时加载,import是在页面完全载入后加载

2.link除了载入css之外还可以定义RSS和连接属性,import只能负责载入

3.link兼容性更高,import需要IE5以上版本

4.采用dom控制样式时,只能使用link,dom无法控制import

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


 ../main.css返回上一级并查找main.css

./main.css 与 main.css相同,都是在当前路径下查找main.css

console.log()是做什么用的


会在审查元素的console中显示括号中的内容


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


text-align: left;文本左对齐

text-align: right;右对齐

text-align: center;居中

text-align: justify;两端对齐,除了最后一行

text-align: justify-all;两端对齐,包括最后一行

text-align: start;内容对齐开始边界

text-align: end;内容对齐结束边界

px,em,rem分别是什么,有什么作用,怎么用


 用于表示字体大小,px为像素,用于设置固定值,em和rem是相对大小,em根据父元素当大小乘以前面的倍数,rem根据根元素当大小乘以前面的倍数。

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


 如图:

elements表示元素,可以看到html&css代码以及盒模型。

console表示控制台,console.log的字符会显示在这,调试js

sources表示当前页面的资源,图片,代码等资源会保存于此

network表示网络,网络活动会显示在这

timeline时间线,事件发生的顺序

profiles,分析收集代码消耗cpu性能

resources,cookies等保存于此

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


 答案为6rem,16X62.5=10px,6X10=60px,所以是6rem。效果如图,代码上传github,

相关文章

  • Learn HTML&CSS the hard way

    Q:视频中的.main中的float是不是可以去掉呢,因为.ct已经清除浮动了。 A:单纯的防止父元素塌陷的话可以...

  • Learn HTML&CSS the hard way

    如何调试 IE 浏览器 1.IE7+有自带调试工具,早期版本就手动添加边框颜色来观察盒模型吧。 2.采用模拟器,例...

  • Learn HTML&CSS the hard way

    盒模型包括哪些属性 marginpaddingbordercontentwidthheight text-alig...

  • Learn HTML&CSS the hard way

    CSS选择器常见的有几种? 元素选择器: divulolh1-6pa 类选择器: .class{} id选择器: ...

  • Learn HTML&CSS the hard way

    CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 因为一个网页可能会有很多图片,一个一个请求的话会影响到...

  • Learn HTML&CSS the hard way

    样式有几种引入方式? link 和 @import有什么区别 1. 标签: p { background-colo...

  • Learn HTML&CSS the hard way

    line-height有什么作用? 设置行高。使文本垂直居中(高度须与div一致,并且长度在一行之内)。 如何去查...

  • Learn HTML&CSS the hard way

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流就是普通流,没有定位浮动什么样式的最开始的那一个层面,...

  • Learn HTML&CSS the hard way

    在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 想出现外边距合并: ...

  • Learn HTML&CSS he hard way I

    有序列表、无序列表、自定义列表如何使用?写个简单的例子。三者在语义上有什么区别?在哪些情况下使用哪种(重要)? 如...

网友评论

      本文标题:Learn HTML&CSS the hard way

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