HTML5|HTML5知识点总结（二） css|html

CSS3基础CSS3基本语法
样式表分类
CSS选择器
CSS的特性

CSS3基本语法

type="text/css"> 选择器{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; color:black ; font-family: "微软雅黑"; ... }

样式表分类
1. 外样式表：多个页面可以重复使用

步骤：1.新建一个css文件夹，在文件夹里新建css文件 2.在新建的css文件中写需要的样式 3.在标签中，通过或 type="text/css"> @import url("路径"); 引入

2. 内嵌样式表：可以在一个页面内重复使用

type="text/css"> 选择器{属性1:属性值1; ...} 选择器{属性1:属性值1; ...}

3. 行内样式表：不能重复使用

<标签名 style="属性1:属性值1; 属性1:属性值1; ...; ">

一、基本选择器
1. 标签选择器：自动应用样式规则

type="text/css"> 标签名{ 属性1:属性值1; 属性1:属性值1; }a{ color: black; font-family: '微软雅黑' } 标签选择器

2. 类(.)选择器：可以在不同类型直接的标签进行重用

type="text/css"> 类名{ 属性1:属性值1; 属性1:属性值1; }.name{ color: black; font-family: '微软雅黑' }
类选择器

3. ID(#)选择器：不能重复使用

type="text/css"> ID名{ 属性1:属性值1; 属性1:属性值1; }#name{ color: black; font-family: '微软雅黑' }
类选择器

二、扩展选择器
1. 组合选择器:组合直接用，隔开

type="text/css"> p,.name,#tip{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; color:black ; font-family: "微软雅黑"; } 表示：p标签下内容，类名为name下的内容，id为tip下的内容样式

2. 包含选择器：用空格隔开

type="text/css"> .tip ul li a{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; color:black ; font-family: "微软雅黑"; } 表示：类名为tip下的ul下的li下的a下的内容样式

3. 交集选择器:第一个必须是标签选择器，第二个必须是类或id选择器，两个选择器直接不能有空格

type="text/css"> p.red{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; color:black ; font-family: "微软雅黑"; } 表示：p标签中class值为red的所有元素的样式属性

4. 伪类选择器

type="text/css"> 标签名:伪类名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; color:black ; font-family: "微软雅黑"; } 常用超链接伪类 :link：鼠标未点击时 :visited：鼠标点击后 :hover：鼠标悬浮在超链接上时 :active：鼠标点击为释放时

CSS的特性
1. CSS继承性：所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多样式叠加在一起

type="text/css"> body{ font-size: 12px; font-style: italic; } #p1{ font-size: 30px; } 段落文字段落文字 p元素包含在body中，因此p标签中的内容会继承body定义的属性，即示例中的段落文字都会以12px斜体显示，要想改变样式，除非重新定义新的属性

2. CSS层叠性和优先级层叠性是指当有多个选择器都作用于同一元素时，即多个选择器中的样式发生了重叠，css会对其进行处理。
CSS的处理原则：