CSS

2021-09-08 04:37:36

CSS

掌握内容

什么是CSS
CSS的使用
CSS选择器
美化网页（文字，阴影，超链接，列表，渐变）
盒子模型
浮动
定位
网页动画（特效）

1 什么是CSS?

Cascading Style Sheet层叠级联样式表

CSS：表现(美化网页)

字体，颜色，边距，宽度，背景图片，网页定位，网页浮动

2 快速入门

<link rel="stylesheet" href="css/style.css">


style.css文件

h1{
    color: red;
}

3 3种导入方式

外部样式，内部样式 <内样式内部样式和外部样式是就近原则

外部样式分为两种：

链接式和导入式，链接式见上边案例，下面是导入式：

<style>
        @import "css/style.css";
    </style>

弊端：先展示结构，在进一步渲染

4 选择器

4.1 标签选择器

选中页面上所有这个标签的元素

4.2 类选择器

 <!--    类选择器
    可以将多个标签归类，实现复用
    -->
    <style>
        .丞相{
            color: saddlebrown;
        }
        .兵部{
            color: blue;
        }
        .纪检委{
            color: aqua;
        }
    </style>
    <h1 class="兵部">鳌拜</h1>
    <h1 class="丞相">索尼</h1>
    <h1 class="纪检委">苏珂扎哈</h1>

4.3 id 选择器

 <!--    id选择器
    可以将多个标签归类，id全局唯一
    -->
    <style>
       #兵部{
           color: aqua;
       }
       #纪检委{
           color: blue;
       }
       #丞相{
           color: antiquewhite;
       }
    </style>
    <h1 id="兵部">鳌拜</h1>
    <h1 id="丞相">索尼</h1>
    <h1 id="纪检委">苏珂扎哈</h1>

优先级：id>class>标签

4.4 层次选择器

后代选择器：在某个元素的后边

<style>
      body p{
          background: blue;
      }
</style>

子选择器

<style>
      body>p{
          background: blue;
      }
</style>

相邻选择器：只有一个向下

<style>
      .active+p{
          background: blue;
      }
</style>

通用选择器

<style>
      .active~p{
          background: blue;
      }
 </style>

4.5 结构伪类选择器

伪类：条件

 <style>
      ul li:first-child{
          background: blue;
      }
      ul li:last-child{
          background: firebrick;
      }
 </style>

<style>
    /*选择父标签的的第一个子元素p*/
 p:nth-child(1){
     background: red;
 }
    /*选择p的第一个同类型元素*/
    p:nth-of-type(2){
        background: #0066ff;
    }

p:hover{
    color: #0066ff;
}


</style>

4.6 属性选择器（常用）

 /*属性名 属性名=属性值（正则表达式）*/
         a[id]{
             background: blue;
         }
        a[id=first]{
            background: blue;
        }

*=包含   = 绝对等于
 a[class*="links"]{
    background: yellow;
}
开头和结尾
 a[href^=http]{
    background: yellow;
}
 a[href$=jpg]{
    background: yellow;
}

5 美化网页元素

span标签：重点要表现的内容

5.1 字体样式

 <!--字体：
    font-family  字体
    font-size   字体大小
    font-weight 粗细
    color  字体颜色-->
    <style>
        body{
            font-family: 华文行楷;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>浪淘沙</h1>
<p>九曲黄河万里沙，浪淘风簸自天涯。</p>
<p>如今直上银河去，同到牵牛织女家。</p>
<p class="p1">万里黄河弯弯曲曲挟带着泥沙，波涛滚滚如巨风掀簸来自天涯。到今天我们可以沿着黄河径直到银河，我们一起去寻访牛郎织女的家。</p>

5.2 文本样式

颜色
文本对齐方式
首行缩进
行高
装饰

  <!--文本样式：
     color: rgba(0,255,255,0.8); 颜色透明度
    text-align: center;居中
    text-indent: 2em; 段落首行缩进
    行高和块的高度一致就可以上下居中-->
    <style>
        h1{
           text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p2{
            background: yellow;
            height: 100px;
            line-height: 100px;
            text-decoration: underline violet;下划线
            text-decoration: line-through;中划线
            font-size: 111px;
        }

      h1:hover{
         background: red;
         text-shadow: blue 10px 10px 10px;
     }



    </style>
</head>
<body>
<h1>浪淘沙</h1>
<p>九曲黄河万里沙，浪淘风簸自天涯。</p>
<p>如今直上银河去，同到牵牛织女家。</p>
<p class="p1">万里黄河弯弯曲曲挟带着泥沙，波涛滚滚如巨风掀簸来自天涯。到今天我们可以沿着黄河径直到银河，我们一起去寻访牛郎织女的家。</p>
<p class="p2">in the eighth moon, the surf roared onto the land.
    Its lofty crest dashed against the rock and turned back.
    In a moment it recorded into the sea-gale,
    Rolling up drifts of sand like snow.</p>
</body>

5.3 列表

#nav{
    width: 200px;
}


.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    background: red;
}
/*ul li*/
ul{
    background: gold;
}
ul li{
      height: 30px;
      list-style: none;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: darkorange;
}

html文件

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家具</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a></li>
    </ul>

</div>

5.4 背景

背景颜色

背景图片

background: red url("../../../resources/image/qing.jpg") 200px 10px no-repeat ;颜色  图片  位置  是否平铺

background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 0%,#FF0000 0%)渐变

5.5 盒子模型

margin :外边距

padding: 内边距

border:边框

边框

粗细，样式，颜色

 <style>
        /*body总有一个外边距*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        body{
            background: #6284FF;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
            margin: 5px ;
        }
    </style>

外边距

margin: 0 auto;
padding: 10px;

5.6 圆角边框和阴影

/*左上  右上  右下  左下*/
border-radius: 50px 20px;

/*阴影*/
box-shadow: 10px 10px;

5.7 浮动

标准文档流：行内元素可以包含在块级元素中，反之不可以

<!--    block块元素
inline 行内元素
inline 行内块元素  在一行
none 消失-->
    <style>
        div{
            width: 80px;
            height: 100px;
            border: 1px salmon solid;
            display: inline;
        }
        span{
            width: 80px;
            height: 100px;
            border: 1px red solid;
            display: inline-block;
        }
    </style>

<!--    block块元素
inline 行内元素
inline 行内块元素  在一行
none 消失
float 左右浮动-->
    <style>
        div{
            margin: 50px;
            padding: 5px;
        }
        #father{
            border: 1px red solid;
        }
        .layer01{
            border: 1px yellow dashed;
            display: inline-block;
            float: right;
        }
        .layer02{
            border: 1px yellow dashed;
            display: inline-block;
        }
        .layer03{
            border: 1px yellow dashed;
            display: inline-block;
        }
        .layer04{
            border: 1px yellow dashed;
            display: inline-block;
            font-size: 12px;
            line-height: 23px;
        }
        
    </style>
</head>
<body>

<div id="father">

    <div class="layer01"><img src="../resources/image/g1.jpg" alt=""></div>
    <div class="layer02"><img src="../resources/image/g2.jpg" alt=""></div>
    <div class="layer03"><img src="../resources/image/g3.jpg" alt=""></div>
    <div class="layer04">
        知行合一，先知后行，行之方才知之！
    </div>
</div>

父级边框塌陷的问题

 /*clear: right  右侧不允许有浮动元素 假设有就排到下边一行
        clear: left  左侧不允许有浮动元素 假设有就排到下边一行
        clear: both  两侧不允许有浮动元素 假设有就排到下边一行
        */
解决方法：
    1 增加父级元素高度
    2 增加一个空的div，然后设置清除浮动

         <div class="clear"></div>

.clear{
             clear: both;
             margin: 0px;
             padding: 0px;
         }
    3 overflow

       overflow: scroll;
    4 父类添加一个伪类： after   推荐

     #father:after{
         content: ‘‘;
         clear: both;
        display: block;
     }

5.8 定位

相对位置：相对原来的位置进行偏移，移动后还是在标注文件流中，原来的位置被保留

 #first{
            border: 1px #a39b9b solid;
            background: #e6f50d;
            position: relative;
            top: -20px;
            right: 10px;
        }

<!--    相对定位
相对于自己原来的位置进行分偏移
-->
    <style>
        body{
            padding: 20px;
            width: 520px;height: 500px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px red solid;
            background: #fac116;
        }
        #first{
            border: 1px #a39b9b solid; width: 100px;height: 100px;
            background: #e6f50d;
            position: relative;
            display: inline-block;
        }
        #first:hover{
            background: red;
        }
        #second:hover{
            background: red;
        }
        #second:hover{
            background: red;
        }
        #third:hover{
            background: red;
        }
        #fourth:hover{
            background: red;
        }
        #fifth:hover{
            background: red;
        }
        #second{
            border: 1px #1aa027 solid; width: 100px;height: 100px;
            background: #42f112;
            position: relative;
            left: 220px;
            display: inline-block;
        }
        #third{
            border: 1px #3a18d2 dashed; width: 100px;height: 100px;
            background: #f3d510;
            position: relative;
            left: 180px;

        }
        #fourth{
            border: 1px #3a18d2 dashed; width: 100px;height: 100px;
            background: #f3d510;
            position: relative;
            display: inline-block;

        }
        #fifth{
            border: 1px #3a18d2 dashed; width: 100px;height: 100px;
            background: #f3d510;
            position: relative;
            left: 220px;
            display: inline-block;
        }
    </style>
</head>
<body>
<!--相对定位
    绝对定位
    z-index
    -->
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
    <div id="fourth">第四个盒子</div>
    <div id="fifth">第五个盒子</div>
</div>

绝对定位：

没有父级元素定位的，相对浏览器定位

假设存在父级元素定位，通常会相对父级元素定位

在父级元素的范围移动

 position: absolute;

固定定位

 div:nth-of-type(2){
            width: 100px;
            height: 100px;
            background: red;
            position: fixed;
            right: 0px;
            bottom: 0px;
        }

z-index

图层

opacity: 50%; 透明度

z-index: 1111;图层层数级别

5.9 动画

CSS

码农公寓

CSS