css教程（附案例）免费下载资源-CSDN文库

需积分: 15 14 浏览量 2013-03-30 10:46:34 上传评论收藏 1.36MB PDF 举报

CSS教程部分内容： 4.2 综合实例－搜狐品质生活 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <meta name="keywords" content="传智播客网页设计培训,传智播客平面设计培训" /> <meta name="description" content="就业率高居中国培训机构榜首" /> <title>品质生活</title> <style type="text/css"> body{font-size:12px; font-family:"宋体"; color:#000;} p,h2,ul,li{margin:0; padding:0; list-style:none;} .box{width:230px; height:240px; border:1px solid #D8D8D8; margin:0 auto; background:url("bg.jpg"); padding:60px 20px 0 420px;} .more{width:230px; height:18px; line-height:18px; text-align:right;} .more a:link,.more a:visited{color:#FFF; text-decoration:none;} .more a:hover{text-decoration:underline;} h2{width:230px; height:20px; padding-top:41px; text-align:center;} h2 a:link,h2 a:visited{color:#D84174; text-decoration:none; font-size:16px;} h2 a:hover{text-decoration:underline;} .content{width:230px; height:66px; line-height:19px; padding-top:22px; text-indent:2em;} .content a:link,.content a:visited{color:#000; text-decoration:none;} .content a:hover{color:#D84174; text-decoration:underline;} ul{width:230px; height:64px;} li{width:230px; height:20px; line-height:20px; background:url("dot.jpg") no-repeat left center; padding-left:10px;} li a:link,li a:visited{color:#000; text-decoration:none; font-size:14px;} li a:hover{color:#D84174; text-decoration:underline;} </style> </head> <body> <div class="box"> <p class="more"><a href="#">更多>></a></p> <h2><a href="#">奥斯卡影后的纽约俭约豪宅</a></h2> <p class="content"><a href="#">奥斯卡影后娜塔莉—波特曼的这间公寓,整排的落地窗显得宽敞明亮，每件家具都有光滑的线条感…</a></p> <ul> <li><a href="#">流光溢彩施华洛世奇系列珠宝</a></li> <li><a href="#">璀璨耀巴世：巴黎古董双年展</a></li> <li><a href="#">金融巨头眼中的十大品牌名表</a></li> </ul> </div> </body> </html> 传智播客网页平面设计学院只花一份学费学习四门实用技能!网页-平面-UI-flash样样精通，http://icd.itcast.cn/。 YY-远程免费学习课堂 id：85155393，网页平面设计/java/.net/php公开课。 CSS（Cascading Style Sheets，层叠样式表）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）文档样式的计算机语言。CSS描述了在屏幕、纸张、语音或其他媒体上元素的呈现方式。在本案例中，搜狐品质生活页面的设计使用了CSS技术，这可以通过查看页面源代码来了解其具体的CSS应用方式。页面的HTML头部包含了几个重要的meta标签，这些标签用于描述页面的一些基本属性。例如，content-type声明了字符编码为UTF-8，这是一种广泛使用的字符编码，能支持多种语言文字。keywords标签用于告诉搜索引擎本页面可能与“传智播客网页设计培训”、“传智播客平面设计培训”等词相关，而description标签则简要介绍了网页内容，为搜索引擎提供了页面的摘要。在页面的style标签内，包含了一系列CSS规则，定义了页面元素的样式。body标签的样式设置了页面基本字体为宋体，字体大小为12像素，并定义了文字颜色为黑色。接着，对p、h2、ul、li等标签设置了一系列的基本样式，比如取消了默认的外边距和内边距，并将列表样式设置为无。页面中的.box类定义了一个容器，这个容器有固定宽度、高度，并设置了边框样式、背景图片和内边距。.more类定义了一个指向更多内容的链接区域，通过float属性确保了其水平排列。h2类中，设置了链接的默认颜色和大小，并定义了鼠标悬停时的样式变化。.content类则定义了内容区域的样式，包括文字缩进、颜色变化等。ul和li标签中，定义了列表项的样式，包括背景图片、链接颜色和鼠标悬停效果等。 CSS选择器的运用是本页面设计的核心，包括了标记选择器（如h2、p等），类别选择器（如.box、.more等），和ID选择器。这些选择器共同作用，实现了页面视觉效果的定制。此外，从提供的内容中还可以看到，CSS教程内容广泛，涵盖了Web标准、CSS基础、选择器、属性和盒子模型等多个方面。Web标准指的是由W3C组织和其他标准化机构共同制定的一系列标准，用于创建统一的Web表现层技术标准，如HTML、XHTML、CSS和JavaScript等。其中Web标准的构成主要分为结构(Structure)、表现(Presentation)和行为(Behavior)三个部分。在CSS教程中，还介绍了在HTML中引入CSS的几种方法，包括行内式、嵌入式、导入式和链接式。行内式直接在HTML元素内通过style属性使用，嵌入式则是在HTML文档的头部定义style标签内写入CSS规则，导入式使用@import导入外部CSS文件，而链接式则是通过link标签连接外部CSS文件。此外，还讲解了CSS选择器的种类和应用，例如标记选择器、类别选择器和ID选择器。 CSS属性是实现页面样式的具体设置，包括控制字体、长度单位、颜色单位等。在教程中，还详细介绍了CSS复合选择器、继承性、层叠性以及如何控制文本和超链接文字的样式。这些都是构建现代网页必不可少的知识点。综合实例部分，通过分析如百度搜索结果页、搜狐教育频道内容页等实际页面的CSS实现，将理论与实践相结合，帮助学习者更好地理解CSS在真实场景中的应用。通过这样的案例分析，学习者可以掌握如何通过CSS来布局页面、美化界面、增强用户体验。

资源推荐

资源详情

资源评论

传智播客网页平面设计学院只花一份钱，同时掌握网页、平面、 UI 、 Flash 四种技能 http://icd.itcast.cn

第 1 页

传智播客网页平面设计学院轻松学习 CSS 免费教程

传智播客网页平面设计学院 http://icd.itcast.cn 发布

传智播客网页平面设计学院只花一份钱，同时掌握网页、平面、 UI 、 Flash 四种技能 http://icd.itcast.cn

第 2 页

第一课 CSS 核心基础（一） .................................................................................................................................................... 3

一、 Web 标准 ............................................................................................................................................................................... 3

1.1 什么是 Web 标准、

eb 标准的目的、 Web 标准的构成 ....................................................................................... 3

1.1.1 什么是 Web 标准 ............................................................................................................................................. 3

1.1.2 web 标准的目的 ............................................................................................................................................... 3

1.1.3 web 标准的构成 ............................................................................................................................................... 3

1.2 采用标准的好处 ........................................................................................................................................................... 3

1.3 理解表现与结构的分离 ............................................................................................................................................... 4

二、什么是 CSS ........................................................................................................................................................................... 4

三、在 HTML 中引入 CSS 的方法 ........................................................................................................................................... 4

3.1 行内式 ............................................................................................................................................................................ 4

3.2 嵌入式 ............................................................................................................................................................................ 4

3.3 导入式 ............................................................................................................................................................................ 5

3.4 链接式 ............................................................................................................................................................................ 5

四、 CSS 基本选择器 .................................................................................................................................................................. 5

4 . 1 标记选择器 ................................................................................................................................................................... 5

4 . 2 类别选择器 ................................................................................................................................................................... 6

4 . 3 ID 选择器 ....................................................................................................................................................................... 8

五、 CSS 常用属性 ...................................................................................................................................................................... 9

5 . 1 CSS 控制字体 ................................................................................................................................................................ 9

5 . 2 CSS 长度单位 .............................................................................................................................................................. 10

5 . 3 CSS 颜色单位 .............................................................................................................................................................. 10

第二课 CSS 核心基础（二） .................................................................................................................................................. 10

一、 CSS 复合选择器 ................................................................................................................................................................ 10

1.1 “ 交集 ” 选择器 ( 标签指定式选择符 ) ..................................................................................................................... 10

1.2 “ 并集 ” 选择器 ( 选择符分组 ) ................................................................................................................................. 12

1.3 “ 后代 ” 选择器 ( 包含选择符 / 嵌套 / 派生 ) .............................................................................................................. 13

二、 CSS 继承性 ......................................................................................................................................................................... 15

三、 CSS 层叠性 ......................................................................................................................................................................... 18

四、 CSS 控制文本属性 ............................................................................................................................................................ 19

五、 CSS 控制超链接文字样式 ................................................................................................................................................ 19

六、综合实例 ............................................................................................................................................................................. 20

6.1 综合实例－百度搜索结果页 ..................................................................................................................................... 20

6.2 综合实例－搜狐教育频道内容页 ............................................................................................................................. 21

第三课盒子模型 ....................................................................................................................................................................... 24

一、 CSS 盒子模型 .................................................................................................................................................................... 24

1.1 深入了解盒子模型 ..................................................................................................................................................... 24

1. 2 属性值的简写形式 ..................................................................................................................................................... 25

二、标准文档流 ......................................................................................................................................................................... 26

2 .1 块级元素与内联元素 ................................................................................................................................................. 26

2 . 2 盒子在标准文档流里的定位原则 ............................................................................................................................ 27

2.2.1 内联元素之间的水平 margin ........................................................................................................................ 27

2.2.2 块级元素之间的垂直 margin ........................................................................................................................ 28

三、页面模块的常用 CSS 命名 ............................................................................................................................................... 29

四、综合实例 ............................................................................................................................................................................. 30

4. 1 综合实例－搜狐时事热闻 ........................................................................................................................................ 30

4 . 2 综合实例－搜狐品质生活 ........................................................................................................................................ 31

传智播客网页平面设计学院只花一份钱，同时掌握网页、平面、 UI 、 Flash 四种技能 http://icd.itcast.cn

第 3 页

第一课

第一课 CSS

CSS

CSS 核心基础（一）

核心基础（一）

一、

一、 Web

Web

Web 标准

标准

1.1

1.1 什么是

什么是

什么是 Web

Web

Web 标准、

标准、

标准、 W

W eb

eb 标准的目的、

标准的目的、

标准的目的、 Web

Web

Web 标准的构成

标准的构成

1.1.1

1.1.1 什么是

什么是

什么是 Web

Web

Web 标准

标准

We b 标准不是某一个标准，而是由 W3 C 和其他标准化组织制定的一系列标准的集合。包含我们所熟悉的 HTML

、

XHTML 、 JavaScript 、以及 CSS 等。

1.1.2

1.1.2 web

web

web 标准的目的

标准的目的

在于创建一个统一的用于 Web 表现层的技术标准，以便于通过不同浏览器或终端设备向最终户展示信息内容。

1.1.3

1.1.3 web

web

web 标准的构成

标准的构成

Web 标准主要由三部分组成：结构 (Structure) 、表现 (Presentation) 和行为 (Behavior) 。

� 结构标准对应的主要语言是 XHTML ；

� 表现标准对应的主要语言是 CSS ；

� 行为标准对应的主要语言是 JavaScript 。

制作成一个静态页面，主要用到的就是 XHTML 与 CSS ，所以制作标准页面的技术就是 XHTML+CSS 。

1.2

1.2 采用标准的好处

采用标准的好处

� 提高页面浏览速度，使用 CSS 方法，比传统的 web 设计方法至少节约 50% 以上的文件尺寸；

� 缩短改版时间，将表现（样式 / 外观）与内容（信息 / 数据）相分离。只要简单的修改几个 CSS 文件就可以重

新设计一个有成千上万页面的站点；

� 降低网站流量的费用，带宽要求降低（代码更简洁），成本降低；

� 更容易被搜索引擎搜索到，提高网站在百度或 google 中的排名；

� 内容能被更广泛的设备所访问，包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等。

剩余31页未读，继续阅读

评论收藏

内容反馈

zly217328

粉丝: 4
资源: 8

css教程（附案例）免费下载

CSS教程(免费版).pdf

HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip

免费的CSS初级教程下载

css教程

css实例

div + css 实操首页展示。有源码，素材

HTML5+CSS3实例源码（包含20个）

css3 操作练习

CSS+DIV 20个经典实例（下）

米柚项目网页制作练习模板加素材html+css，适合初学者练习

微信小程序开发图解案例教程（附精讲视频）（第3版）_PPT详细版.zip

PHP语言教程与案例附资源链接

网页采集爬虫实例图文教程，5个真实案例附完整的使用操作手册

python爬虫教程，全套资源，附代码案例

微信小程序开发-麻将骰子：附详细教程案例源码.zip

CSS 教程CSS 教程

HTML CSS案例教程

css经典教程 真实案例

CSS教程（高清PDF文档）

国外CSS经典实例国外CSS经典实例

css+div网页布局实例40例

CSS 实例12个

HTML+CSS入门案例实战（网站首页布局）

HTMl+CSS登录小实例

Dreamweaver CS5网页设计与制作教程

最新全解密影视小程序前端+后端完整源码内附搭建教程

麻将骰子微信小程序源码（含截图）附详细教程.rar

2023最新独立版校园跑腿校园社区小程序源码+附教程

Html + CSS入门经典

最新资源

css经典教程真实案例