• CSS学习(1)(网页编程)


         1. CSS定义

        级联样式表(Cascading Style Sheet)简称”CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页样式设计的。通过设立样式表,可以统一地控制HMTL中各标签的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。

        2. CSS如何使用

        当读到CSS时,浏览器会根据它来格式化HTML文档,插入CSS的方法有三种:

          2.1 外部样式表

          当样式需要多页面重复利用时,要用外部样式表实现。这样可以通过改变一个文件来改变整个站点的外观。

          具体用法:

              创建后缀为css的文件(这里我创建的文件为StyleSheet1.css),在css文件中编写css代码,保存。

              最后在每个要用到此样式文件的页面中使用<link>标签链接到样式文件中的样式表。<link>标签应写在<head>标签内。实现代码如下:

    <head>
    <link href="http://www.cnblogs.com/style/StyleSheet1.css" rel="stylesheet" type="text/css" />
    </head>

           2.2 内部样式表

           当单个页面需要特殊的样式时,使用内部样式表。

          具体用法:

              在 <style> 标签内写内部样式表,<style>标签要写在<head>标签内部。示例代码如下:

    View Code
    }
    <style type="text/css">
    html, body
    {
    height: 100%;
    margin: 0;
    }

    #header
    {
    96%;
    height: 40px;
    background: #efdfed;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 0 0 50px;
    margin: 0px 2px;
    color: Red;
    }

    #nav
    {
    96%;
    height: 30px;
    background: #efdfed;
    font-weight: bold;
    font-size: 16px;
    padding: 12px 0 0 50px;
    margin: 5px 2px;
    color: Red;
    }

    #content
    {
    96%;
    height: 42%;
    background: #efdfed;
    font-size: 16px;
    font-weight: bold;
    padding: 17% 0 0 50px;
    margin: 5px 2px;
    color: Red;
    }

    #footer
    {
    96%;
    height: 30px;
    background: #efdfed;
    font-weight: bold;
    font-size: 16px;
    padding: 15px 0 0 50px;
    margin: 5px 2px;
    color: Red;
    }
    </style>
    <div id="header">header</div>
    <div id="nav">nav</div>
    <div id="content">content</div>
    <div id="footer">footer</div>
     

         2.3 内联样式

         内联样式将表现和内容混杂在一起,这样会损失掉样式表的许多优势,所以一般当样式仅需要在一个元素上应用一次时采用这种方法。

         具体用法:

             在标签内使用style属性。示例如下:

    <div id="header" style="background: yellow; height: 100px; margin: 5px; line-height: 100px;padding: 5px; float: left;">
    header</div>
  • 相关阅读:
    Excel 相关实用计算公式
    C# ThreadState属性分析
    U8 数据库服务器和应用服务器 分离后出现 登陆系统管理 远程组件初始化 失败 解决方案!
    MyEclipse 快捷键
    项目中用到的开源框架
    spring.net nhibernate 不一定是自增变量,也可能是触发器 Batch update returned unexpected row count from update; actual row count: 2; expected: 1
    解决方法: A C3P0Registry mbean is already registered.This probably means that an application using c3p0的警告信息处理
    NHibenate hbm.xml 自动 生成 数据库表的时候 长度为1
    解决方法: Failed to load the sqljdbc_auth.dll
    SQL 中判断 纯数字
  • 原文地址:https://www.cnblogs.com/greenteaone/p/2342276.html
Copyright © 2020-2023  润新知