CSS3基础方法教学

CSS3基础

CSS3语法结构：

选择器{属性1：属性值1;属性2：属性值2;属性3：属性值3;}

在HTML中引入Css样式

<标签名 style=“属性1：属性值1;属性2：属性值2;属性3：属性值3;”>内容<标签名>
(示例)

<p style="font-size:20px; color:#f00">段落标签使用的是行内样式</p>
展示（该页面无法正常显示）：

段落标签使用的是行内样式

内部样式表

在head标签中并使用style标签为HTML5文件定义样式信息的基本语法如下：
<style>选择器{属性1：属性值1;属性2：属性值2;属性3：属性值3;}</style>

外部样式表

连接外部样式表示通过<link>标签将外部样式表连接到HTML5中的
http://t.csdn.cn/BcQXr（详细链接）

样式优先级：

CSS优先级所谓优先级是指CSS样式在浏览器中被解析的先后顺序。 CSS选择器的优先级：id > class > tagname

CSS3选择器

一个完整的html5，是由很多不同的标签组成，而标签选择器则决定标签应采用的CSS样式
标签名 { 属性1：属性值1;属性2：属性值2;属性3：属性值3;}

层次选择器

层次选择器通过HTML的DOM元素之间的层次关系获取元素，其主要的层次关系包括后代，父子，相邻兄弟和通用兄弟几种关系，通过其中某类关系可以方便快捷地选定需要的元素。

子选择器：

当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的**直接后代 (**子元素) 的第二元素。与之相比，当两个元素由 后代选择器 相连时，它表示匹配存在的所有由第一个元素作为祖先元素 (但不一定是父元素) 的第二个元素，无论它在 DOM 中"跳跃" 多少次。

通用兄弟选择器：

CSS通用兄弟选择器中的“通用兄弟”是什么概念呢，比如<div><p><b></b></p><span></span><a></a></div>中，元素p的兄弟元素包括span和a两个元素，span的兄弟元素则是p和a，同样的道理a的兄弟元素是p和span，它们在同一级，都是div的子元素，而元素b则是div的子元素的子元素。

相邻选择器：

HTML页面中的元素就是通过CSS选择器进行控制的。 加号（+）为：相邻同胞选择器 如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器 (Adjacent sibling selector)。

结构伪类选择器：

CSS 中的结构伪类选择器是根据 HTML 页面中元素之间的关系来定位 HTML 元素，从而减少对 HTML 元素的 id 属性和 class 属性的依赖
伪类是 W3C 制定的一套选择器的特殊状态，通过伪类可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 id 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）
伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：
selector:pseudo-class {
property: value;
}
其中 selector为选择器名称，pseudo-class为伪类名称

属性选择器：

CSS 属性选择器通过已经存在的属性名或属性值匹配元素。 /* 存在title属性的<a> 元素*/ a[title] { color: purple; } /* 存在href属性