CSS课件CSS基本选择器

在CSS没有被引入之前，传统的HTML语言要实现页面美工设计是非常麻烦的。<h1><fontcolor=“#ff0000”face=“宋体”>CSS标记</font></h1>重复、修改CSS应运而生！！学习目标理解CSS的定义及优点；理解CSS3的新特性；掌握CSS的基本语法；掌握CSS的三种基本选择器；能利用CSS基本语法知识美化页面。1.CSS即层叠样式表（CascadingStyleSheet）。样式就是对网页中的元素属性的整体概括，即描述所有网页对象的显示形式。层叠就是指当HTML文件引用多个CSS文件时，若文件之间所定义的样式发生了冲突，将依据层次的先后来处理其样式对内容的控制。一、CSS的理解1.CSS即层叠样式表（CascadingStyleSheet）。CSS是用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。CSS最早是由W3C审核通过并推荐使用的。CSS的引入引发了网页设计的一个又一个高潮，使用CSS设计的优秀页面层出不穷。一、CSS的理解1.CSS即层叠样式表（CascadingStyleSheet）。HTML与CSS的关系就是“内容结构”与“表现形式”的关系，由HTML确定网页的结构内容，而通过CSS来决定页面的表现形式。一、CSS的理解2.CSS发展简史一、CSS的理解自己查阅资料，整理概括！2.CSS发展简史-CSS3CSS3是CSS当前的最新版本，该版本提供了更加丰富且实用的规范，如列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等。采用CSS3技术将会美化页面，创造动画效果显著地提高用户体验，同时能极大地提高程序的性能。一、CSS的理解3.CSS的优势表现与内容相分离；增强了网页的表现力；使整个网站显示风格趋于统一。一、CSS的理解3.CSS的优势表现与内容相分离；增强了网页的表现力；使整个网站显示风格趋于统一。一、CSS的理解二、CSS的构成Selector{property:value;}选择器

属性

属性值举例：Body{background-color:#ff0000;font-size:12px;}

声明声明声明中“属性/属性值”之间必须用“：”分隔；声明中可以包含若干对“属性/属性值”；注意声明在CSS中，有些属性可以表示多个属性的值。如关于文字的设置，有font-family、font-size、font-style，这些可以用一个属性font来表示。注意声明在CSS中，有些属性可以设置多个属性值，用逗号分隔，将按照先后顺序优先选择。注意选择器

选择器是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器控制的。

用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。基本CSS选择器

在CSS中，有多种不同类型的选择器。基本CSS选择器主要有“标记”选择器、类别选择器和ID选择器。标记选择器1

一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。

每一种HTML标记的名称都可以作为相应的标记选择器的名称。标记选择器1标记选择器P{color:red;border:2pxsolde#ffcc00;}举例：h2{font-size:24px;line-weight:30px;}1

标记选择器定义的样式会影响整个页面中所有该元素的显示；若想改变某个元素的默认样式时，可使用标记选择器；当统一文档某个元素的显示效果时，可使用标记选择器；对于div、span等通用结构元素，不建议使用标记选择器。注意标记选择器1类别选择器2类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。举例：定义如下：

.red{color:red;}

应用时：

<h3class=“red”>...</h3>类别选择器2

class可以把具有相同样式的元素统一为一类；只有应用了该class名称的元素会受到影响；同一个类别可以应用于多个标记；

同一个标记可以运用多个类别；不要把每个元素都应用一个class，会产生代码冗余；命名时通俗易懂。注意类别选择器2ID选择器3

ID选择器的使用方法和类别选择器基本相同，不同之处在于ID选择器只能在于HTML页面中使用一次。举例：

定义如下：#top{width:800px;height:150px;background-color:#ffcc00;}

应用时：

<divid=“top”>...</div>ID选择器3ID选择器3

只有应用了该id名称的元素会受到影响；用来构建整体框架的元素对象应定义id属性。在符合Web标准的设计中，每个id名称只能使用一次<divid=“header”><divid=“logo”></div><divid=“banner”></div><divid=“nav”></div></div><divid=“main”><divid=“left”></div><divid=“right”></div></div><divid=“footer”></div>注意基本CSS选择器类别选择器和ID选择器定义时前缀不同，前者使用“.”，后者使用“#”；在HTML使用时，前者用class属性，后者用id属性。基本CSS选择器一个ID选择器的样式只能用于一个HTML元素，一个HTML元素只能使用一个ID选择器。类别选择器没有这个限制。基本CSS选择器（1）类选择器可以给任意多的标记定义样式，但ID选择器在页面标记中只能使用一次；（2）ID选择器样式比类选择器样式优先级高。ID选择器局限性大