欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

2. CSS

程序员文章站 2024-03-18 13:36:10
...

1 CSS简介

  1. CSS（Cascading Style Sheets），全称层叠样式表
  2. 可以把HTML文件想向成是一个房子骨架，里面标签（块元素、行内元素）理解为搭建房子的砖，而CSS负责美化房子（进行装修）,让你的静态页面（网站）相对好看一些

2 选择器

  1. 用于选择对指定的名称的标签(标签选择器)、指定的id的标签(id选择器)、指定的class的标签(class选择器)，编写样式

2.1 标签选择器

  1. 标签名{}，可以指定某种标签的样式，例如div{}

  2. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!--样式一般写在head中的style标签里，type属性中内容，表示在编写纯文本的css-->
    <style type="text/css">
      /*表示指定div标签的样式
      1. color：文字严肃
      2. font-size：文字大小，px表示单位是像素，最小12像素
      3. background-color：该标签所在行的背景颜色
      4. background-image：设置背景图，背景图如果宽高没有div标签设置的宽高大，默认会平铺该图，但image标签引入图片时，无论图片多大，都不会导致图片平铺
      5. background-repeat：背景重复设置，可以设置为不平铺，也就是背景图没有div大时，图片不会将背景全部覆盖
      6. background：以上内容，可以简写在background属性中，例background:no-repeat url(jie.jpg)  red;
      7. text-align：文字左右方向对齐方式
      8. border：边框
      9. opacity：透明度，值在0～1之间取
      10. font-style：字体样式，italic表示倾斜
      11. cursor：表示光标放上去时，变成小手
      12. width：宽度
      13. height：高度
      14. overflow：如果子元素超出父元素部分隐藏
      */
      div{
        color:green;
        font-size:30px;
        background-color:red;
        background-image: url(1.png);
        background-repeat: no-repeat;
        /*background: no-repeat url(1.png)  red;*/
        text-align:center;
        border:5px solid black;
        opacity:.5;
        font-style:italic;
        cursor:pointer;
        width: 2000px;
        height: 2000px;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div>文本内容</div>
  </body>

</html>

2.2 id选择器

  1. #id{}，可以具体按id指定某个具体标签的样式，而不是所有标签都一个样式

  2. 页面中标签id属性值应唯一，如果重名，虽然此处可以生效，但学js时，会有问题

  3. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>id选择器</title>
    <style type="text/css">
      #box{
        color:black;
        /* 对文本设置某种效果，例如加下划线，a标签默认有下划线，此处表示去掉下划线
        1. underline：下划线
        2. overline：上划线
        3. line-through：中划线
        4. none：什么都没有
        */
        text-decoration:none;
      }
      #box1{
        /* 列表默认样式设置，默认应该文字前面有一个实心圆点
        1. circle：空心圆点
        2. square：实心方块
        3. none：表示不再加内容 */
        list-style:square;
      }
      #cur{
        color:cyan;
      }
      #box2{
        /* 列表默认样式设置，改为不用默认的数字 */
        list-style:square;
      }
    </style>
  </head>
  <body>
    <a href="http://www.baidu.com" id="box">百度</a>
    <ul id="box1">
      <li>吃饭</li>
      <li id="cur">睡觉</li>
      <li>打豆豆</li>
    </ul>
    <ol id="box2">
      <li>unity3D</li>
      <li>cos2D</li>
      <li>PHP</li>
    </ol>
  </body>
</html>

2.3 class选择器

  1. .class{}，可以匹配某一类的标签，id尽量不能重名，但class可以

  2. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /*相当于对下面两个div标签设置样式*/
      .current{
        font-size:30px;
        background-color:cyan;
      }
      /*相当于对span标签设置样式*/
      .cur{
        color:skyblue;
        font-size:18px;
      }
    </style>
  </head>
  <body>
    <div class="current">current1</div>
    <div class="current">current2</div>
    <div>普通div</div>
    <div>今天是北京
      <span class="cur">cur</span>
    </div>
  </body>
</html>

3 样式分类

  1. 样式分为内部样式、外部样式、行内样式三种
  2. 优先级：行内样式>内部样式>外部样式
  3. 使用率：行内样式<内部样式<外部样式

3.1 内部样式

  1. 内部样式的设置，通过在head标签中，书写style标签完成

3.2 外部样式

  1. 可以将所有样式放在.css文件中，通过在head标签中，书写link标签，将外部的这个.css文件引入

  2. .css

    .box{
    width:280px;
    height: 280px;
    background:red;
}
#cur{
    font-size: 20px;
    color:green;
    text-align:center
}

  3. .html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- 引入外部样式文件(CSS文件)，此处由于html和css在同一个文件夹，因此default.css前不用加路径 -->
    <link rel="stylesheet" type="text/css" href="default.css">
</head>
<body>
     <div class="box">
          <p id="cur">北京昨天下大雪了,真的很美</p>
     </div>
</body>
</html>

3.3 行内样式

  1. 可以在标签内，通过style属性，直接设置该标签的样式

  2. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <p style="width:600px;height:300px;font-size: 30;color: red;">文本内容</p>
  </body>
</html>

4 盒模型

  1. 所有HTML元素可以看作盒子，都拥有如下属性

    1. margin：外边距，两个标签(盒子)之间的距离
    2. border：外边框，相当于相框
    3. padding：内边距，content到border的距离
    4. content：盒子的内容，显示文本和图像
    5. width：宽，图像的宽
    6. height：高，图像的高

2. CSS

  1. padding、border会导致整个元素向外扩展，但margin不会

  2. 右键浏览器–检查，可以查看指定的元素的html写法和使用的样式

  3. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      .box{
        width:200px;
        height:200px;
        /* 外边框：5像素(最小1像素)，实线(dashed为虚线)，红色，所以整体像素由原来的200*200变为了210*210*/
        border:5px solid red;
        /*padding：文字到边框的距离*/
        padding:100px;
      }
      .box1{
        /*标签与标签间距离，不会导致标签变大，可以使用margin-left表示距离左边标签的距离*/
        margin:10px;
        width:200px;
        height: 200px;
        background:red;
      }
    </style>
  </head>
  <body>
    <div class="box">文字文字</div>
    <div class="box1"></div>
  </body>
</html>

5 定位

  1. html中，块元素会按定义顺序，从上到下，每个元素独占一行进行排列，而行内元素会按定义顺序，从左到右进行排列，遵循的这种规定，就叫做文档流，或普通流
  2. 如果想打破文档流让标签可以在任意地方显示，就需要通过定位实现
  3. 通过元素的position属性完成定位，被定位元素可以使用额外left、top、right、bottom四个新属性
  4. 定位分为固定定位(fixed)、相对定位(relative)、绝对定位(absolute)三种
  5. 一般情况，子元素绝对定位，父元素相对定位，“子绝父相”

5.1 固定定位

  1. 固定定位是以网页作为参照物的，可以将标签固定在网页中某一个位置，即使页面有上下滑动，效果也不影响

  2. 固定定位元素不占用起始位置，他原来的位置会被下面的元素占用

  3. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      div{
        width:400px;
        height: 200px;
      }
      body{
        height: 10000px;
      }
      .box{
        /* 固定定位 */
        position: fixed;
        left:500px;
        top:200px;
        background:red;
      }
      .box1{
        background:green;
      }
      .box2{
        background:purple;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

5.2 相对定位

  1. 相对定位是以元素原本位置作为参照

  2. 相对定位元素占用起始位置，他原来的位置不会被下面的元素占用

  3. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /* 清除默认样式的margin和padding：默认情况下有缝隙 */
      *{
        margin:0;
        padding: 0;
      }
      div{
        width:400px;
        height: 200px;
      }
      .box1{
        background:red;
      }
      .box2{
        /*相对定位*/
        position: relative;
        /*表示原来位置在新位置的坐上方，也就是新位置为原位置的右下方*/
        left:400px;
        top:200px;
        background:green;
      }
      .box3{
        background:purple;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

5.3 绝对定位

  1. 绝对定位元素，如果没有定位父元素，以网页作为参照物，和固定定位效果相同

  2. 如果有被定位的父元素，以父元素位置作为参照物

  3. 绝对定位元素不占用起始位置，他原来的位置会被下面的元素占用

  4. 父元素无定位

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /* 清除默认样式 */
      *{
        margin:0;
        padding: 0;
      }
      body{
        height: 1000px;
      }
      div{
        width:400px;
        height: 200px;
      }
      .box1{
        position: fixed;
        left:100px;
        top:100px;
        background:red;
      }
      .box2{
        background:green;
      }
      .box3{
        background:purple;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

  5. 父元素相对定位

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0;
        padding: 0;
      }
      .outer{
        position: relative;
        /* 父元素 */
        width:400px;
        height: 400px;
        background:red;
        margin:200px;
      }
      .inner{
        position: absolute;
        left:10px;
        top:20px;
        width:200px;
        height: 200px;
        background:green;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner"></div>
    </div>
  </body>
</html>

6 浮动

  1. 浮动也可以打破文档流

  2. 当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到其父元素的右边缘

2. CSS

  1. 当框1向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到父元素的左边缘，因为它不再处于文档流中，所以它不占据空间，因此框2到达原来框1位置，但由于浮动元素会在非浮动元素上显示，所以框1覆盖住了框2，使框2从视图中消失

2. CSS

  1. 如果父元素太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素"卡住"

2. CSS

  1. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      /* 清除默认样式 */
      *{
        margin:0;
        padding: 0;
      }
      div{
        /* 靠左侧浮动 */
        float:right;
        width:150px;
        height: 50px;
        background:cyan;
      }
    </style>
  </head>
  <body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
  </body>
</html>

7 常用案例

7.1 导航

  1. google获取某个标签的颜色编号

2. CSS

  1. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0;
        padding: 0;
      }
      .box{
        position: relative;
        /* 宽度可以按父元素宽度的百分比进行设置*/
        width:100%;
        height:50px;
        /* 使用上面方法获取到的百度新闻中标签的颜色编码*/
        background:#01204f;
      }
      ul{
        position: absolute;
        left:20%;
        width:80%;
        height: 50px;
        /* 将列表默认样式清除（将前面黑色圆球干掉） */
        list-style: none;
      }
      li{
        float:left;
        width:60px;
        height: 50px;
        color:white;
        /* 行高：通常设置为和父元素高度一样，这样就能让文字在上下方向居中 */
        line-height:50px;
        /* 小手 */
        cursor:pointer;
        /* 文字在li中左右居中 */
        text-align:center;
      }
      li:hover{
        background:red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>首页</li>
        <li>国内</li>
        <li>国际</li>
        <li>军事</li>
        <li>财经</li>
        <li>娱乐</li>
        <li>体育</li>
        <li>互联网</li>
        <li>科技</li>
        <li>游戏</li>
        <li>女人</li>
        <li>汽车</li>
        <li>房产</li>
      </ul>
    </div>
  </body>
</html>

7.2 轮播图小圆球

  1. border-radius：将元素的四个角，用以指定像素为半径的圆角替代

2. CSS

  1. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0;
        padding: 0;
      }
      ul{
        position: relative;
        width:300px;
        height: 50px;
        list-style: none;
        border:1px solid black;
        left:500px;
      }
      li{
        float:left;
        /* 左侧外边距 */
        margin-right:10px;
        width:50px;
        height: 50px;
        background:green;
        /* 后面跟1个值，表示四个角都设置，如果跟4个值，表示分别设置左上、右上、右下、左下四个位置的圆角的半径
        此处50%表示，圆角的半径，为其自身宽高的一半*/
        border-radius:50%;
      }
      .cur{
        background:yellow;
      }
    </style>
  </head>
  <body>
    <ul>
      <li class="cur"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </body>
</html>

7.3 四叶草

  1. 我们可以通过@keyframes或@-浏览器厂商私有前缀-keyframes来创建动画，然后通过animation:动画名或-浏览器厂商私有前缀-animation:动画名将动画绑定在某个选择器上，此时动画才能生效，注意如果动画使用了浏览器厂商私有前缀，那么该动画只在对应的浏览器中生效

  2. 私有前缀与浏览器对照关系

    谷歌 IE 火狐 欧朋
    webkit ms moz o

  3. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0;
        padding: 0;
      }
      .box{
        position: relative;
        width:200px;
        height: 200px;
        left:40%;
        /* 将动画绑定到一个选择器上，否则动画不会有效果:动画名 动画执行时间 动画速率(匀速) 动画延迟时间 动画执行次数(无穷次) */
        animation:donghua 5s linear 0s infinite;
      }
      .ye1{
        position: absolute;
        width:100px;
        height: 100px;
        background:green;
        left:0px;
        top:0px;
        border-radius:0px 90px 0px 90px;
      }
      .ye2{
        position: absolute;
        width:100px;
        height: 100px;
        background:green;
        left:100px;
        border-radius:90px 0px 90px 0px;
      }
      .ye3{
        position: absolute;
        width:100px;
        height: 100px;
        background:green;
        left:0px;
        top:100px;
        border-radius:90px 0px 90px 0px;
      }
      .ye4{
        position: absolute;
        width:100px;
        height:100px;
        background:green;
        left:100px;
        top:100px;
        border-radius:0px 90px 0px 90px;
      }

      /* 创建一个animation动画，需指定起始样式和终止样式 */
      @-webkit-keyframes donghua{
        from{
          /* 旋转属性：让元素按图片几何中心进行旋转(旋转单位是degree)，此处表示，动画为从旋转0度的位置，转换到旋转360度的位置*/
          transform:rotate(0deg);
        }
        to{
          transform:rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="ye1"></div>
      <div class="ye2"></div>
      <div class="ye3"></div>
      <div class="ye4"></div>
    </div>
  </body>
</html>

7.4 轮播图布局

  1. 轮播图指那种隔几秒一会换一个图的效果，本例只有布局和样式，还没使用javascript，因此不会动态变换

  2. 代码

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
      *{
        margin:0;
        padding: 0;
      }
      .box{
        position: relative;
        width:520px;
        height:280px;
        border:1px solid red;
        left:400px;
        top:100px;
        /* 如果子元素超出父元素部分隐藏*/
        overflow: hidden;
      }
      ul{
        position: absolute;
        list-style: none;
        width:520px;
        height: 280px;
      }
      .leftbtn{
        position:absolute;
        width:60px;
        height:30px;
        background:black;
        left:0px;
        top:120px;
        color:white;
        text-align:center;
        line-height:30px;
        cursor:pointer;
        opacity: .8;
      }
      .rightbtn{
        position: absolute;
        width:60px;
        height: 30px;
        background:black;
        right:0px;
        top:120px;
        color:white;
        text-align:center;
        line-height:30px;
        cursor:pointer;
        opacity: .8;
      }
      ol{
        position: absolute;
        width:200px;
        height:25px;
        list-style: none;
        left:35%;
        bottom:5px;
      }
      /* 后代选择器，表示这个li是ol的那个子标签*/
      ol li{
        float:left;
        width:25px;
        height: 25px;
        background:black;
        color:white;
        /* 变为圆球 */
        border-radius:12.5px;
        text-align:center;
        line-height:25px;
        margin-right:5px;
      }
      .cur{
        background:skyblue;
        /* 进行缩放，宽高放大1.2倍，旋转也是它 */
        transform:scale(1.2);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <!--有序列表去做显示图片  -->
      <ul>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="1.jpg" alt="" /></li>
        <li><img src="1.jpg" alt="" /></li>
      </ul>
      <!-- 做左右按钮 -->
      <div class="leftbtn">left</div>
      <div class="rightbtn">right</div>
      <!-- 分页器 -->
      <ol>
        <li class="cur">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ol>
    </div>
  </body>
</html>
相关标签： 前台开发

上一篇： Python爬虫原理与常用模块--数据提取与清洗策略

下一篇： C语言实现扫雷

推荐阅读