CSS3基础

概述：

1. CSS基本概念
2. CSS基本语法和用法
3. CSS基本熟悉，属性值和单位的用法
4. CSS基本特性

1，CSS3概述

    CSS3是CSS规范的最新版本，在CSS2.1的基础上增加了很多强大的新功能，一帮组开发人员解决一些实际面临的问题，并且不再需要非语义标签，复杂的JavaScript脚本以及图片。例如，圆角，多背景，透明度，阴影等功能。

1.1 CSS的发展历史

1.2 CSS3新功能

• 完善选择器
• 完善视觉效果：圆角，阴影，渐变背景，半透明，图片边框
• 完善盒模型：flex
• 增强背景功能：background-image,background-reprat,background-size,background-position,background-origin,background-clip
• 增加阴影效果：文本阴影，盒子阴影
• 增加多列布局与弹性盒布局
• 完善Web字体和Web Font图标
• 增强颜色和透明度功能：opacity
• 新增圆角与边框功能：border-image
• 增加变形操作
• 增加动画和交互效果
• 完善媒体特性与Responsive布局

1.3 浏览器支持

2,CSS基本用法

2.1 CSS样式

    声明：规则   >>  body{font-size:12px;color:#333;}   选择器 声明 属性  属性值

2.2 CSS应用

    1，行内样式

<p style="background-color:red">hello world</p>

    2，内嵌式

<style>
	p{
		background-color:red;
	}
	</style>

    3，链接式

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

    4，导入样式

@import helloworld.css;
@import 'helloworld.css';
@import "helloworld.css";
@import url(helloworld.css);
@import url('helloworld.css');
@import url("helloworld.css");

2.2.3 CSS样式表

    1，内部样式表

    2，外部样式表

2.2.4 导入外部样式表

    1，使用<link>标签导入

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

    2,使用@import关键字导入

<style type="text/css">
@import url("helloworld.css");
</style>

2.2.5 CSS注释

使用/*  注释内容*/

3 CSS特性

3.1 CSS层叠性

    1，CSS样式表的优先级

    HTML,作者，用户，浏览器

    2，CSS样式的优先级

    优先级加权值：

• 标签选择器：1
• 伪元素或伪对象选择器：1
• 类选择器：10
• 属性选择器：10
• ID选择器：100
• 其他选择器：10

3.2 CSS继承性

    继承性指被包含的元素将拥有外层元素的样式效果。