CSS 基础
来源:互联网 发布:网络授课平台 编辑:程序博客网 时间:2024/06/17 13:58
dvi 标签和 span 标签
这两个标签可以看成是空的容器,其中可以放置内容。
div 表示的是内容块,前后都有换行;span 在行内使用,是段落的一部分。两个标签都没有继承任何外观属性,所以可以使用 CSS 为它们定义任何所需要的样式。
div 标签表示分离的内容块,与段落和标题很像。最常用于组织任意数量的其他元素,可以在一个 div 标签中放置一个标题、几个段落和一个无序列表。div 标签适用于把网页分成不同的逻辑分区,例如横幅、页脚和侧边栏等。
span 标签用于标识行内元素:段落或标题中的单词或短语。其中还经常用到 id 和 class 属性。
HTML5 新增标签
HTML5 新增了许多不同的标签用于替代或拓展 div 标签。
- article:用于标识网页中完整独立的作品,例如一篇博客、文章、在线杂志里的一篇文章或者网页主体的内容。
- header:用于标识页头或横幅,即网页的顶部,通常包含徽标、站内导航、页面标题和标语等。
- section:用于组织相关内容,例如一本书里的一章。
- aside:用于表示与附近的内容有关的内容。例如纸质杂志的旁注可以放在 aside 标签里。
- footer:包含通产放在页脚的信息,例如版权声明、法律信息和一些站内导航链接等。一个网页不限于只使用一个 footer 元素,article 元素里可以使用 footer 元素放置于文章相关的信息,比如脚注、参考资料与引用等。
- nav:用于放置主要的导航链接。
- figure:用于标识插图。标签中可以放置一个 img 标签,以及 figcaption 标签,为 figure 标签里的图片添加图题。
支持 IE8
IE8 无法识别 HTML5 标签,如果一定要支持 IE8 ,有两种解决方案。
不使用 HTML5 新增的标签,继续使用 div 标签结构化 HTML。
在 head 标签结束前加一段内容:
<!-- [if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
通过“IE 浏览器条件注释”把一些 js 代码嵌入网页,而且这段代码只对 IE9 之前的版本可见。使得他们加载一小段 js 代码,强制浏览器识别 HTML5 标签,并解析依附在这些标签上的 css 样式。
这段代码只会影响浏览器显示和打印 HTML5 标签的方式,并不能让浏览器真正支持 HTML5 标签,做出该有的反应。
编写结构良好的网页的一些技巧
- 使用各级标题标识相对重要的文字。
- 使用 p 标签标识文本段落。
- 使用无序列表 ul 列出几个相关条目,例如导航链接,目录等。
- 使用有序列表 ol 列出操作步骤,或者定义一些条目的顺序。
- 如果想创建词汇表,定义术语的含义,可以使用 dl (定义列表)、dt (术语)和 dd(描述)这些标签。
- 引用的话,长的句子可以使用 blockquote 标签,在长段落中插入简短的引文可以使用 q 标签。
- 使用 cite 标签引用书名、报纸中的文章或者网站名,使用 address 标签标识和提供谋篇文章作者的联系信息(适合标识版权声明)。
- 不要使用任何仅用于改变文字或图像外观的标签和属性。
- 如果找不到合适的标签,但是想标识网页中的一个或多个元素,为其设计独特的外观,可以使用 div 和 span 标签。
- 不要滥用 div 标签。创建导航栏时,ul 是更好的选择。
- 记得关闭标签。
- 使用 W3C 的验证程序验证网页。
剖析 CSS 样式
p {color: red; font-size: 1.5em;}
- 选择符:告诉 Web 浏览器把样式应用到哪个或哪些元素上。
- 声明块:位于选择符之后,是想应用到所选元素上的全部格式指令。从 { 开始,到 } 结束。
- 声明:位于声明块之间。由两部分组成:属性和值。属性和值之间由冒号分隔,整个声明以分号结尾。
- 属性:CSS 提供了很多格式选项,称为属性,指代某种样式效果。
- 值:为 CSS 属性提供值。
样式表类型
行内样式,写起来浪费时间,而且更加耗费带宽。
<h1 style="color: #fff; font-size: 3em;">
内部样式。
<title>CSS</title><style>h1 { color: #fff; font-size: 3em; margin: 0;}</style></head>
外部样式。
<link href="styles.css" rel="stylesheet">
阅读全文
0 0
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- css基础
- css基础
- CSS基础
- CSS基础
- CSS基础
- CSS基础
- c++ 宏
- JDBC中连接池的概述(DataSource)
- scatter函数绘制散点图——MATLAB
- 神经网络的可视化
- org.hibernate.exception.SQLGrammarException: could not extract ResultSet
- CSS 基础
- 6th 【差分数组】数列游戏
- 【数据结构 一】---数组
- SARIMA初步研究
- java中mysql的JDBC的事务管理
- Thymeleaf 之 内置对象、定义变量、URL参数及标签自定义属性
- CentOS7 yum 安装git
- 致年轻时如此拼搏的你我
- Python图表绘制:matplotlib绘图库入门