CSS学习笔记二—— 样式引入方式，伪类，块与内联，继承属性

样式引入方式

• link标签

  • 没有兼容性问题

  • 还可以引入图标等资源

  • 在页面加载的时候同时加载css文件

  • 可通过js控制dom操作样式

• import引入

  • 兼容性问题 css2.1 IE5

  • 网页加载完后再加载css文件，所以会出现闪烁现象

  • 不可通过js修改样式

  • 只能引入样式文件，但是可以在css文件里再引入css文件

  • 推荐书写 @import url(style.css)

伪类:before :after

• ::before 和 :before 差别时前者是css3调整的写法，所以后者的兼容性更好，其实效果一样

• 必须与content属性一起使用

• 不能通过js控制，只能在css中使用

• 用途：清除浮动，制造各种小形状，icon

::after {    content: "";    display: table;    clear: both;
}

块与内联

• 块状元素

  • div

  • p

  • h

  • ul

  • dl

  • ol

  • form

  • 独占一行

  • 宽高边距都可控

  • 宽度默认父容器宽度

  • 可容纳块与内联

  • 特点

  • 元素

• 内联元素

  • a

  • span

  • input

  • img

  • textarea

  • 都在一行

  • 高，行高，上下内外边距不可改，左右内外边距可改变但是不影响左右元素

  • 宽度是内容宽度

  • 只能容纳内联和文本

  • 特点

  • 元素

继承属性

• 可继承属性

  • line-height

  • word-spacing字间距

  • letter-spacing字符间距

  • text-transform大小写

  • direction方向

  • 其中文本缩进text-indent，text-align只有块状元素可继承

  • 字体属性font

  • visibility

  • cursor

  • color

  • 部分文本属性

• 不可继承属性

  • vertical-align

  • text-decoration

  • text-shadow

  • white-space

  • unicode-dibi

  • 背景属性background

  • 布局属性margin

  • 定位属性position

  • display

  • 部分文本属性

作者：Eason_Wong
链接：https://www.jianshu.com/p/50c8015e5b7c