2018/09/29渡课学习

JYC1994

于 2018-09-29 22:50:32 发布

阅读量213

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/JYC1994/article/details/82899699

本文深入讲解CSS的基本原理与语法，涵盖选择器、属性介绍等核心内容。通过实际案例，如个人简介页面与框架锚点文章页面的美化，帮助读者掌握CSS技巧。同时，探讨CSS与HTML的关系，以及CSS技术的诞生背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(一). 学习内容

CSS 基本原理介绍；
CSS 基本语法；
CSS 选择器；
CSS 属性介绍。

(二). 课程重点

掌握 CSS 的解析原理；
掌握 3 种不同方式 CSS 定义的规范；
掌握 DOM 的基本结构；
掌握 ID CLASS 属性分组继承派生等选择方式。

(三). 作业安排

使用 CSS 美化之前 HTML 构建的个人简介页面，包括表格边框，表格单元格背景，字体，输入框样式等，要求在外部 CSS 文件中定义样式，并尝试如何优化类选择器的定义。（不能实现的样式，参考样式手册查看后测试）
使用 CSS 美化之前 HTML 构建的框架锚点文章页面，对于标题、文本内容等进行文本样式的美化。
问题：
a. CSS 的版本进化历史。
b. CSS 有哪些选择器，其定义语法分别是什么？
c. HTML 和 CSS 有什么关系，为什么会有 CSS 技术的出现。
预习 CSS 样式一大章节，预习注意，大体的看，不能明白的跳过，但是一定要看过，脑子里有个大体的概念，这个章节没有概念的难度，所以要尽可能的看懂；
学会使用 CSS 参考书： http://www.w3school.com.cn/cssref/index.asp
将 W3School 的实例尽可能的都看过： http://www.w3school.com.cn/example/csse_examples.asp

(四). 作业完成情况

1. 使用 CSS 美化之前 HTML 构建的个人简介页面

代码展示

	<style type="text/css">
		table
		{
			border-color: red;
			font-size: 20px
		}
	    .box
	    {
	    	color: blue
	    }
	    .aow
	    {
	    	color: yellow
	    }
	</style>

截图展示

在这里插入图片描述

2. 使用 CSS 美化之前 HTML 构建的框架锚点文章页面，对于标题、文本内容等进行文本样式的美化。

代码展示

	<style type="text/css">
		body
		{
			color: yellow;
			font-size: 25px;
			font-style: italic;

		}
		a
		{
			text-decoration: none;
			color: black
		}
	</style>
		<style type="text/css">
		h1{
			color: red;
		}
		.poy
		{
			color: blue

		}
		.asd
		{
			color: green
		}
		.zsd
		{
			color: green;
			font-size: 20px;
			font-style: italic;
		}
		.asd
		{
			font-size: 20px;
			font-weight: bold;
		}
	</style>

### 截图展示

在这里插入图片描述

3.问题

a. CSS 的版本进化历史

CSS1作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。1996 年 12 月 17 日 CSS 1 (Revised) 　
CSS2作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。1999 年 1 月 11 日 CSS 2 　1998 年 5 月 12 日 CSS 2.1 2007 年 7 月19 日　CSS 2 Mobile 2007 年 10 月 19 日　CSS 2 TV 2003 年 5 月 14 日　CSS 2Print 2006 年 10 月 13 日
CSS3 计划将 CSS 划分为更小的模块。
W3C CSS 规范和时间线规范草案/提议推荐
　CSS 3 2001 年 5 月 23 日　CSS 3 Namespace 2006 年 8 月 28 日　CSS 3 User Interface 2004 年 5 月 11 日　CSS 3 Selectors 2005 年12 月 15 日　CSS 3 Fonts 2002 年 8 月 2 日　CSS 3 Web Fonts 2002 年 8 月 2 日CSS 3 Colors 2003 年 5 月 14 日　CSS 3 TV 2003 年 5 月 14 日　CSS 3 Backgrounds and borders 2005 年 2 月 16 日　CSS 3 Text 2007 年 3 月 6 日　CSS 3 Lists 2002 年 11 月 7 日　CSS 3 Line 2002 年 5 月 15 日　CSS 3 Box model 2007 年 8 月 9 日　CSS 3 Multi column 2007 年 6 月 6 日　CSS 3 Ruby 2003 年 5 月 14 日　CSS 3 Border 2005 年 3 月 16 日　CSS 3 Speech 2004 年 12 月 16 日　CSS 3 Paged Media (PM) 2006 年 10 月 10 日　CSS 3 Generated PM 2007 年 5 月 4 日　CSS 3 Print 2006 年 10 月 13 日　CSS 3 Values 2006 年 9 月 19 日　CSS 3 Cascade 2005 年 12 月 15 日　CSS 3 Template Layout 2009 年 4 月 2 日　CSS 3 Media Queries 2009 年 9 月 15 日

b. CSS 有哪些选择器，其定义语法分别是什么

1 标签名选择器 div { color：Red;} 即页面中的各个标签名的css样式
2.类选择器 .divClass {color:Red;} 即定义的每个标签的class 中的css样式
3.ID选择器 #myDiv {color:Red;} 即页面中的标签的id
4.后代选择器（类选择器的后代选择器） .divClass span { color:Red;} 即多个选择器以逗号的格式分隔命名找到准确的标签
5.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示