zoukankan      html  css  js  c++  java
  • CSS使用方式

    一.HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。

    1.内联方式 Inline Styles

    内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。

    <p style="color:#f00">这一行的字体颜色将显示为红色</p>

    2.内部样式块对象 Embedding a Style Block

    你可以在你的HTML文档的<head>标记里插入一个<style>块对象。

    <style>
    body{background:#fff;color:#000;}
    p{font-size:14px;}
    </style>

    3.链入外部样式表 Linking to a Style Sheet

    你可以先建立外部样式表文件*.css,然后使用HTML的link对象。

    <head>
    <title>文档标题</title>
    <link rel="stylesheet" href="*.css" />
    </head>

    二. CSS的具体使用可依据CSS选择器,用于选择需要添加样式的元素。常见的CSS选择器有以下三种:

    1.标签选择器

    每个html页面都由很多个标签组成,通过标签选择器可以对某类标签应用相应的样式,如对p标签应用下面的样式,则页面中所有的p标签都会生效.

    标签的每个申明属性用分号“;”分割,最后一个申明末尾可加分号,也不不加分号。

    <style type="text/css">
    p{ font-size:12px; color:red; background:blue; }
    </style>

    2.类(Class)选择器

    以一种独立于文档元素的方式来指定样式。到页面元素使用时,添加属性Class指定为定义的样式的名称。

    • 类名称在CSS中必须以点(.)作为前缀,紧跟一个具有语义性的自定义类名(className)。
    • CSS只允许在类名称中使用字母、数字、连字号(-)和下划线(_)。
    • 在圆点之后,名称始终必须以字母开头。
    • 类名称区分大小写。
    • 一个标签可以有多个类选择器,不同的值用空格隔开,这样多个样式便可以应用的一个标签上。

    定义如下:

    <style type="text/css">
    .error{ width:200px; padding:5px; color:red;}
    </style>

    使用如下:

    <div class="error"> </div>

    另外类Class选择器也可以针对不同的标签,实现同样的样式命名对于不同的标签有不同的样式,只要在样式名前加标签即可。

    定义如下:

    <style type="text/css">
    input.accountinfo{text-align:right;color:red;}
    label.accountinfo{font-style:italic}
    </style>

    使用如下:

    <input class="accountinfo" type="text" value="确定" />
    <label class="accountinfo" >月之圣痕</label>

    3.ID选择器

    为标记特定id的HTML元素指定特定的样式。

    • ID选择器名称在CSS中必须以井号(#)作为前缀,紧跟一个具有语义性的自定义名称。
    • CSS只允许在选择器名称中使用字母、数字、连字号(-)和下划线(_)。
    • 在井号后,名称始终必须以字母开头。
    • ID选择器名称区分大小写。
    • 在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。

    定义如下:

    <style type="text/css">
    #divID{width:100px;height:20px;border:1px solid red;}
    </style>

    使用如下:

    <div id="divID"></div>
    高调做事,低调做人~!
  • 相关阅读:
    Struts2框架
    读者写者问题
    哲学家就餐问题
    理解中断
    理解处理机调度
    理解死锁
    理解进程
    Linux CentOS 6.7 挂载U盘
    家庭-养老院模型理解IOC和DI
    Bash基础
  • 原文地址:https://www.cnblogs.com/514687800/p/3363289.html
Copyright © 2011-2022 走看看