CSS 一共有四种引入方式
- 外联式
1.link
2.@import url - 嵌入式
style 标签一般放在head部分
<style type="text/css">
p {
color:red;
}
</style> - 行内式
<p style="color:red;">Hello,World</p>
外联式两种方式的区别
- 1.link属于XHTML标签 @import属于CSS2.1以后引进来的。
- 2.当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。
- 3.@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表。
文件路径../main.css、./main.css、main.css有什么区别
- ../main.css 是指的是main.css上一层文件夹的路径。
- ./main.css 与 main.css 没有什么本质区别,都是指的是和该文件同一层的路径。
console.log是做什么用的
- 用于调试JS的代码,相对于alert(),可以看见JS中对象的内容。
text-align有几个值,分别有什么作用
text-align这个属性主要控制文本对齐方式
text-align 有三个值:left right center justify inherit
left : 文本向左对齐
center : 文本居中对齐
right:文本向右对齐
justify:文本两端对齐
inherit:从父元素哪里继承对齐方式
px、em、rem分别是什么?有什么区别?如何使用
px:相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em:相对长度单位。相对于当前对象内文本的字体尺寸。
rem:rem是新增的一个相对单位(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
rem和 em单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
em单位基于使用他们的元素的字体大小。
rem 单位基于 html 元素的字体大小。
em 单位可能受任何继承的父元素字体大小影响。
rem 单位可以从浏览器字体设置中继承字体大小。
使用 em单位应根据组件的字体大小而不是根元素的字体大小。
在不需要使用em单位,并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
使用rem单位,除非你确定你需要 em单位,包括对字体大小。
媒体查询中使用 rem单位
不要在多列布局中使用 em或 rem,改用%。
不要使用 em或 rem,如果缩放会不可避免地导致要打破布局元素。
参考了 rem em 彻底研究 彻底弄懂css中单位px和em,rem的区别
Chrome 工具
如下代码,设置 p为几 rem,让h1和p的字体大小相等?
设置P为6