zoukankan      html  css  js  c++  java
  • CSS样式表

    ---恢复内容开始---

    CSSCascading Style Sheet,叠层样式表),作用是美化HTML网页。

    1.内联样式表----冗余较多,不常用

    <p style="font-size:14px;">内联样式表</p>

    2.内嵌样式表----样式表不多的话,可用

    作为一个独立区域内嵌在网页里,必须写在head标签里面。

      

    <style type="text/css">
    
      p   //格式对p标签起作用 ,可以适用于font,div等等。
    
      {
    
      样式;
    
      }
    
      </style>

    3.外部样式表-----最常用的

    新建一个CSS文件,用来放置样式表。如果要在HTML文件中调用样式表,需要在HTML文件中点右键CSS样式表→附加样式表。一般用link连接方式。

    <style type= "text/css">----这个样式表每次都要用
    
    *    //格式对所有标签起作用
    
    {
    
         margin:0px;去除边距
    
         padding:0px;去除间距
    
    }
    
    </style>

    选择器

    1、标签选择器。用标签名做选择器。例:

    1 h1
    2 {
    3     font-size: 36px;
    4     font-family:"黑体";
    5     color:#900;
    6     font-weight: 900;
    7 }

    body标签里,例如:<h1>创建与管理站点</h1>显示结果就是CSS样式里的内容。

    2、class选择器。都是“.”开头。

    .qq
    {
        background-color:#33C;
        font-size:12px;
        color:#390;
    }

    用法

    <p class="qq">站点是一系列文档的组合,这些文档之间通过各种链接联系起来,拥有相似的属性,如描述相关的主题、采用相似的设计风格等。<p>

    3、ID选择器。以“#”开头

    #main<!--id-->
    { height:42px;
    height:100%;
    text-align:center;
    }

    用法同class类似。

    4、复合选择器。

    1)、用“,”隔开,表示并列。

    ul,li,ol,dt,dd
    {
    font-family:"隶书";
    font-size:12px;
    line-height:28px;
    }

    标签凡是ul,li,ol,dt,dd都用以上样式

    2)、用空格隔开,表示后代。

    li font
    {
        background-color:#FF6;    }

    用法:font标签里才应用此样式

    <ol type="A">
    <li>启动Dreamweaver,选择菜单中的<font>【站点】</font>|<font>【管理站点】</font>命令。</li>

    3)、筛选“.”。

    与后代类似,不讲了

    <style type="text/css">
    
      p.sp    /*在标签p中的class="sp"的标签,执行以下样式*/
    
      {
          样式;  }
    
      </style>

    下面是案例:仿360标签做的,按L-A-H-A的顺序

    <style type="text/css">
    
      a:link
    {
        text-decoration:none;
        color:#000;}
    a:visited
    {
        text-decoration:none;
        color:#000;}
    a:hover
    {
        color:#F00;
        text-decoration:underline;}
    a:active
    {
        text-decoration:underline;
        color:#C60;}
      </style>
     
    <body>
    <
    a href="http://www.autohome.com/">汽车之家</a>
    </body>

    背景与前景

      background-color:#F90;    /*背景色,样式表优先级高*/

      background-image:url(路径);    /*设置背景图片(默认)*/

      background-attachment:fixed;    /*背景是固定的,不随字体滚动*/

      background-attachment:scroll;    /*背景随字体滚动*/

      background-repeat:no-repeat;    /*no-repeat,不平铺;repeat,平铺;repeat-x,横向平铺;repeat-y,纵向平铺*/

      background-position:center;    /*背景图居中,设置背景图位置时,repeat必须为“no-repreat”*/

      background-position:right top;    /*背景图放到右上角(方位可以自己更改)*/

      background-position:left 100px top 200px;    /*离左边100像素,离上边200像素(可以设为负值)*/

      字体

      font-family:"新宋体";    /*字体。常用微软雅黑、宋体。*/

      font-size:12px;    /*字体大小。常用像素12px、14px、18px。还可以用“em”,“2.5em”即:默认字体的2.5倍。还可以用百分数*/

      font-weight:bold;    /*bold是加粗,normal是正常*/

      font-style:italic;    /*倾斜,normal是不倾斜*/

      color:#03C;    /*颜色*/

      text-decoration:underline;    /*下划线,overline是上划线,line-through是删除线,none是去掉下划线*/

      text-align:center;    /*(水平对齐)居中对齐,left是左对齐,right是右对齐*/

      vertical-align:middle;    /*(垂直对齐)居中对齐,top是顶部对齐,bottom是底部对齐。一般设置行高后使用。*/

      text-indent:28px;    /*首行缩进量*/

      line-height:24px;    /*行高。一般为1.5~2倍字体大小。*/

        display:none;    /*none,不显示;inline-block,显示为块,不自动换行,宽高可设;block,显示为块,自动换行;inline,效果同span标签,不自动换行,宽高不可设。*/

        visibility:hidden;    /*可视性。hidden,隐藏但是占空间;visible,显示。*/

    边界和边框

    border(表格边框、样式等)、margin(表外间距)、padding(内容与单元格间距)

      border:5px solid blue;    /*四边框:5像素宽、实线、蓝色(相当于以下三行)*/

      border-5px;

      border-style:solid;

      border-color:blue;

      border-top:5px solid blue;    /*上边框:5像素宽、实线、蓝色(分写同上)*/

      border-bottom:5px solid blue;   /*下边框:5像素宽、实线、蓝色(分写同上)*/

      border-left:5px solid blue;    /*左边框:5像素宽、实线、蓝色(分写同上)*/

    border-right:5px solid blue;    /*右边框:5像素宽、实线、蓝色(分写同上)*/

      margin:10px;     /*四边外边框宽度为10像素。auto,居中。*/

      margin-top:10px;    /*上边外边框宽度为10像素;其他三边边框类似*/

    margin:20px 0px 20px 0px;    /*上-右-下-左,四边外边框顺时针顺序*/

      padding:10px;    /*内容与边框的四边间距为10像素*/

      padding-top:10px;    /*内容与边框的上间距为10像素;其他三边间距类似*/

    padding:20px 0px 20px 0px;   /*上-右-下-左,内容与边框的四边间距顺时针顺序*/

    列表与方块

      width、height、(top、bottom、left、right)只有在绝对坐标情况下才有用

      list-style:none;    /*取消序号*/

      list-style:circle;    /*序号变为圆圈,样式相当于无序*/

      list-style-image:url(图片地址);    /*图片做序号*/

      list-style-position:outside;    /*序号在内容外*/

      list-style-position:inside;    /*序号跟内容在一起*/

    ---恢复内容结束---

  • 相关阅读:
    FZU 2112 并查集、欧拉通路
    HDU 5686 斐波那契数列、Java求大数
    Codeforces 675C Money Transfers 思维题
    HDU 5687 字典树插入查找删除
    HDU 1532 最大流模板题
    HDU 5384 字典树、AC自动机
    山科第三届校赛总结
    HDU 2222 AC自动机模板题
    HDU 3911 线段树区间合并、异或取反操作
    CodeForces 615B Longtail Hedgehog
  • 原文地址:https://www.cnblogs.com/zhaimiaoer/p/5308949.html
Copyright © 2011-2022 走看看