CSS综合实例

在Web页面中经常使用栏目显示分类内容。本例将使用HTML和CSS结合编写一个分类栏目模型，用于演示前面介绍的CSS应用。通过使用独立的文件定义样式表，并在HTML文档中使用link标记与其链接，使HTML代码和CSS代码完全分离。在HTML文档中只负责输出栏目的内容，而栏目的样式则完全由CSS控制。创建一个名为list.html的HTML文档文件，代码如下所示：

在上面的HTML文件中输出一个分类栏目，包括栏目标题、栏目内容区块及内容列表等。但没有定义栏目的显示格式，而是链接一个外部样式表文件style.css，由这个文件中的CSS代码控制输出栏目的样式格式。代码如下所示：

通过将样式文件style.css加入到HTML文件list.html中，则HTML文档中定义的各个元素使用了CSS进行控制，而HTML可以保持简单明了的初衷。直接访问list.html文件的输出结果如图所示。

图 HTML和CSS结合使用输出栏目内容

IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值5的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值1

    CSS中的样式属性比较多,经常使用的属性可以分为这么几类:字体.文本.背景.位置.边框.列表,以及其他一些样式属性.每个类中的属性都可以单独使用:如果同一个类中多个属性一起使用,还可以将它们整合为一行 ...

  2. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值4

    6  鼠标光标属性 在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”.但现在越来越多的网页都使用了CSS鼠标指针技术,当将鼠标移动到链接上时,可以看到多种不同 ...

  3. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值2

    3  背景属性 大多数HTML元素都允许控制背景,包括背景颜色.背景图像.背景重复.背景附件.背景位置等属性.常见的控制背景属性.值及描述如表2所示. 表2  CSS中常见的控制背景的属性 除了使用表 ...

  4. IT兄弟连 HTML5教程 CSS3揭秘 CSS常见的样式属性和值3

    5  边框属性 边框属性用于设置一个元素的边框风格.边框宽度.边框颜色,可以一起设置4条边的边框,也可对上边框.右边框.下边框和左边框单独设置.分别介绍如下. a．边框风格属性 可以通过边框风格属性b ...

  5. IT兄弟连 HTML5教程 CSS3揭秘 CSS规则的组成

    CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS简介

    HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器2

    4  结构性伪类选择器 在学习结构性伪类选择器之前,先了解两个概念:伪类选择器和伪元素选择器.伪类选择器是CSS中已经定义好的选择器,不能随便命名.常用的伪类选择器是使用在a元素上的几种,如a:lin ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS选择器1

    要使用CSS对HTML页面中的元素实现一对一.一对多或者多对一的控制,就需要用到CSS选择器.选择器是CSS3中一个重要的内容,使用它可以大幅度地提高开发人员书写或修改样式表的效率.在大型网站中,样式 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 在HTML文档中放置CSS的几种方式

    有很多方法将样式表加入到HTML中,每种方法都有自己的优点和缺点.新的HTML元素和属性已被加入,以允许样式表与HTML文档更简易地组合起来.将样式表加入到HTML中的常用方法有内联样式表.嵌入一张样 ...

随机推荐

  1. 大数据学习笔记——Hadoop高可用完全分布式模式完整部署教程(包含zookeeper)

    高可用模式下的Hadoop集群搭建 本篇博客将会在之前写过的Linux的完整部署的基础上进行,暂时不会涉及到伪分布式或者完全分布式模式搭建,由于HA模式涉及到的配置文件较多,维护起来也较为复杂,相信学 ...

  2. 面试BAT前先搞定这18道MySQL经典面试题（含答案解析）

    一.MySQL的复制原理以及流程 (1)复制基本原理流程 1. 主:binlog线程——记录下所有改变了数据库数据的语句,放进master上的binlog中: 2. 从:io线程——在使用start ...

  3. 《Java基础知识》Java static关键字以及Java静态变量和静态方法

    static 修饰符能够与变量.方法一起使用,表示是“静态”的. 静态变量和静态方法能够通过类名来访问,不需要创建一个类的对象来访问该类的静态成员,所以static修饰的成员又称作类变量和类方法.静态 ...

  4. 《Dotnet9》系列-开源C# WPF控件库强力推荐

    时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...

  5. 【Spring】只想用一篇文章记录@Value的使用，不想再找其它了(附思维导图)

    1 简介 不得不说,Spring为大家提供许多开箱即用的功能,@Value就是一个极其常用的功能,它能将配置信息注入到bean中去.即使是一个简单的功能,Spring也提供了丰富的注入类型和形式.我经 ...

  6. HTML连载57-相对定位和绝对定位

    一.定位流 1.分类 (1)相对定位: (2)绝对定位 (3)固定定位 (4)静态定位 2.什么相对定位 相对定位就是相对于自己以前在标准流中的位置来移动. 例子: <style> div ...

  7. Shell（五）：函数

    linux shell 可以用户定义函数,然后在shell脚本中可以随便调用. shell中函数的定义格式: [ function ] funname [()] { action; [return i ...

  8. standard_init_linux.go:207: exec user process caused "no such file or directory"

    运行docker容器异常中止,使用docker logs CONTAINER_ID查看异常信息如下:standard_init_linux.go:207: exec user process caus ...

  9. 用 Keras 实现单词级的 one-hot 编码 & 使用散列技巧的单词级的 one-hot 编码

    from keras.preprocessing.text import Tokenizer samples = ['The cat sat on the mat.', 'The dog ate my ...

  10. C# .NET的BinaryFormatter、protobuf-net、Newtonsoft.Json以及自己写的序列化方法序列化效率和序列化后的文件体积大小对比

    测试结果如下图: 测试结果整理后: 结论: 1.这几个工具中,protobuf-net序列化和反序列化效率是最快的 2.BinaryFormatter和Newtonsoft.Json反序列化慢的比较多 ...