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

继承属性

• 可继承属性

  • 字体属性font

  • visibility

  • cursor

  • color

  • 部分文本属性

    • line-height

    • word-spacing字间距

    • letter-spacing字符间距

    • text-transform大小写

    • direction方向

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

• 不可继承属性

  • 背景属性background

  • 布局属性margin

  • 定位属性position

  • display

  • 部分文本属性

    • vertical-align

    • text-decoration

    • text-shadow

    • white-space

    • unicode-dibi