CSS极简版

最新推荐文章于 2024-06-28 22:28:59 发布

fysyyds668

最新推荐文章于 2024-06-28 22:28:59 发布

阅读量400

点赞数 4

文章标签： css

本文链接：https://blog.csdn.net/2401_82594808/article/details/136921513

版权

CSS

1.css是什么：

1.1层叠样式表

1.2css的优势：

1.内容和表现分离

2.网页结构表现同一，可以实现复用

3.样式十分丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录

6.css三种导入方式：

行内样式：

<h1 style="color: red;">我是标题</h1>

链接式：

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

导入式：

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

2.css怎么用：

3.css选择器(重点)：

<!--    语法：
选择器{
声明1：
声明2：
声明3：
}
-->
    <style>
        h1{
            color:yellow;
        }
    </style>

选择器作用：选择页面上的某一个或者某一类元素

3.1：标签选择器

<style>
    h1{
        color: #8a5c5c;
        background: yellow;
        border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
</style>

3.2：类选择器：

<style>
<!--    类选择器的模式 .class的名称{}
好处：可以多个标签归类，是同一个class，可以复用-->
      .fysyyds{
        color: #4d2f2f;
      }
      .fysyyds668{
        color: bisque;
      }

  </style>
</head>
<body>

<h1 class="fysyyds">标题一</h1>
<h1 class="fysyyds668">标题二</h1>
<h1>标题三</h1>
<p class="fysyyds668">fysyyds</p>

</body>

3.3: id选择器：

    <style>
/*id选择器  :id必须保证全局唯一
     #id名称{}
     不遵循就近原则，固定的
     id选择器>class选择器>标签选择器  */
     #qwe{
         color: red;
     }
     .fysyyds668{
         color: aqua;
     }
    </style>
</head>
<body>

<h1 id="qwe">标题一</h1>
<h1 class="fysyyds668">标题二</h1>
<h1>标题三</h1>

3.4 层次选择器：

1、后代选择器：在某个元素后面

/*后代选择器*/
body p{
  background: chartreuse;
}

2、子选择器：一代

/*子选择器*/
body>p{
  background: chartreuse;
}

3、相邻兄弟选择器：同辈，下一个（只有一个）

/*相邻选择器*/
    .fysyyds +p{
      background: chartreuse;
    }

4、通用选择器：选中当前及以下的同级元素

/*    通用选择器*/
    .fysyyds~p{
      background: chartreuse;
    }

3.5 结构伪类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*ul第一个子元素*/
        ul li:first-child{
            background: chartreuse;
        }
        /*ul最后一个子元素*/
        ul li:last-child{
            background: aqua;
        }

        /*body第一个要是p元素才生效*/
        p:nth-child(1){
            background: red;
        }
        /*第i个p标签生效*/
        p:nth-of-type(3){
            background: yellow;
        }
    </style>
</head>
<body>
<!--<h1>fysyyds</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>l1</li>
    <li>l2</li>
    <li>l3</li>
</ul>
<p>p7</p>
<p>p8</p>

</body>
</html>

3.6 属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;/*圆角边框*/
      background: aqua;
      text-align: center;/*文本对齐方式：居中*/
      color: #6f7979;
      text-decoration: none;/*去下划线*/
      margin-right: 5px;/*右边距*/
      font:bold 20px/50px Arial;/*粗体 大小 居中*/
    }
  /*  属性名=属性值（正则表达式）
  = 绝对等于
  *= 包含
  ^= 以什么为开头的
  $= 以什么为结尾的
  存在id的元素
  a[]{}
    /*a[id="fysyyds"]{*/
    /*  background: yellow;*/
    /*}*/
    /*选中class有item的*/
    /*a[class*=item]{*/
    /*  background: yellow;*/
    /*}*/
    /*选择开头是http的*/
    /*a[href^=http]{*/
    /*  background: yellow;*/
    /*}*/
    /*以pdf结尾的*/
    /*a[href$=pdf]{*/
    /*  background: yellow;*/
    /*}*/
  </style>
</head>
<body>

<p class="demo">

  <a href="http://www.baidu.com" class="links item first" id="fysyyds">1</a>
  <a href="http" class="links item sctive" target="_blank" title="fysyyds">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href="images/123.jpg" class="links item">5</a>
  <a href="abc" class="links item">6</a>
  <a href="/a.pdf" class="links item">7</a>
  <a href="/fysyyds.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item">10</a>

</p>

</body>
</html>

4.美化网页:

4.1 为什么要美化网页？

1.有效的传递页面信息

2.美化网页，页面漂亮，才能吸引用户

3.凸显页面得到主题

4.提高用户的体验

span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #fysyyds{
      font-size: 50px;
    }
  </style>
</head>
<body>

fysyyds <span id="fysyyds">668</span>

</body>
</html>

4.2 字体样式

<!--/* font-family:字体-->
<!--    font-size:字体大小-->
<!--    font-weight：字体粗细-->
<!--    color：颜色-->
<!--    */-->
    <style>
        body{
            font-family: 华文楷体,"Arial Black";
            color: red;
        }
        .fysyyds{
            font-size: 20px;
        }
        #fysyyds668{
            font-weight: bolder;
        }
    </style>

4.3 文本样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align = center

3.首行缩进 text-indent

4.行高 line-height

5.装饰 text-decoration

6.文本图片水平对齐：vertical-align:middle

<!--
RGB:0~f
RGBA: A:0~1
text-align 排版居中
text-indent首行缩进
height: 300px;
        line-height: 300px;
        行高和块的高度一只就可以居中
-->

  <style>
    h1{
      color: rgba(0,255,255,0.9);
        text-align: center;
    }
    .fysyyds{
        text-indent: 2em;
    }
    .p3{
        background: aquamarine;
        height: 300px;
        line-height: 300px;
    }
    /*下划线*/
    .l1{
        text-decoration: underline;
    }
    /*中划线*/
    .l2{
        text-decoration: line-through;
    }
    /*上划线*/
    .l3{
        text-decoration: overline;
    }
    a{
        display: none;
    }
  </style>

4.4 阴影

#title{
    /*阴影颜色，水平偏移，垂直偏移，阴影半径*/
    text-shadow: aqua 10px 10px 2px;
}

4.5 超链接伪类

只需记住hover

a{
    text-decoration: none;
    color: black;
}
/*鼠标指向时的颜色*/
a:hover{
    color: blue;
}
/*鼠标长按的状态*/
a:active{
    color: yellow;
    font-size: 50px;
}
/*按下之后的颜色*/
a:visited{
    color:red;
}

4.6 列表

#nav{
    width: 300px;
    background: azure;
}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    color: #e7c128;
    background: green;
}
ul li{
    height: 30px;
    /*decimal 有序列表
      circle  空心圆
      square  正方形
      none    无
    */
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<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>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>


</body>
</html>

4.7 背景

背景颜色

背景图片

<style>
  div{
    width: 1000px;
    height: 700px;
    border: 5px solid black;
    background-image: url("images/a.png");
  }
  .div1{
    background-repeat: repeat-x;/*水平平铺*/
  }
  .div2{
    background-repeat: repeat-y;
  }
  .div3{
    background-repeat: no-repeat;
  }
</style>

4.8 渐变

推荐网站：Grabient

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

5.盒子模型：

5.1

margin:外边距

border：边框

padding：内边距

5.2 边框

边框：样式(solid 实线，dashed 虚线)、粗细(border)、颜色(color)

<style>
    body{
        margin: 0;
    }
    /*border： 粗细，样式，颜色*/
    #box{
        width: 300px;
        border: 1px solid red;
    }
    h2{
        background: #a6c7a6;
        font-size: 30px;
        margin: 0;
    }
    form{
        background:green;
    }
    div:nth-of-type(1) input{
        border: solid 3px black;
    }
    div:nth-of-type(2) input{
        border: dashed 3px black;
    }

</style>

5.3 内外边距

margin + border + padding + 内容宽度

5.4 圆角边框

<!--
左上 右上 右下 左下 顺时针方向
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red ;
            border-radius: 100px 50px 20px 5px;
        }
    </style>

5.5 阴影

box-shadow: 10px 10px 1000px yellow;

6.浮动：

6.1 标准文档流

块级元素：独占一行

h1~h6  p  div  列表

行内元素：不独占一行

span a img strong

行内元素可以被包含在块级元素中，反之不行

6.2 display

<!--
block 块元素
inline 行内元素
inline-block 是块内元素，但是可以内联，在一行
none 消失
-->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red ;
      display: inline;
        float: right;
        clear: both;
    }
    span{
      width: 100px;
      height: 100px;
      border: 1px solid red ;
      display: inline-block;
        float: right;
        clear: both;
    }
  </style>

一种实现行内元素排列的方式，但一般用float

6.3 float

左右浮动

float: right;
clear: both;

6.4 父级边框塌陷的问题

clear:right;右侧不允许出现浮动
clear:left;左侧不允许出现浮动
clear:both;两侧都不允许出现浮动
clear:none;

解决方案：

1.增加父级元素的高度

简单，元素假设有了固定的高度就会被限制

#father{
border:1px #000 solid;
height:800px;
}

2.增加一个空的div标签，清楚浮动

简单，代码尽量避免空div

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

.clear{
clear:both;
margin:0;
padding:0;
}

3.增加overflow

简单，下拉的一些场景避免使用

overflow: scroll;/*滚动条*/

4.添加伪类：after

稍复杂，但是没有副作用（推荐）

#content:after{
    width: 200px;
    height: 150px;
    content: '';
    display: block;
    clear: both;
    /*overflow: scroll;!*滚动条*!*/
}

7.定位：

7.1相对定位

position relative

相对于原来的位置，进行指定的偏移，任然在标准文档流中，原来的位置会保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位：
        相对于自己原来的位置进行偏移
-->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #805f5f;
            border: 1px dashed #666;
            position: relative;/*相对定位，上下左右*/
            top: -20px;
            left: -20px;
        }
        #second{
            background-color: #3cb4a2;
            border: 1px dashed #666;
        }
        #third{
            background-color: #7546c9;
            border: 1px dashed #666;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个fysyyds</div>
    <div id="second">第二个fysyyds</div>
    <div id="third">第三个fysyyds</div>
</div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>

<div id="father">
    <a class="a1" href="#">链接</a>
    <a class="a2" href="#">链接</a>
    <a class="a3" href="#">链接</a>
    <a class="a4" href="#">链接</a>
    <a class="a5" href="#">链接</a>

</div>

</body>
</html>

#father{
    width: 300px;
    height: 300px;
    padding: 10px;
    border: 5px solid red;
}
a{
    text-align: center;
    text-decoration: none;
    width: 100px;
    height: 100px;
    line-height: 100px;
    color: white;
    background-color: green;
    display: block;
}
a:hover{
    background: #3c5bd7;
}
.a2,.a4{
    position: relative;
    left: 200px;
    top: -100px;
}
.a5{
    position: relative;
    left: 100px;
    top: -300px;
}

效果：

7.2绝对定位

position absolute

定位：基于XXX定位，上下左右

1.没有父级元素定位的前提下，基于浏览器定位

2.假设父级元素存在定位，我们通常相对于父级元素进行偏移

3.在父级元素范围内移动

绝对定位不在标准文档流中，不会保留原本位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #805f5f;
            border: 1px dashed #666;
        }
        #second{
            background-color: #3cb4a2;
            border: 1px dashed #666;
            position: absolute;
            right: 30px;
        }
        #third{
            background-color: #7546c9;
            border: 1px dashed #666;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个fysyyds</div>
    <div id="second">第二个fysyyds</div>
    <div id="third">第三个fysyyds</div>
</div>

</body>
</html>

7.3 固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      height: 1000px;
    }
    div:nth-of-type(1){
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>