CSS

最新推荐文章于 2024-04-05 03:28:22 发布

promiseend

最新推荐文章于 2024-04-05 03:28:22 发布

阅读量227

点赞数

分类专栏： java 文章标签： html css

本文链接：https://blog.csdn.net/promiseend/article/details/78749527

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

CSS简介

CSS是层叠样式表（Cascading Style Sheets）用来定义网页的显示效果，可以解决HTML代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。css将网页内容和显示样式进行了分离，提高了显示功能。
Css用来应用指定的样式到选择的元素上。所有的样式叠加，多个元素将继承不同的样式。

css与html结合

CSS通过以下四种方式和HTML在网页代码中相结合：
1. style属性方式：利用标签中的style属性来改变每个标签的显示样式。
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
2.style标签方式（内嵌方式）：在head标签中加入style标签，对多个标签进行统一修改。
该方式可以对单个页面的样式进行统一的设置，但是对局部不够灵活。
3.导入方式：前提是已经存在一个定义好的CSS文件。网页的一部分样式需要用到，那么就用到这种方式。
如果导入进来的样式与本页面定义的样式重复，以本页定义的样式为准。
4.链接方式：通过head标签中的link标签来实现，前提是先要有一个已经定义好的CSS文件。
可以通过多个link标签链接进来多个CSS文件。重复样式以最后链接进来的CSS样式为准。

样式的优先级：从上到下，由外到内，优先级由低到高。

CSS代码格式

格式： 选择器名称{属性名:属性值;属性名:属性值;……}
属性与属性之间用分号隔开；属性与属性值用冒号连接。
如果一个属性有多个值的话，那么多个值用空格隔开。

选择器

就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
选择器有三种:
1. html标签选择器，使用的就是HTML的标签名。
2. class选择器，使用的是标签的class属性。
3. id选择器，使用的是标签的id属性。
每一个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。
在定义中，多个标签的class属性值可以相同，而id值要唯一，因为JavaScript里经常用。

class选择器
在标签中定义class属性并赋值。通过标签名.class值对该标签进行样式设置。

id选择器
与class选择器类似，但是格式不同。选择器的名称为：#id值。

扩展选择器
1. 关联选择器
标签是可以嵌套的，要让相同标签中的不同标签显示不同样式，就可以用此选择器。
2. 组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
3. 伪元素选择器
就是在HTML中预先定义好的一些选择器。称为伪元素，是css的术语。
格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。

代码体现


<!DOCTYPE html>
<html>
  <head>
    <title>css.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=GB2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

   <!--链接方式-->
  <!-- <link rel="stylesheet" href="1.css" type="text/css"/>-->

     <style type="text/css">  

/*伪元素选择器*/
     /*L V H A*/
        /*未访问*/
        a:link{
            background-color:#06f;
            color:#fff;
            text-decoration:none;
            font-size: 18px;

        }

         /*鼠标悬停*/
        a:hover{
            background-color: #fff;
            color: #f00;
            font-size: 24px;
        }
        /*点击效果*/
        a:active{
            background-color: #000;
            color: #fff;
            font-size: 36px;
        }
        /*访问后效果  */
        a:visited{
            background-color:#ff9;
            color:#000;
            text-decoration:line-through;
        }

     p:first-letter{
        font-size: 36px;
        color:#f00;
     }

     div:hover{
        background-color: #ff0;
        color: #fff;
     }

     input:focus{
        background-color: #09f;
     }

    /*导入方式*/
/*      @import url(1.css)*/
        /*
        div{
            background-color:#09f;
            color:#fff;
        }
        div.pei{
            background-color: #ff3;
            color: #0c0;
        }*/
        /*预定样式，实现动态加载
        .aa{
            background-color: #c93;
            color: #00F;
        }
        */
        /*
        #qq{通常id的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标识页面中的一些特定区域使用的。
            background-color: #ff0;
            color: #f00;
        }*/

/*
        span b{关联选择器  选择器中的选择器

            background-color: #09f;
            color: #fff;
        }
*/

        /*组合选择器   对多种选择器进行相同样式定义
        .haha ,div b{
            background-color: #000;
            color: #c00;
        }*/
     </style>

  </head>

  <body>
    <input type="text"/>
    <input type="text" />

    <hr>
    <a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a>

    <hr>

    <!--
        优先级：标签选择器<类选择器<id选择器<style属性
        -->

            <div style="color:#f00">这是一个div区域</div>
            <div id="qq"  style="background-color:#f00;color:#000">这是一个div区域2</div>
            <div class="pei">这是一个div区域3</div>
            <span id="qq">span区域1</span>
            <span class="aa">span区域2</span>
            <span>span<b>区域</b>3</span>
            <p>这是一<b>个</b>段落1</p>
            <p class="aa">这是一个段落2</p>

  </body>
</html>

1.css

@CHARSET "UTF-8";

/*
 在该文件导入其他css文件
 * */
@import url(div.css);
@import url(span.css);

div.css

@CHARSET "UTF-8";

div{
    background-color:#090;
    color:#fff;
}

span.css

@CHARSET "UTF-8";
span{
    background-color: #0f0;
    color:#ff0;
}

css应用在HTML上的示例：


<!DOCTYPE html>
<html>
  <head>
    <title>cssdemo.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <style type="text/css" media="screen">

    ul{
        list-style-type: none;
        list-style-image:url(img/1.jpg) ;
    }
    table{
        border-bottom: #0c0 double 3px;
        border-left: #f00 solid 3px;
        border-right: #ff0 dashed 3px;
        border-top:#0099FF groove 3px;
        width: 500px;
    }
    table td{
        border: #0066FF dotted 1px;
        padding: 20px;

    }
    div{
        border: #f90 dashed 2px;
        height: 200px;
        widows: 400px;
    }

    input{
        border:none;
        border-bottom: solid;
    }

    .shuru{
        border-bottom:none;
    }
    </style>

  </head>

  <body>

    姓名：<input type="text"/>
    成绩：<input type="text"/>
    <hr>
    <div>div区域</div>
    <hr>
    <table>
          <tr>
            <td><input type="text" class="shuru"/></td>
            <td><input type="text" class="shuru"/></td>
          </tr>
          <tr>
            <td>单元格一</td>
            <td>单元格二</td>
          </tr>
      </table>

    <hr>
    <ul>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>
        <li>无序项目列表</li>


    </ul>
  </body>
</html>

CSS核心内容

（1）标准流
就是标签的一个排列方式。标签的顺序=界面显示的顺序
（2）盒子模型
属性名：内容（content）、内边距（padding）、边框（border）、外边距（margin）
盒子模型是DIV排版的核心所在，通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种方式的网页代码简洁，变现和内容相分离，维护方便，能兼容更多的浏览器。
（3）浮动(float)
设置浮动之后就脱离了标准流。
（4）定位就是盒子模型的定位(position)
分为相对定位和绝对定位。相对定位要同时设置偏移量，实际并没有脱离标准流，绝对定位脱离了标准流。

盒子的浮动（漂浮）


<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


    <style type="text/css">
/*
    body{
        margin: 0px;
    }*/
    div{
        border:#09f solid 1px;

        height:100px;
        width:200px;/**/



    }   
    #div_1{
        /*border-bottom: #f60 2px dashed;*/
        background-color: #f90;
        /*margin: 0px;*/
    /*padding: 20px 100px 200px 300px;上 右 下 左*/

    /*漂浮*/
        float: left;
    }
    #div_2{
        background-color: #0cf;
        width:220px;
        height: 110px;
        /*margin: 50px;*/
        float: left;
    }
    #div_3{
        background-color: #3f0;
        width: 230px;
        height: 120px;
        float: left;
    }
    </style>
  </head>

  <body>

    <div id="div_1">
        第一个盒子第一个盒子
    </div>
    <div id="div_2">
        第二个盒子
    </div>
    <div id="div_3">
        第三个盒子   
    </div>
  </body>
</html>

盒子定位


<!DOCTYPE html>
<html>
  <head>
    <title>box.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->


    <style type="text/css">
/*
    body{
        margin: 0px;
    }*/
    div{
        border:#09f solid 1px;

        height:100px;
        width:200px;/**/

    }   
    #div_0{
        background-color: #ccc;
        height: 400px;
        width: 400px;

        /*盒子定位*/
        position: absolute;
        top:100px;
        left: 100px;
    }   
    #div_1{

        background-color: #f90;
        /*position: absolute;*/
        position:relative;
        top:50px;
        left:50px;
    }
    #div_2{
        background-color: #0cf;
    }
    #div_3{
        background-color: #3f0;

    }
    </style>
  </head>

  <body>
    <div id="div_0">


        <div id="div_1">
            第一个盒子第一个盒子
        </div>
        <div id="div_2">
            第二个盒子
        </div>
        <div id="div_3">
            第三个盒子   
        </div>

    </div>
  </body>
</html>

盒子模型漂浮的应用：图文混排

<!DOCTYPE html>
<html>
  <head>
    <title>float_test图文混排.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style type="text/css" media="screen">
    #imgtext{
        border: #06f dashed 1px;
        width:180px;

    }
    #img{
        float:right;
    }
    #text{
        color: #f60;
        font-family: "华文隶书";
    }
    </style>


  </head>

  <body>
     <div id="imgtext" >
        <div id="img">
            <img src="img/3.jpg" width=150px height=150px>
        </div>
        <div id="text">
                  打起精神来啊啊啊啊
                  我饿了。。蜡笔小新
                  哆啦A梦东京猫猫
                  蜡笔小新哆啦A梦
                  东京猫猫
        </div>
    </div>

  </body>
</html>

这里写图片描述

盒子模型定位的应用：图像签名

<!DOCTYPE html>
<html>
  <head>
    <title>position图像签名.html</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=gb2312">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css" media="screen">
    #text{
        font-family: "楷体";
        font-size: 24px;

        position: absolute;
        top:80px;
        left:10px;
    }
    #imgtext{
        border: #f60 dotted 1px;
        width: 500px;
        position: absolute;
        top:100px;
    }
</style>

  </head>

  <body>
    <div id="imgtext">
      <div id="img">
         <img src="img/2.jpg" height="300" width="500">
      </div>
      <div id="text">
        田野上骑自行车大概是一件很舒适的事情了~
      </div>
    </div>


  </body>
</html>