0.2 CSS

2023-07-25 本文已影响0人冰菓_

难点&重点:东西太多了吧.....

各类选择器的适用和区别 (https://blog.csdn.net/LIUCHUANQI12345/article/details/109170492)
选择器的优先级(https://blog.csdn.net/hellow_tommer/article/details/121566718)
取色器
css的继承性
行高和font-size line-height详解
行内元素,块状元素,内联元素
盒子模型,margin注意事项
相对位置
浮动

CSS全称为层叠样式表(cascading style sheets),css也是一种标记语言,用于给html结构设置样式,与HTML关系是这样的,HTML搭建结构,CSS添加样式,实现了:结构和样式的分离

样式

CSS 规则集（rule-set）由选择器和声明块组成：每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。
优先级原则:行内样式>内部样式>外部样式

选择器

元素选择器
通配选择器
类选择器
ID选择器
交集选择器
并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .type1{
            color: black;
        }
        .type2{
            color: orange;
        }
        .type1,.type2,#id-test{
            background-color: blue;
            width: 180px;
        }
        #id-test{
            color: blue;
            width: 200px;
        }
        h1.type2{
            color: burlywood;
            width: 200px;
        }
    </style>
</head>

<body>
<h1 id="id-test">一个测试</h1>
   <p style="color: red; width: 100px">i love you</p>
   <p class="type1">你好</p>
   <p class="type1">你好</p>
   <p class="type1">你好</p>

   <p class="type2">hhhhh</p>
   <p class="type2">hhhhh</p>
   <p class="type2">hhhhh</p>
<h1 class="type2">hhhhh</h1>
</body>
</html>

后代选择器:语法:选择器1 选择器2 ...选择器n {} 后代选择器,最终选择的是后代,不选中祖先
子代选择器
兄弟选择器
属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
      div ol li{
          color: blue;
      }
    [title="abc"]{
        color: red;
    }
      [title^="b"]{
          color: red;
      }
      div ul+li{
        color: red;
    }
    div>p>a{
        color: #000;
    }
    div.abc>a{
        color: #000;
    }
    h1+p{
        color: aqua;
    }
    p~p{
        color: antiquewhite;
    }
</style>
<body>
    <div>
         <ol>
             <li>a</li>
             <li>b</li>
             <li>c</li>
         </ol>
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
        <p>
            <a href="#">11111</a>
            <div class="abc">
        <a href="#">11111</a>
    </div>
        </p>
    </div>
    <p1 title="abc">abc</p1>
    <p1 title="bbc">abc</p1>
<h1></h1>
<p>abcccc</p>
    <p>abcccc</p>
    <p>abcccc</p>
</body>
</html>

伪类选择器

动态伪类
结构伪类
否定伪类
UI伪类
目标伪类
语言伪类
伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
             color: azure;
        }
        a:visited{
            color: aquamarine;
            width: 200px;
        }
        /*悬浮*/
        a:hover{
            color: orange;
        }
        /*激活*/
        a:active{
            color: blue;
        }
    /*    焦点*/
        select:focus{
            background-color: aqua;
        }
        /*选中的是div的后代选择器p,并且p的父亲是谁无所谓*/
        div p:first-child{
            color: aqua;
        }

        div div p:nth-child(-n + 5){
            color: aqua;
        }
        div >div> p:last-of-type{
            color: aqua;
        }
        div:empty{
            color: aqua;
            width: 1000px;
        }

        :input:checked{
            width: 100px;
            height: 1000px
        ;
        }

        p::first-letter{
            background-color: red;
        }
        div+p::before{
            content: "%";
        }
        p::first-line{
            background-color: azure;
        }
        p::selection{
            background-color: blue;
        }
    </style>
</head>
<body>
   <a href="aaaa">点击</a>
   <select>
       <option>"aaaa"</option>
       <option>"bbbb"</option>
   </select>

  <div>
      <p>ceshi</p>
       <div>
            <marquee>
                 <p>ceshi</p>
            </marquee>
       </div>
      <p>ceshi</p>
      <p>ceshi</p>
  </div>
  <div>
       <span></span>
       <div>
           <p>ceshi</p>
           <p>ceshi</p>
           <p>ceshi</p>
           <p>ceshi</p>
           <p>ceshi</p>
           <p>ceshi</p>
           <div></div>
       </div>
  </div>
  <div></div>
<input type="checkbox">
   <input type="radio" name="aaa">
   <input type="radio" name="aaa">

</body>
</html>

选择器的优先级

通过不同的选择器,选中相同的元素,并且为相同的样式名设置不同的值,就发生了样式的冲突,到底应用哪个样式,此时需要看优先级了,简单描述:行内样式>ID选择器>类选择器>元素选择器>通配选择器

像素

像素是一个相对单位

颜色

常用字体属性

大小
族
风格
粗细
符合属性
颜色
间距
修饰
缩进
对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            letter-spacing: 10px;
        }
        p1.aa{
            word-spacing: 10px;
        }
        p1.bb{
            text-decoration: underline wavy ;
        }
        p.cc{
            font-size: 30px;
            text-indent: 60px;

        }
        p.dd{
            font-size: 30px;
            text-indent: 60px;
            text-align: end;

        }
    </style>
</head>
<body>
   <h1>HHHH HHH H H 我们</h1><br>
   <p1 class="aa">HHHH HHH H H 我们 </p1><br>
   <p1 class="bb">HHHH HHH H H 我们 </p1><br>
   <p class="cc">HHHH HHH H H 我们 </p>
   <p class="dd">HHHH HHH H H 我们 </p>
</body>
</html>

行高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        p{
            font-size: 100px;
            line-height: 50px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
   <p>asgrgsgsgsd</p>
   <p>asgrgsgsgsd</p>

列表相关属性

符号,位置,自定义列表符号

表格相关属性

背景相关属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <style>
        body{
            background-color: white;

        }
       div{
           width: 100px;
           height: 100px;
           border: 100px black;
           background-color: aqua;
           background-image: url("aa.jpg");
           /*背景图片重复方式*/
           background-repeat: no-repeat;
           /*对齐方式*/
           background-position: left top;

       }
   </style>
</head>
<body>
    <div>
         nigao
    </div>
</body>
</html>

css长度单位

px像素
em相对元素font-size的倍数
rem相对根字体大小
%相对父元素计算

元素的显示模式

block

在页面中独占一行,不会与任何元素共用一行,是从上到下排列的
默认宽度:撑满父元素
默认高度:由内容撑开
可以通过CSS设置宽高

inline

在页面中不会独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
默认宽度 :内容撑开
默认高度:内容撑开
无法通过CSS设置宽高

inline-block

在页面中不独占一行,一行中不能容纳下的行内元素,会在下一行继续从左到右排列
默认宽度 :内容撑开
默认高度:内容撑开
可以通过CSS设置宽高

https://www.cnblogs.com/qiul-ing/p/17308871.html

盒子模型

http://c.biancheng.net/css3/border.html [CSS边框样式（border]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*内容区的宽和高*/
            width: 200px;
            height: 200px;
            /*内边距 设置的背景颜色会填充边框*/
            padding: 20px;
               /*边框*/
            border: 10px salmon solid;
            font-size: 10px ;
            /*外边距*/
            margin: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
  <div>
      abcd
  </div>
</body>
</html>

margin 塌陷问题和合并问题

布局技巧

浮动

没看...

定位

相对定位
绝对定位
固定定位
粘性定位

H5

语义标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <form action="">
        <input type="text" list="a">
        <button>按钮</button>
  </form>
 <datalist id="a">
   <option value="a">a</option>
     <option value="b">b</option>
     <option value="c">c</option>
     <option value="d">d</option>
 </datalist>
</body>
</html>

视频标签
音频标签
全局属性

CSS3

CSS3之背景剪裁Background-clip_-webkit-background-clip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         .box{

             width: 200px;
             height: 200px;
             border: 1px solid bisque;
             float: left;
             margin-left: 20px;
             font-size: 20px;
         }
        .box1{
            background-image: linear-gradient(red,blue,greenyellow);
        }
         .box2{
             background-image: linear-gradient( to left top,red,blue,greenyellow);
         }

         .box3{
             background-image: linear-gradient( 20deg
             ,red,blue,greenyellow);
         }
         .box4{
             background-image: linear-gradient( to left top,red,blue,greenyellow);
             font-size: 50px;
             text-align: center;
             line-height: 200px;
             font-weight: bold;
             color: blanchedalmond;
             -webkit-background-clip:text ;
         }
         .box5{
             background-image: radial-gradient(
             red,blue,greenyellow);
         }
         .box6{
             background-image: radial-gradient(circle,
                     red,blue,greenyellow);
         }
    </style>
</head>
<body>
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">444444</div>
  <div class="box box5">444444</div>
  <div class="box box6">444444</div>
</body>
</html>

web字体
http://c.biancheng.net/css3/position.html
[position]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
      .out{
          width: 200px;
          height: 200px;
          border: 1px solid black;
          margin: 0 auto;
          margin-top: 100px;
      }
    .in{
        width: 200px;
        height: 200px;
        background-color: green;
        transform: translateX(50px);
    }
</style>
<body>
   <div class="out">
       <div class="in">
            abc
       </div>
   </div>
<hr>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 1200px;
            height: 1200px;
        }
        .box:hover .b{
            width: 1200px;
        }
         .box1{
              width: 200px;
              height: 200px;
             background-color: bisque;
         /*    设置需要过渡的属性*/
         /*    不是所有属性都能过渡*/
             transition-property: height , width,background-color;
             transition-duration: 1000ms;
         }
        .box1:hover{
            height: 400px;
            width:  400px;
            background-color:aqua;
        }
        .box2 {
            width: 200px;
            height: 200px;
            background-color: bisque;
            transition-property:all;
            transition-duration: 1000ms;
        }
        .box2:hover{
            transition-timing-function: ease;
            background-color:aqua;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="b box1">abc</div>
    <div class="b box2">abc</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
      .out{
          width: 1200px;
          height: 1200px;
          border: 1px salmon solid;
      }

      .in{
          width: 100px;
          height: 100px;
          background-color: aqua;
          animation-name: ta;
          animation-duration: 5s;
          animation-iteration-count: infinite;
      }
      @keyframes ta {
          from{

          }
          to{
              transform:translate(1100px) rotate(360deg);
              background-color: greenyellow;
          }
      }
/*    定义一组关键帧*/
</style>
<body>
   <div class="out">
       <div class="in">
       </div>
   </div>
</body>
</html>

伸缩盒模型

只有直接的子元素才是伸缩项目
伸缩项目:伸缩容器所有子元素自动成为了:伸缩项目