HTML+CSS小结 - jessies
- - 博客园_首页 结构 HTML . 样式 CSS . 行为 JavaScript(交互行为). . 网页标题 . 标题 .
CSS的特性以及在HTML中的三种用法
标签：
css
html
| 发表时间：2013-07-31 19:39 | 作者：wang379275614
出处：http://blog.csdn.net
简介
CSS和HTML一样，也是一种标记语言，代码简单，通过浏览器解释执行，是一种用于为HTML文档定义布局的样式表语言。
作用：
HTML用于结构化内容；CSS用于格式化结构化的内容
Ø CSS的出现弥补了HTML对标记属性控制的不足，如“背景图像重复”只能用CSS的“background-repeat”才能实现
Ø CSS将网页内容与样式进行了分离，实现了对两者的“解耦和”，因此使得样式内容可以被很好的复用，大大提高了网站开发者的工作效率和后期的维护工作
特性：
继承性：
指被包在内部的标签将拥有外部标签的的样式性质。
例：
层叠性：
指当有多个选择器都作用于同一元素时，即多个选择器的范围发生了重叠，CSS该怎样处理？
（1） 若多个选择器定义的样式不发生冲突，则元素应用所有选择器定义的样式
例：
（2） 若多个选择器定义的样式发生冲突（比如：同时定义了字体颜色属性），则CSS按选择器的优先级，让元素应用优先级高的选择器样式。
CSS定义的选择优先级从高到低为： 行内样式 > ID样式 >类别样式>标记样式
测试：
<html>
<head>
<title>css层叠测试21</title>
<style type="text/css">
/*标记样式*/
p{color:yellow}
/*类别样式*/
.classStyle{color:blue}
/*ID样式*/
#idStyle{color:green}
</style>
</head>
<body>
<!--行内样式-->
<p class="classStyle" id="idStyle" style="color:red">Hello World</p>
</body>
</html>
分别用四种样式设置“Hello World”的颜色属性，最终显示样式是“行内样式”的red。如下：
注：我们可以通过“ !important“属性强制改变选择器优先级，加！important的选择器优先级最高。
例：将上例中的标签样式语句改为“p{color:yellow !important}”，这样运行结果会变为黄色，通过加！important，将本来优先级最低的“标签样式”变为了优先级最高。
CSS在HTML中的三种用法：
（1）内联样式表：
直接将使用HTML元素的style属性来改变元素的样式，style属性可以应用于任意body元素（包括body本身）
例：
<html> <head> <title>css内联样式表测试</title> </head> <body> <p style="color:red">这里应用css内联样式表，为红色字体</p> </body> </html>
运行结果：
（2）内部样式表：
采用HTML元素的style属性，将样式表的内容定义在HTML文件的<head>标记内，例：
<html>
<head>
<title>css内部样式表测试</title>
<style type="text/css">
.csstest{color:blue}
</style>
</head>
<body>
<p class="csstest">这里应用css内部样式表，为蓝色字体</p>
</body>
</html> 运行结果：
（3）外部样式表：
指引用一个样式表文件（是一个扩展名为.css的文本文件），可以将一个文件应用于多个html页，使得 样式可复用，大大提高了网站开发效率。
引用一个样式表有两种方法：（1）链入外部样式表 （2）导入外部样式表
（3.1）链入外部样式表：
在HTML文件的<head>区域内使用<link>标记进行链接，语法：
<link rel=”stylesheet” type=”text/css”href=”url”/>
其中url为样式表文件的地址，可以是相对地址和绝对地址
<html> <head> <title>css外部样式表-链入外部样式表测试</title> <link rel=”stylesheet” type=”text/css” href=”style/style.css”/> </head> <body> <p class="csstest">这里应用css外部样式表，为红色字体</p> </body> </html>
原理：<link rel=”stylesheet”type=”text/css” href=”url”/>告诉浏览器，在执行html文件时，应使用相应url下的css文件进行布局和格式化。（文件style.css放在style目录下，代码为 .csstest{color:red}）
（3.2）导入外部样式表：
在HTML文件的<style> 区域内引用一个外部样式表文件，语法如下：
<style type="text/css"> @import url(样式表目录地址) … </style>
@import声明可以放到<head>标记之外，也可以放到<head>标记之内，但根据语法规则，一般放到<head>内使用，举例如下：
<html> <head> <title>css外部样式表-导入外部样式表测试</title> <style type="text/css"> @import url(style/style.css)； </style> </head> <body> <p class="csstest">这里应用css外部样式表的导入外部样式表形式，为红色字体</p> </body> </html>
原理同上面的“链入外部样式表”;
注：@import声明后的“； ”不能省略，此外，某些浏览器可能不支持导入外部样式表的@import声明，所有最好别用这种方法，见到了认识即可。
作者：wang379275614 发表于2013-7-31 19:39:06 原文链接
阅读：101 评论：1 查看评论
相关 [css html] 推荐：
解耦 HTML、CSS和JavaScript
- - ITeye资讯频道当前在互联网上，任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript. 随着互联网运用的发展以及我们对它的依赖性日益增加，设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司，由于越来越多的人会接触到日益增加的前端代码，它们会试图去坚持代码的模块化.
在线调试并共享HTML,CSS,JS
- Albert - [米随随] s5s5如题，以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).
[html/css/js]搜索建议提示
- - CSDN博客推荐文章// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时，隐藏提示标签. // 失去输入焦点时，判断输入框的是否有值，有则显示提示标签. // 窗口加载完dom结构时. .
HTML 5 & CSS 3的新交互特性
- chacoo - 所有文章 - UCD大社区本文标题的这副图片，是用Phosotshop制作的. 但是，在搜索引擎中你却无法搜索到它，搜索引擎还没有强大到能够识别图片里面的文字. 并且由于图片的体积不算太小，可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新. 那么，有没有一种新的方法可以避免这些缺点呢. 有的，HTML5和CSS3就可以满足你的需求.
HTML&CSS构建网站链接
- - 技术改变世界 创新驱动中国 - 《程序员》官网文/Jon Duckett. 链接是网络的主要特色，因为链接允许你从一个网页跳转到另一个网页—实现了人们在网上浏览和冲浪的想法. 一般情况下，你会遇到下面几种链接：. 从一个网站指向另一个网站的链接. 从一个网页指向网站内部另一个网页的链接. 从网页的一个位置指向同一网页内另一个位置的链接. 启动你的电子邮件程序并为其添加收件人的链接.
优秀的 HTML 和 CSS 代码规范
- - SHTION官方网站HTML 和 CSS 代码规范究竟是怎么样的. 做网站时， HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好 HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员，要求使用者具有一定的 HTML、CSS基础知识，对原代码具有较强的控制能力.
6种编写HTML和CSS的最有效的方法
- Ling:™ patient() - 博客园新闻频道 写HTML5和CSS3，以及JavaScript，前端开发者有了大大的用武之地. 大家都在用很多的工具和技术来武装自己，以加快前段的开发. 本文分享了6中最有效的方法，希望能提供你的效率，为你节约时间. Dynamic CSS（动态 CSS）. 如果你想加速你的CSS代码编写，那么你需要学习并掌握动态CSS.
分享45款高质量的免费(X)HTML/CSS模板
- Mikel - 博客园-首页原创精华区 当你需要在短时间内设计出一个网站的时候，网站模板就非常有用了. 这也就是为什么这些设计模板已成为设计领域的最新趋势的原因. 在这篇文章中，收集了各式各样的网站模板，您可以免费下载使用，希望这些设计模板不仅带给您灵感，也让您回到创作轨迹. Coffee Maker
( 演示 | 下载 ). BusinessTemplate
( 演示 | 下载 ).
翻译：谷歌HTML、CSS和JavaScript风格规范
- - 张鑫旭-鑫空间-鑫生活本文地址： http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址： http://…style-guides/. 原文作者： Craig Buckler. 注：本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范，而是一种带有总结性质的简单称述.