• 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>
  • 相关阅读:
    极简的js点击组图切换效果
    原生js登录创建cookie
    原生js的表单验证
    Inno Setup 检测已安装的.NET Framework 版本
    IntelliJ IDEA中创建并运行scala应用程序
    解决eclipse中maven出现的Failure to transfer XXX.jar的问题
    初识python yield
    解决pycharm无法导入本地包的问题(Unresolved reference 'tutorial')
    理解Python的with as语句
    scrapy写爬虫是出现no module named win32api错误
  • 原文地址:https://www.cnblogs.com/greenteaone/p/2342276.html
Copyright © 2020-2023  润新知