选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;color:black ;font-family: "微软雅黑";...} 样式表分类 1. 外样式。HTML5|HTML5知识点总结(二)。" />

HTML5|HTML5知识点总结(二)

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的处理原则:
  1. 如果多个选择器定义的样式规则不发生冲突,则元素将应用所有选择器定义的样式
  2. 如果多个选择器定义的样式规则发生冲突,则css按照选择器的优先级来处理,元素将应用优先级高的选择器定义的样式
CSS规定选择器的优先级,从高到低
行内样式——id样式——类样式——标签样式
其总原则时:越特殊的样式,优先级越高
【HTML5|HTML5知识点总结(二)】CSS的选择符优先级,从高到低:id选择符——类选择符——元素选择符
CSS的定义优先级依照后定义优先的原则:内嵌样式——内部样式表——外部样式表

    推荐阅读