CCS总结和一些实例（一）

今天给大家一起总结一下CSS 和一些实例吧！
小常说一下：
我的生活不曾取悦我，所以我创造了自己的生活
—— 可可·香奈儿
CSS 概要
前面我们已讲解了如何创建样式表来同时控制多重页面的样式和布局。

已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

同时，也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。
已经学习了 CSS，下一步学习什么呢？让我们先总结回顾下吧！
首先CSS是什么：CSS的概念及其发展
对于每一位网页设计者来说，都应该知道 HTML、因为它是所有网页制作的基础。但是如果希望网页能够美观、大方、并且升级方便、维护轻松，那么仅仅知道 HTML 语言是不够的，CSS 在这中间扮演者重要角色。
CSS 是什么
CSS 是 Cascading Style Sheet 的缩写，中文译为“层叠样式表”，它是用于控制网页样式，并允许将样式代码与网页内容分离的一种标记性语言。

简单地说，CSS 的引入就是为了使得 HTML 语言能够更好地适应页面的美工设计。

CSS 是 1996 年由 W3C 审核通过并推荐使用的。CSS 的引入随即引发了网页设计一个又一个新高潮，使用 CSS 设计的优秀页面层出不穷。
W3C 是 World Wide Web Consortium 的缩写，中文译为“万维网联盟”，是一个 Web 标准化组织。W3C 除了制定 CSS 标准，还制定了 HTML、XML 等 200 多项 Web 技术标准。
CSS 以 HTML 语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器设置不同的样式风格，包括显示器、打印机、平板电脑、手机等移动设备。
CSS 的发展历史
在 20 世纪 90 年代初，HTML 语言诞生。早期的 HTML 只含有少量的显示属性，用来设置网页和字体的效果。

随着互联网的发展，为了满足日益丰富的网页设计需求，HTML 不断添加各种显示标签和样式属性，于是这就带来一个问题：网页结构和样式混用让网页代码变得混乱不堪，代码冗余增加了带宽负担，代码维护也变得苦不堪言。

1994 年初，哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计一款 Argo 浏览器，于是他们一拍即合，决定共同开发 CSS。

1994 年底，哈坤在芝加哥的一次会议上第一次展示了 CSS 的建议，1995 年他与波斯一起再次展示这个建议。当时 W3C 组织刚刚成立，W3C 对 CSS 的前途很感兴趣，为此组织了一次讨论会，哈坤、波斯是这个项目的主要技术负责人。

1996 年底，CSS 语言正式完成，同年 12 月，CSS 的第一个版本正式出版（https://www.w3.org/TR/CSS1/）。

1997 年初，W3C 组织专门负责 CSS 工作组，负责人是克里斯·里雷。于是该工作组开始讨论第一个版本中没有涉及的问题。

1998 年 5 月，CSS2 版本正式出版（https://www.w3.org/TR/CSS2/）。

尽管 CSS3 的开发工作在 2000 年之前就开始了，但是距离最终的发布还是有相当长的路要走，为了加快开发速度，也为了方便各个主浏览器根据需要渐进式地支持，CSS3 按模块化进行全新设计，这些模块可以独立开发和实现，这也为日后 CSS 的扩展奠定了基础。

考虑到从 CSS2 到 CSS3 发布时间会很长，2002 年工作组启动了 CSS2.1 的开发。这是 CSS2 的修订版，它纠正了 CSS2 版本中的一些错误，并且更加精确地描述了 CSS 的浏览器实现。

2004 年，CSS2.1 正式发布，到 2006 年底得到完善。CSS2.1 成为了目前最流行、获得浏览器支持最完整的版本（有些较老的浏览器并不支持 CSS3，比如 IE8 及其以下版本）。
CSS 在国内的早期实践
评价一种 Web 技术优劣的标准只有一个，那就是看这种技术能够在最恰当的时间以最恰当的方式，为需要的人提供最恰当的服务。在讨论 Web 标准之前，纵览十多年中国 Web 技术的发展，虽然还存在分歧和顾虑，但普及和应用 Web 标准已是不争的事实。

国内网络技术的发展似乎总是慢于国外半个节拍。例如，1996 年 W3C 组织正式推出 CSS1.0，1998 年又推出 CSS2.0，而国内在新世纪之初才开始尝试 CSS 技术。

新世纪之初，国内前卫的网页设计师开始在网页里应用 CSS 技术，但仅限于兴趣和探索。例如：
2004 年，傅捷为了配合自己新翻译的《网站重构：应用 Web 标准进行设计》一书出版，使用纯 CSS 技术设计了一个网站 http://www.w3n.org（目前已无法访问），这个网站在当时吸引了众多 CSS 爱好者的学习和模仿。
2004 年 10 月，闪客帝国（http://www.flashempire.com）采用 Web 标准对网站进行了重构，此举在当时产生了不小的轰动，因为对于一个商业网站来说，使用未经普遍实践的技术是存在很大风险的。

闪客帝国网站于 2005 年完成了全部 CSS 布局，作为国内第一个大型应用案例，虽然还在很多问题，但其在 CSS 标准化实践方面带来了很多宝贵经验。

此后，国内各大商业网站纷纷效仿，加入到网站重构的行列，网页 CSS 化、网站标准化逐渐成为商业网站的基本要求。

其次我们看一下CSS的实例：
练习：
实例如下：
CSS背景
设置页面的背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
body
{background-color:#b0c4de;
}
</style>
</head><body><h1>我的 CSS web 页!</h1>
<p>你好世界！这是来自 小常的CSS实例。</p></body>
</html>

设置不同元素的背景颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1
{background-color:#6495ed;
}
p
{background-color:#e0ffff;
}
div
{background-color:#b0c4de;
}
</style>
</head><body><h1>CSS background-color 实例!</h1>
<div>
该文本插入在 div 元素中。
<p>该段落有自己的背景颜色。</p>
我们仍然在同一个 div 中。
</div></body>
</html>

设置一个图像作为页面的背景：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
body
{background-image:url('paper.gif');background-color:#cccccc;
}
</style>
</head><body>
<h1>Hello World!</h1>
</body></html>

错误的背景图片：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>body {background-image:url('bgdesert.jpg');}
</style>
</head><body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body></html>

CSS文本
设置不同元素的文本颜色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head><body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

文本对齐：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head><body>
<h1>CSS text-align 实例</h1>
<p class="date">2019年11月10号</p>
<p class="main">“此刻已皓月当空爱的人手捧星光我知他乘风破浪去了黑暗一趟感同身受给你救赎热望知道你不能还要你感受让星光加了一点彩虹让樱花偷偷吻你额头让世间美好与你环环相扣此时已莺飞草长爱的人正在路上我知他风雨兼程途经日暮不赏穿越人海只为与你相拥此刻已皓月当空爱的人手捧星光我知他乘风破浪去了黑暗一趟感同身受给你救赎热望”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body></html>

移除链接下划线：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
a {text-decoration:none;}
</style>
</head><body>
<p>链接到: <a href="https://blog.csdn.net/weixin_44799645</a></p>
</body></html>

装饰文字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head><body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body></html>

CSS的字体
设置文本的字体：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
p.serif{font-family:"Times New Roman",Times,serif;}
p.sansserif{font-family:Arial,Helvetica,sans-serif;}
</style>
</head><body>
<h1>CSS font-family</h1>
<p class="serif">这一段的字体是 Times New Roman </p>
<p class="sansserif">这一段的字体是 Arial.</p></body>
</html>

设置字体大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}
</style>
</head><body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body></html>

用px设置的字体的大小

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
</style>
</head>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>允许在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。</p>
<p><b>注意:</b>这个例子在 IE9之前的版本不工作, prior version 9.</p></body>
</html>

用em设置的字体的大小：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<style>
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
</style>
</head>
<body><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>使用 em 单位，允许在所有浏览器中调整文本大小。
不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。
</p>
</body>
</html>

下一步应该学习 JavaScript 。但是还有很多实例未总结，明天继续吧，一起加油吧！

CCS总结和一些实例（一）相关推荐

前端开发基础知识汇总
一.HTML 1.前言与常用标签浏览器内核备注 IE Trident IE.猎豹安全.360极速浏览器.百度浏览器 firefox Gecko 可惜这几年已经没落了,打开速度慢.升级频繁.猪一样 ...
Spring Cloud微服务系统架构的一些简单介绍和使用
Spring Cloud 目录特征云原生应用程序 Spring Cloud上下文:应用程序上下文服务引导应用程序上下文应用程序上下文层次结构改变Bootstrap的位置Properties ...
28335的双PWM中断调试CCS实例
目录一.中断初始化二.ePWM配置三.实例效果四.后续问题在作为逆变器开发的软件设计人员中,为了实现逆变器50k开关频率与10k计算频率同时进行,由于基础限制,我不断摸索终于"勉强 ...
CCS实例，网页栏目
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8" ...
Pacbio HiFi技术原理与应用软件实例
Pacbio HiFi技术原理与应用软件实例原创生信技术生信技术 2021-06-07 13:02 收录于话题 #基因组组装3个内容 #生物信息3个内容 #生信技术3个内容点击上方蓝字关注我们 ...
android+发邮件,Android发送邮件的方法实例详解
Android发送邮件的方法实例详解时间:2021-05-20 本文实例讲述了Android发送邮件的方法.分享给大家供大家参考,具体如下: 在android手机中实现发送邮件的功能也是不可缺少的. ...
Oracle 单实例 Relink Binary Options 说明
一.引入问题帮朋友在CentOS上安装一个10g的Oracle,结果朋友的CentOS版本是6.2的版本,最新的一个版本,不过Linux上基本都差不多,所以按照以前的步骤,迅速的操作起来,结果遇到N ...
Java 内存分区之什么是 CCS区 Compressed Class Space 类压缩空间
了解到什么是ccs区,一般都是实际执行了jstat -gc 之后,看Java堆的gc相关的几个分区的gc信息,前面的s0,s1,e区,o区,还好猜,研究过分区的,不难猜出来这个分区是啥意思,M区虽然不 ...
关于CCS中配置DSP时用到的.gel文件
1 GEL作用 GEL全称General Extended Language,即通用扩展语言文件,GEL文件中由类似C语言的代码构成,是一种解释性语言,文件扩展名为.gel:关于GEL文件作用的个人理 ...

CCS总结和一些实例（一）

CCS总结和一些实例（一）相关推荐

最新文章

热门文章