CSS认识1
2016-06-08 本文已影响24人
菲龍探雲
问答
- 样式有几种引入方式? link和 @import有什么区别
1. 三种
内联样式(行内样式)
<p style="color:red;">Hello World</p>
外联样式（嵌入样式）
<style type="text/css">
p{color: red;}
</style>
外链样式（外部样式）
<link rel="stylesheet" type="text/css" href="css.css">
2. link和@import有以下区别
- @import会在页面主体完全渲染之后加载，link写在head内会在在渲染页面之前加载好样式。使用@import在页面内容过于庞大的时候会出现闪烁的情况。
- link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
- link支持使用Javascript控制DOM去改变样式；而@import不支持。
- 文件路径../main.css、./main.css、main.css有什么区别
../main.ss 是上一级目录下的main.css文件
./main.css和main.css是当前目录下的main.css文件
他们都是相对路径
- console.log是做什么用的
console.log是控制台日志 主要是用来调试js代码 和alert()和document.write（）等不同的是藏在控制台里一般不会被用户所看到
还有四种用法
<script type="text/javascript">
console.info("这是info");
console.debug("这是debug");
console.warn("这是warn");
console.error("这是error");
</script>
Paste_Image.png
具体资料
http://www.w3cfuns.com/notes/14682/20abea555555120ec91fc1fb8521149c.html
- text-align有几个值，分别有什么作用
左端对齐
<p style="width:200px;border:1px red solid;text-align:left;">Hello World</p>
右端对其
<p style="width:200px;border:1px red solid;text-align:right;">Hello World</p>
居中对齐
<p style="width:200px;border:1px red solid;text-align:center;">Hello World</p>
两端对齐
<p style="width:200px;border:1px red solid;text-align:justify;">Hello World 这是 用来 填充 </p>
继承
<div style="text-align:center;">
<p style="width:200px;border:1px red solid;text-align:inherit;">Hello World</p>
</div>
Paste_Image.png
两端对齐资料
http://www.zhangxinxu.com/wordpress/tag/text-alignjustify/
http://www.cnblogs.com/radom/archive/2010/09/03/1817041.html
http://www.w3cplus.com/css/text-align-justify-and-rwd.html
- px、em、rem分别是什么？有什么区别？如何使用
px:像素 (计算机屏幕上的一个点) 相对于屏幕分辨率
<div style="width:100px;height:100px;background:red;font-size:50px;">很好</div>
Paste_Image.png
em:1em 等于父级的字体尺寸(改变父级字体大小可以改变大小)
<div style="font-size:20px">
<div style="width:10em;height:10em;background:red;"><p>很好</p></div>
</div>
Paste_Image.png
rem:1rem等于根（html）字体尺寸(修改父级字体大小不变)
<!doctype html>
<html lang="en" style="font-size:50px" >
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body >
<div style="font-size:20px">
<div style="width:10rem;height:10rem;background:red;"><p>很好</p></div>
</div>
</div>
</body>
</html>
Paste_Image.png
- 对chrome 审查元素的功能做个简单的截图介绍
Paste_Image.png
资料
http://www.cnblogs.com/constantince/category/712675.html
- 如下代码，设置 p为几 rem，让h1和p的字体大小相等?
<h1>饥人谷</h1> <p>饥人谷</p> <style> html{ font-size: 62.5%; } p{ font-size: ?rem; } h1{ font-size: 60px; } </style>
根元素=16*0.625=10
60/10=6
换算工具
http://pxtoem.com/
本教程版权归菲龍探雲和饥人谷所有，转载须说明来源
