zoukankan      html  css  js  c++  java
  • 疯狂学习java web2(css)

    CSS应该是样式描述的意思,定义如下:

    什么是 CSS?

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

     

    先上代码:
    <!DOCTYPE html>
    <html>
        
    <head>
        <style>
            body
            {
            background-color:#d0e4fe;
            }
            h1
            {
            color:orange;
            text-align:center;
            }
            p
            {
            font-family:"Times New Roman";
            font-size:20px;
            }
        </style>
    </head>
     
     
    <body>
        <h1>CSS example!</h1>
        <p>This is a paragraph.</p>
    </body>
     
    </html>        

    代码比较简单,而且很明显,CSS是写在head部分的,在各种标签中加以说明,渲染body中各对应标签的内容.

    效果如下:

    image

     

    CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

    image

    选择器通常是您需要改变样式的 HTML 元素。

    每条声明由一个属性和一个值组成。

    属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。


    CSS 实例

    CSS声明总是以分号(;)结束,声明组以大括号({})括起来:

    p {color:red;text-align:center;}

    为了让CSS可读性更强,你可以每行只描述一个属性:

    实例

    p
    {
    color:red;
    text-align:center;
    }

     

    id选择器:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #para1
    {
    text-align:center;
    color:red;
    } 
    </style>
    </head>
     
    <body>
    <p id="para1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>
    </body>
    </html>        

    效果如下:

    image

     

     

    类(class)选择器:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center
    {
    text-align:center;
    }
    </style>
    </head>
     
    <body>
    <h1 class="center">Center-aligned heading</h1>
    <p class="center">Center-aligned paragraph.</p> 
    </body>
    </html>        

    效果如下:

    image

    果然,CSS这东西看了,对很多东西开始有感觉,原来复杂的就是渲染.

  • 相关阅读:
    ffmpeg开发系列--av_read_frame()
    2013~2014
    javascript
    javascript
    javascript目录
    最长连续和与最大子矩阵
    成功者具备的十五种能力
    视频综合管理平台EasyNVS在实现代理时调用EasyDSS接口如何携带token?
    在线课堂Web无插件直播点播系统EasyDSS如何接入第三方视频管理平台EasyNVS?
    TSINGSEE青犀视频开发的EasyNTS上云网关网络穿透/远程运维在系统维护中的应用
  • 原文地址:https://www.cnblogs.com/luhouxiang/p/4329809.html
Copyright © 2011-2022 走看看