css语法基础(2).ppt

1、第二课 CSS基本语法,2.1 CSS选择器 2.2 选择器声明 2.3 CSS的继承,2.1.1 标记选择器, h1 color: red; font-size: 25px; ,2.1.1 标记选择器,2.1.1 标记选择器 标记选择器.class !- h3/* 标记选择器 */ color:blue; font-size:18px; h3.special/* 标记.类别选择器 */ color:red;/* 红色 */ font-size:23px;/* 文字大小 */ ,2.1.1 标记选择器,.special/* 类别选择器 */ color:green; - 标记选择器.class

2、1 标记选择器.class2 标记选择器.class3 标记选择器.class4 标记选择器.class5 使用于别的标记 ,2.1.1 标记选择器,2.1.2 类别选择器,2-1.html,2.1.2 类别选择器,2.1.2 类别选择器 class选择器 !- .one color:red;/* 红色 */ font-size:18px;/* 文字大小 */ .two color:green;/* 绿色 */ font-size:20px;/* 文字大小 */ ,2.1.2 类别选择器,.three color:cyan;/* 青色 */ font-size:22px;/* 文字大小 */

3、- class选择器1 class选择器2 class选择器3 h3同样适用 ,2.1.2 类别选择器,2.1.3 ID选择器,2-5.html,2.1.3 ID选择器,2.1.3 ID选择器 ID选择器 !- #one font-weight:bold;/* 粗体 */ ,2.1.3 ID选择器,#two font-size:30px;/* 字体大小 */ color:#009900;/* 颜色 */ - ID选择器1 ID选择器2 ID选择器3 ID选择器3 ,2.1.3 ID选择器,2.2 选择器的声明,2.2.1 集体声明（2-6.html） 2.2.2 选择器的嵌套（2-8.html

4、）,2.2.1 集体声明, 集体声明 ,2.2.1 集体声明, 集体声明h1 集体声明h2 集体声明h3 集体声明h4 集体声明h5 集体声明p1 集体声明p2 集体声明p3 ,2.2.1 集体声明,2.2.2 选择器的嵌套, CSS选择器的嵌套声明 嵌套使用CSS标记的方法 嵌套之外的标记不生效 ,2.2.2 选择器的嵌套,2.3 CSS的继承,2.3.1 父子关系（2-9.html） 2.3.2 CSS继承的运用（2-10.html）,2.3.1 父子关系, 父子关系 ,2.3.1 父子关系, 祖国的首都北京 欢迎来到祖国的首都北京，这里是全国政治、经济、文化的中心 在这里，你可以： 感受

5、大自然的美丽 体验生活的节奏 领略首都的激情与活力 你还可以： 去八达岭爬长城 去香山看红叶 去王府井逛夜市 如果您有任何问题，欢迎联系我们 ,2.3.1 父子关系,2.3.2 CSS继承的运用, 父子关系 ,2.3.2 CSS继承的运用,关系1 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 关系2 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. 页面父子关系复杂时 页面父子关系复杂时 这里省略20个嵌套. ,2.3.2 CSS继承的运用,2.4 css盒模型组成,css盒模型是本节教程的重点。前面几个

6、知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。,css盒模型组成,那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。,css盒模型组成,css盒模型组成,我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。 所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的