• CGI编程学习5 穿插HTML,CSS零星知识


    今天,看了同学写的HTML代码很糟糕.就自己重写了一下.

    了解了一些HTML.CSS知识.现记录在这里.

    先给大家一个比较好的CSS教程网站:

    http://www.w3school.com.cn/css/index.asp

    CSS 概述

    • CSS 指层叠样式表 (Cascading Style Sheets)
    • 样式定义如何显示 HTML 元素
    • 样式通常存储在样式表
    • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
    • 外部样式表可以极大提高工作效率
    • 外部样式表通常存储在 CSS 文件
    • 多个样式定义可层叠为一

    要加入CSS.需要如下写:

    		<style type="text/css">
    		body {
    			  background-image:url(sercer.files/smarthome.jpg);
    			  background-repeat:repeat-x;
    			  background-repeat:repeat-y;
    			  background-position:center;
    			  }
    		</style>

    上面CSS的功能是设置一个背景图片并将它放在中间显示.

    HTML <p> 标签

    <p> 标签定义段落。

    p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间,您也可以在样式表中规定。

    实例

    以下代码标记了一个段落:

    <p>This is some text in a very short paragraph</p>

    TIY (在页面下部,您可以找到更多实例。)

    HTML <span> 标签

    定义和用法

    <span> 标签被用来组合文档中的行内元素。

    HTML 与 XHTML 之间的差异

    NONE

    提示和注释:

    提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。

    注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。

    例子

    <p><span>some text.</span>some other text.</p>

    例子解释

    如果不对 span 应用样式,那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此,上例中的 span 元素仍然为 p 元素增加了额外的结构。

    可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

    可以对同一个 <span> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

    提示:事实上,您也许已经注意到了,W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多,但是我们的做法是:使用“提示”使用 span 元素,然后对这个 span 元素的父元素,即 p 元素应用 class,这样就可以对这个类的子元素 span 应用相应的样式了。

    HTML:

    <p class="tip"><span>提示:</span>... ... ...</p>

    CSS:

    p.tip span {
    	font-weight:bold;
    	color:#ff9955;
    	}
  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    AngularJS学习笔记1
    实习第2天
    转:JavaScript事件冒泡简介及应用
    icon font字体图标字库汇总
    Express4--说明
  • 原文地址:https://www.cnblogs.com/hnrainll/p/2068632.html
Copyright © 2020-2023  润新知