前端内容梳理（2）CSS和CSS3

1、CSS

（1）CSS简介

（2）定义样式:选择器，以及一条或多条声明

（3）CSS的引入方式和书写规范

(3.1)内嵌样式

内嵌样式是把css的代码嵌入到html标签中

<div style="color:red;font-size: 100px;">你好啊 小朋友</div>

不建议使用

(3.2)内部样式

在head标签中使用style标签进行css的引入

<style type="text/css">

div{color:red;font-size: 100px;}

</style>

(3.3)外部样式

将css样式抽取成一个单独css文件 谁去使用谁就引用

<link rel="stylesheet" type="text/css" href="demo1.css"/>

(3.4)@import方式

<style type="text/css">

@import url("css地址");

</style>

link与@import方式的区别：

(1)link所有浏览器都支持 import部分低版本IE不支持

(2)import方式是等待html加载完毕之后在加载

(3)import方式不支持js的动态修改

 

（3）CSS中样式的继承

body {font-family: Verdana, sans-serif;}

根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。通过 CSS 继承，子元

素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规

则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。

有些浏览器不支持继承：可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题

如果你不希望 "Verdana, sans-serif" 字体被子元素p继承，可以针对 p 的特殊规则，这样它就会摆脱父元素的规则。

（4）常用的选择器

元素选择器；id选择器；class选择器；（选择器的优先级：id>class>元素）

属性选择器：对带有指定属性的 HTML 元素设置样式；http://www.w3school.com.cn/css/css_syntax_attribute_selector.asp

派生选择器：http://www.w3school.com.cn/css/css_syntax_descendant_selector.asp

（5）CSS伪类和伪元素

http://www.w3school.com.cn/css/css_pseudo_classes.asp

http://www.w3school.com.cn/css/css_pseudo_elements.asp

（6）CSS框模型和定位

（6.1）外边距合并问题：http://www.w3school.com.cn/css/css_margin_collapsing.asp

（6.2）定位：http://www.w3school.com.cn/css/css_positioning.asp

（7）CSS样式分类

http://www.w3school.com.cn/css/css_background.asp

2、CSS3

（1）CSS3 是最新的 CSS 标准。

（2）新的边框属性：http://www.w3school.com.cn/css3/css3_border.asp

（3）新的背景属性：http://www.w3school.com.cn/css3/css3_background.asp

（4）新的文本属性：http://www.w3school.com.cn/css3/css3_text_effect.asp

（5）@font-face 定义“自己的”字体 ：http://www.w3school.com.cn/css3/css3_font.asp

（6）2D和3D转换 对元素进行移动、缩放、转动、拉长或拉伸：http://www.w3school.com.cn/css3/css3_2dtransform.asp

（7）CSS3 过渡和CSS3 动画：http://www.w3school.com.cn/css3/css3_transition.asp

（8）CSS3 多列 http://www.w3school.com.cn/css3/css3_multiple_columns.asp

（9）新的用户界面属性 http://www.w3school.com.cn/css3/css3_user_interface.asp