[css样式引入] [文件路径] [css单位]

作者: jrg_memo | 来源:发表于2016-07-23 11:20 被阅读412次

样式的三种引入方式
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）属性`

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)

text-align 属性规定元素中的文本的水平对齐方式
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式

test.jpg

定义
- 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}
tips
转换工具