zoukankan      html  css  js  c++  java
  • -复习----HTML ----CSS样式表

    CSS样式表

    2.1、样式表的基本概念

    2.1.1、样式表分类

    1、内联样式表

    和html联合显示,控制精确,但是可重用性差,冗余多。

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

    2、内嵌样式表

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

    <style type= "text/css">

    p      //格式对p标签起作用

    {

    样式;

    }

    </style>

    3、外部样式表

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

     

    有些标签有些默认的边距,一般写样式表代码的时候都会先去除(也可以设置其他样式),如下:

    <style type= "text/css">

    *      //格式对所有标签起作用

    {

    margin:0px;

    padding:0px;

    }

    </style>

     

    2.1.2、选择器

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

    <style type= "text/css">

    p      //格式对p标签起作用

    {

    样式;

    }

    </style>

     

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

        <head>

        <style type="text/css">

        .main       /*定义样式*/

        {

    height:42px;

    100%;

    text-align:center;

        }

        </style>

        </head>

        <body>

        <div class="main">          <!--调用class样式-->

        </div>

        </body>

     

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

        <div id="样式名">

        <head>

        <style type="text/css">

        #main       /*定义样式*/

        {

    height:42px;

    100%;

    text-align:center;

        }

        </style>

        </head>

        <body>

        <div id="main">          <!--调用id样式-->

        </div>

        </body>

     

    4、复合选择器。

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

        <style type="text/css">

        p,span      /*标签p、span两者同样的样式*/

        {

    样式;

        }

        </style>

     

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

        <style type="text/css">

        .main p      /*找到使用样式“main”的标签,在该标签里的P标签使用该样式*/

        {

            样式;

        }

        </style>

     

    3)、筛选“.”。

        <style type="text/css">

        p.sp      /*在标签p中的class="sp"的标签,执行以下样式*/

        {

    样式;

        }

        </style>

    2.2、样式属性

    2.2.1、背景与前景

            /*背景色,样式表优先级高*/

        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,显示。*/

     

    2.2.2、边界和边框

        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;   /*上-右-下-左,内容与边框的四边间距顺时针顺序*/

     

    2.2.3、列表与方块

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

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

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

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

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

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

    2.2.4、格式与布局

    1、position:fixed

    锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗

    2、position:absolute

        1)、外层没有position:absolute(或relative);,那么div相对于浏览器定位。

        2)、外层有position:absolute(或relative);,那么div相对于外层边框定位。

    3、position:relative

        相对于默认位置的移动。

    4、分层(z-index)

    在Z轴方向分层,可以理解为分成一摞纸,层数越高越靠上。

     

    --------------------------------------------- 

    5、float:left,right

     

    overflow:hidden;    //超出部分隐藏;scroll,显示出滚动条;  

    <div style="clear:both"></div>      截断流

      

    附:

    overflow:hidden;    /*超出范围时隐藏;scroll,超出范围时出滚动条。*/

    ---------------------------------------------------------------- 

    超链接样式:

    <style type="text/css">

    a:link    /*一般链接*/

    {

        color:blue;

    }

     

    a:visited    /*访问过的链接的格式*/

    {

        color:green;

    }

     

    a:hover    /*设置鼠标指向链接时的形式*/

    {

        color:red;

    }

    </style>

    链接的style:

      a:link 超链接被点前状态

      a:visited 超链接点击后状态

      a:hover 悬停在超链接时

      a:active 点击超链接时

      在定义这些状态时,有一个顺序l v h a

    -----------------------------

    cursor:pointer    鼠标指到上面时的形状。

    &copy ©    版权符号©

    半透明效果

    <div class="box">透明区域</div>

    //样式表中代码:

    .box

    {

    opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)  

    }

     

     

  • 相关阅读:
    织梦DEDEcms首页调用文档整篇内容
    dedecms专题列表页不显示标题的解决办法
    怎么让织梦文章按照权重排序
    Codeforces274B
    HDU5693
    HDU2476
    POJ3613
    「LibreOJ NOIP Round #1」旅游路线
    Educational Codeforces Round 48
    组合博弈学习笔记
  • 原文地址:https://www.cnblogs.com/a454966933/p/5676006.html
Copyright © 2011-2022 走看看