css样式引入
-
样式的三种引入方式
1.** 外部样式表 **当样式需要应用于很多页面时
<link rel="stylesheet" type="css/text" href="./css">`rel=关系 stylesheet=样式表 type=文件类型 href=文件路径` `每个页面使用 <link> 标签链接到样式表。<link> 标签在<head>`
2.** 内部样式表 ** 当单个文档需要特殊的样式时
<style>
p {
color:blue;
font-size:12px;
}
</style>
`使用 <style> 标签在文档头部定义`
3.** 内联样式 ** 当样式仅需要在一个元素上应用一次时
<p style=color:blue;font-size:12px;>当前元素</p>
`相关的标签内使用样式（style）属性`
- link和@import的区别
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事物；
@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；
@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；
@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用Javascript控制DOM去改变样式；
@import不支持。
5.tip：@import最优写法
兼容最多@import url(style.css) 和@import url("style.css")
字节优化@import url(style.css)
文件路径
-
../main.css表示上级目录的文件 -
./main.css表示当前目录的文件 -
main.css表示当前目录的文件
console.log
- console.log：可以看到页面中输出的内容,方便调试。
- alert：只显示对象类型，打断页面操作，影响调试。
text-align
text-align 属性规定元素中的文本的水平对齐方式
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
- inherit 从父元素继承 text-align 属性的值。
单位
-
定义
- px：绝对长度单位。直接指定字体大小，是固定值。
- em：相对长度单位。相当于父元素的字体大小的倍数。
- rem：相对单位长度。相对于根元素<html>的倍数。
-
区别
px：优点绝对大小，数值精确，兼容性最高
缺点无法调整，一旦改变浏览器的缩放，Web页面布局就会被打破em：优点相对大小，可以按比例调整字体大小
缺点进行任何元素设置，都有可能需要知道父元素的大小；IE8及之更早版本浏览器不支持rem：优点相对大小。只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应
缺点IE8及之更早版本浏览器不支持
-
使用
-
px：
p {font-size: 100px} -
em：
p1{font-size:100px} p2{font-size:5em} -
rem：
html{font-size:62.5%} p{font-size:5rem}
-
px：
tips
转换工具
chrome 审查元素的功能
Elements html调试区
Console js调试区
Style css调试区
