• CSS选择器及CSS样式表


    前言    

        牛腩新闻发布系统中记忆最深的就是各种CSS选择器各种CSS样式,这些选择器之间肯定有它的优先级,包括CSS样式也一样,也是有它的优先级,本文介绍一些各种CSS选择器各种CSS样式以及它们的优先级。

    内容

    CSS语法

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

    CSS选择器部分


    DEMO

    标记选择器

    Html部分

      <!--标记选择器-->
    <h1>Hello World</h1>

    CSS部分

     

    h1{
      color:red;
      font-size:12px;
    }

    id选择器

    Html部分


      <!--id选择器-->
    <div id="iddemo">Zhoulitong</div>

    CSS部分

     

    #iddemo{
      color:red;
      font-size:12px;
    }


    类别选择器

    Html部分


      <!--类别选择器-->
    <div class="iddemo">Zhoulitong</div>

    CSS部分

     

    .iddemo{
      color:red;
      font-size:12px;
    }


        最常用的选择器就上面的三种,它们的效率优先级:id选择器(#id>类选择器(.class>标记选择器(divh1p,其实还有其他选择器比如:相邻选择器,子选择期,后代选择器,通配符选择器,属性选择器,伪类选择器,这些不是特别常用的,在这里不做解释。

     

    CSS样式表部分

    外部样式表(链接式):当样式需要被应用到多个页面时候,外部样式将是理想的选择。使用该样式表可以通过更改一个文件来改变整个站点外观。

     

    <head>
        <title>@ViewBag.Title</title>
                    @*链接样式*@
        <link href="../../CSS/Master.css" rel="stylesheet" />
    
    </head>

    内部样式表(内嵌式):单个文件需要时用到内部样式表。一般在通过<style></style>标签定义内部样式表。

     

    <head>
    <style type="text/css">
      hr {color: sienna;}
      p {margin-left: 20px;}
      body {background-image: url("images/back40.gif");}
    </style>
    </head>

    内联样式(行内样式):特殊的样式需要应用到个别元素时,可以采用内联样式,使内联样式的方法是在相关标签中使用样式属性。采用style=””形式。

     

                                    @*行内样式*@
     <div style="margin-top :30px;margin-right :20px; float:right ;width :600px;text-align :center ;">
        检索类型:<select id="SelectText" style ="padding-left:4px;padding-right :4px; ">
            <option>书籍类别</option>
            <option>书籍作者</option>
            <option>书籍名称</option>
        </select>
            
        检索内容:<input id="SearchText" type="text" />
        <input id="Button1" type="button" value=" 检索 " onclick="SearchClick()" />
    </div>

    各种方式的优先级:内联样式>外部样式表>内部样式表


    感谢您的宝贵时间···

  • 相关阅读:
    SVG Stroke属性
    C# 线程同步之排它锁/Monitor监视器类
    在Mac OS X Yosemite 10.10.3 中搭建第一个 ASP.NET 5 Web 项目
    jquery 之 Deferred 使用与实现
    jQuery 之 Callback 实现
    在解决方案中所使用 NuGet 管理软件包依赖
    下载和使用 Open XML PowerTools
    下载和编译 Open XML SDK
    Open XML SDK 在线编程黑客松
    VS2013 解决方案文件结构分析
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412379.html
Copyright © 2020-2023  润新知