zoukankan      html  css  js  c++  java
  • 脚本化CSS(一)

    一、概览

    CSS定义了属性以指定字体、颜色、外边距、边框、背景图片、文本对其方式、元素尺寸和元素位置。

    1 font-weight:bold;
    2 margin-left:10%;    /*左边距是页面宽度的10%*/
    3 text-indent:.5in;    /*1/2英寸缩进*/
    4 font-size:12pt;    /*字体尺寸12pt*/

    样式的引用方法:

    1.内联样式

    2.用<style>和</style>标签把一个CSS样式表抱起来放在<head>标签里

    3.保存在单独的文件中,在文档的<head>中使用<link>标签引入

    1 <link rel='stylesheet' href='demo.css' type='text/css'/>

    二、CSS历史

    CSS1在1996年12月被采纳,他定义了具体的颜色、字体、外边距、边框和其他的基本样式。

    CSS2在1998年5月被采纳,它定义了许多高级特性,最著名的就是支持元素的绝对定位。

    CSS2.1澄清和更正了CSS2,并且它删除了浏览器供应商从未实现的功能。现代浏览器基本上都完全支持CSS2.1,但是低于IE8的IE还有一些遗漏问题。

    CSS3将CSS划分为更小的模块。

    三、复合属性

    1 font:bold italic 24pt helvetica;

    四、非标准属性

    当浏览器厂商实现非标准CSS属性时,它们在属性名前面加了一个厂商前缀。

    Firefox -moz-

    Chrome -webkit-

    IE -ms-

    Opera -o-

    五、CSS举例

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset='utf-8'/>
     5 <title>demo</title>
     6 <style>
     7     h1,h2{
     8         color: blue;
     9         font-style: italic;
    10         text-align: center;
    11     }
    12     .WARNING{
    13         font-weight: bold;
    14         font-size: 150%;
    15         margin: 0 1in 0 1in;
    16         background: yellow;
    17         border: solid red 8px;
    18         padding: 10px;
    19     }
    20     #special{
    21         text-align: center;
    22         text-transform: uppercase;
    23     }
    24 </style>
    25 </head>
    26 
    27 <body>
    28 
    29 <h1>Cascading Style Sheets Demo</h1>
    30 
    31 <div class='WARNING'>
    32     <h2>Warning</h2>
    33     This is a warning!
    34     Notice how it grabs your attention with its bold text and bright colors.
    35     Also notice that the heading is centered and in blue italics.
    36 </div>
    37 
    38 <p id="special">
    39     This paragraph is centered <br/>
    40     and appears in uppercase letters. <br/>
    41     <span style="text-transform: none;">
    42         Here we explicitly use an inline style to override the uppercase letters.
    43     </span>
    44 </p>
    45 
    46 </body>
    47 </html>

    浏览器运行结果:

  • 相关阅读:
    C# Cache的类方法
    a href="javascript:void(0)"
    细数银行7大手续费 这些冤枉钱别再交了
    mysql 中order by 与group by的顺序
    java springboot 将html页面转成图片
    SpringBoot读取Resource下文件的几种方式
    在CentOS 6.X中安装中文字体
    第三方api调用HttpClient
    java通过html生成pdf,支持css和图片以及横向打印
    nginx配置静态文件和服务代理
  • 原文地址:https://www.cnblogs.com/liuqiuchen/p/4519770.html
Copyright © 2011-2022 走看看