首页 > Web开发 > 详细

CSS笔记整理

时间：2020-04-25 02:04:13      阅读：58      评论：0      收藏：0      [点我收藏+]

 

CSS整理笔记

  1. CSS如何学习

  2. CSS怎么用

  3. CSS选择器（重点+难点）

  4. 美化网页（文字，阴影，超链接，列表，渐变）

  5. 盒子模型

  6. 浮动，

  7. 定位

  8. 网页动画（特效）

什么是CSS3.0

Cascadading Style Shee 层叠级联样式表

HTML：结构

CSS：表现

JavaScript：交互

CSS的快速入门以及优势

标准格式：

技术分享图片

CSS优势：

  1. 内容和表现分离

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

  3. 样式十分丰富

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

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

Vue：前端框架

CSS三种导入方式

  • 优先级（就近原则，离元素最近的最先使用 ）

  • 行内样式

 <h1 style="color: blue">标题名称</h1>

  • 链接式

  • 推荐使用链接式，链接式属于标签，样式和HTML同时显示

 <!--    链接css用link-->
     <link rel="stylesheet" href="css/style.css">

  • 导入式

  • 不推荐使用，导入时属于行内样式，会在html结构显示出来之后在显示样式

 <!--    导入式-->
     <style>
         @import "css/style.css";
     </style>

三种基本选择器

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

基本选择器

  1. 标签选择器

    • 选择一类标签

    • 语法：标签名{ }

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>简单选择器</title>
 <!--    标签选择器-->
     <style>
 h1{
     color: #ff3a52;
 }
     </style>
 </head>
 <body>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 </body>
 </html>

  1. 类选择器 class

    • 选择所有class属性一致的标签，跨标签

    • 语法：.类名{ }

  2. id选择器

    • 全局唯一

    • 语法：#id{ }

  3. 优先级：id选择器>类选择器>标签选择器

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>简单选择器</title>
 <!--    标签选择器-->
     <style>
 h1{
     color: #ff3a52;
 }
 .chen{
     color: #6d49a5;
 }
  #kuang{
      color: green;
  }
     </style>
 </head>
 <body>
 <h1 class="chen" id="kuang">一级标题</h1>
 <h1 id="lei">一级标题</h1>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 <h1>一级标题</h1>
 <p class="chen">段落标签</p>
 </body>
 </html>

层次选择器

  1. 后代选择器

 body p{
     
 }

  1. 子选择器

 body>p{
     
 }

  1. 相邻兄弟选择器，只能是相邻的下面的邻居(只能是一个)

 .active + p{
     
 }

  1. 通用兄弟选择器(当前选中元素的向下所有兄弟元素)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*   p{
               background-color: #68ff4c;
           }*/
        /*   body p{
               background-color: #6aadff;
           }*/
        /*    body>p{
                        background-color: #ff55e3;
                    }*/
        /*.active + p{
             background-color: #ff4522;
         }*/
      .active ~ p{
          background-color: #baff21;
      }
    </style>
</head>
<body>
<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p>p8</p>
<p>p8</p>
<p>p8</p>
<p >p8</p>
</body>
</html>

结构伪类选择器

<!--    选取li的第一行元素-->
<!--    选取li的最后一行元素-->
    <style>
       ul li:first-child{
           background-color: #54ff61;
       } 
        ul li:last-child{
            background-color: #ff7e74;
        }
    </style>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
<!--    选取li的第一行元素-->
<!--    选取li的最后一行元素-->
    <style>
       ul li:first-child{
           background-color: #54ff61;
       } 
        ul li:last-child{
            background-color: #ff7e74;
        }

       a:hover{
           background-color: #14ff3c;
       }
    </style>
</head>
<body>
<a href="">伪类</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

属性选择器（常用）

id+class结合

= (绝对等于)
*= （包含）
^= (以什么开头)
$= (以什么结尾)
<!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: 5px;
            background-color: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin: 5px;
            font: bold 20px/50px Arial;
        }
        /*    存在id属性元素*/
       /*     a[id]{
                background-color: #47ff58;
        }*/
       
      /*  a[class*=item]{
            background-color: #ff705a;
        }*/
        a[href$=f]{
            background-color: green;
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="https://www.baidu.com" class="links item first" title="test">1</a>
    <a href="" class="links item active" id="first">2</a>
    <a href="../../image/123.html" id="chen"  class="links item active">3</a>
    <a href="../../image/123.png"  class="links item active">4</a>
    <a href="../../image/123.jpg"  class="links item active">5</a>
    <a href="abc">6</a>
    <a href="/a.pdf" class="item">7</a>
    <a href="/abc.pdf">8</a>
    <a href="abc.abc">9</a>
    <a href="abcd.doc">10</a>
</p>
</body>
</html>

CSS的作用以及字体样式

  • 为什么美化网页

  1. 有效的传递页面信息

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

  3. 凸显页面主题

  4. 提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>span标签</title>
    <style>
        #ziti{
        font-size: 30px;
            color: green;
        }
    </style>
</head>
<body>
 我们一起来学<span id="ziti">Java</span>
</body>
</html>

  • 字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>font标签</title>
<!--
   font-size: 字体大小
   font-family: 字体
    font-weight:字体粗细
     color:字体颜色
  -->
    <style>
      /* h1{
           font-size: 50px;
           color: #ff3b47;
       }
        p{
            font-size: 20px;
            font-family: "Times New Roman", "楷体";
            font-weight: bold;
            color: #14ff3c;
        }*/
        /*设置字体语法：1.字体风格（例如斜体） 2.字体粗细 3.字体大小 /4.行高 5.字体类型*/
        h1{
            font: oblique bolder 150px/20px Arial;
        }
    </style>
</head>
<body>
<h1>少儿故事</h1>
　<p>父子二人看到一辆十分豪华的进口轿车。【大道理】你对事情的看法，是不是也反映出你内心真正的态度？</p>　
　　
　<p>儿子不屑地对他的父亲说：“坐这种车的人，肚子里一定没有学问！” 父亲则轻描淡写地回答：“说这种话的人，口袋里一定没有钱！”</p>
　　<p>He Won Tommy: How is your little brother, Johnny? Johnny: He is i.</p>
　　
</body>
</html>

  • 文本样式

  1. 颜色 color rgb rgba

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

  3. 首行缩进 text-indent:2em

  4. 行高 line-height line-height=height 对齐

  5. 装饰 text--decoration

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <!--
    颜色：
    单词
    RGB：0~F
    RGBA 0~1   透明度
     text-indent:首行缩进 用em表示
    -->
    <style>
        h1 {
            color: rgba(0, 255, 25, 0.9);
            text-align: center;
        }

        .p1 {
            text-indent: 2em;
        }

        /*
        当 height: 300px;与 line-height: 300px;相等时就会居中
        行高和块的高度一致就可以上下居中
        */
        .p2 {
            background-color: #ff7e74;
            height: 300px;
            line-height: 300px;
        }

        .li1 {
            /*  下滑线*/
            text-decoration: underline;
        }

        .li2 {
            /*中划线*/
            text-decoration: line-through;
        }

        .li3 {
            /*下划线*/
            text-decoration: overline;
        }

        a {
            /*去除下划线*/
            text-decoration: none;
        }

        img, span {
            /*水平对齐参照物*/
            vertical-align: middle;
        }
    </style>
</head>
<body>
<p><img src="../image/QQ截图20200419182352.png" alt="风景照">图片</p>
<a href="">超链接</a>
<p class="li1">311321313131</p>
<p class="li2">311321313131</p>
<p class="li3">311321313131</p>
<h1>少儿故事</h1>
<p class="p1">父子二人看到一辆十分豪华的进口轿车。【大道理】你对事情的看法，是不是也反映出你内心真正的态度？</p>　
　　
　<p class="p2">儿子不屑地对他的父亲说：“坐这种车的人，肚子里一定没有学问！” 父亲则轻描淡写地回答：“说这种话的人，口袋里一定没有钱！”</p>
　　<p class="p3">He Won Tommy: How is your little brother, Johnny? Johnny: He is i.</p>
</body>
</html>

文本阴影和超链接伪类

伪类链接：鼠标悬停变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影伪类超链接</title>
    <style>
       a{
           text-decoration: none;
       }
       a:hover{
           color: #14ff3c;
       }
    </style>
</head>
<body>
<p class=""><img src="../image/QQ截图20200419182352.png" ></p>
<a href="#">
    <p  class="pname">动漫电影</p>

</a>
<a href="#">
    <p class="price">159￥</p>
</a>
</body>
</html>

阴影：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阴影伪类超链接</title>
    <style>
        a{
            text-decoration: none;
        }
        a:hover{
            color: #14ff3c;
        }
      .price{
            /*
           参数： 阴影颜色，水平偏移，垂直偏移，阴影半径
            text-shadow: #3cc7f5 10px -10px 2px
            */
            text-shadow: blue 10px 10px 2px;
        }

    </style>
</head>
<body>
<p class="imager"><img src="../image/QQ截图20200419182352.png" ></p>
<a href="#">
    <p  class="pname">动漫电影</p>

</a>
<a href="#">
    <p class="price">159￥</p>
</a>
</body>
</html>

列表样式练习

style：

.title{
    font-size: 28px;
    font-family: "楷体";
    color: #ff3b47;
    line-height: 50px;
    background-color: orange;
    width: 270px;
}
#minnav{
    margin-left: 40px;
}
#nav{
    margin-top:-23px;
    width: 270px;
}
ul li{
    list-style:none;
    text-indent: 1em;
    background-color: #aab5ab;
    height: 30px;
}
a{
text-decoration: none;
}
a:hover{
    color: #54ff61;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式练习</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="minnav"><h2 class="title">全部商品分类</h2></div>

 <ul id="nav">
    <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>

</body>
</html>

背景图像应用及渐变

  • 背景图片

  • 背景颜色

  • 边框

    • border：边框宽度 样式 颜色

    • border： 1px solid（实线） red

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景图像</title>
    <style>
        div{
            width: 1000px;
            height: 700px;
            border:  1px solid red ;
            /*照片默认都是平铺的*/
            background-image: url("../image/2.png");
        }
        .div1{
            /*向x轴横铺一行*/
            background-repeat: repeat-x;
        }
        .div2{
            /*向y轴竖铺一列*/
            background-repeat: repeat-y;
        }
        .div3{
            /*只有一张，也是默认*/
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

 

//背景图片路径
background-image: url("/image/2.png");
//图片位置
background-position: 220px 10px;
//图片方式
background-repeat:no-repeat ;

  • 渐变

<style>
    body{
        background-color: #08AEEA;
        background-image: linear-gradient(315deg, #08AEEA 0%, #2AF598 100%);
    }
    
</style>

盒子模型以及边框使用

技术分享图片

margin:外边距

padding：内边距

border：边框

  • 边框

    • 边框的粗细

    • 边框的样式

    • 边框的颜色

    • margin+border+padding+内容宽度

  • //开发中常用设置初始值
h1,ul,li,body{
       margin: 0;
       padding: 0;
       text-decoration: none;
   }

圆角边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid orangered;
            margin: 100px auto;
            border-radius: 50px 30px 20px 50px;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

阴影

(投影方式)(X轴偏移量)(Y轴偏移量)(阴影模糊半径)(阴影扩展半径)(阴影颜色)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 3px solid orangered;
            margin: 100px auto;
            border-radius: 50px 30px 20px 50px;
            box-shadow: 6px 6px 6px blue;
            }
        img{
            border-radius: 50px;

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

</div>
<img src="../image/4.jpg" >
</body>
</html>

浮动

  • 标准文档流

技术分享图片

行内元素可以包含到块级元素中，反之，则不可以~

  • disaply

block 块元素

inline 行内元素

inline-block 是块元素，但是可以内联，在一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }

        span {
            height: 100px;
            width: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html>

  • float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style>
        div {
            width: 1000px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
<div><img src="../image/4.jpg" >块元素</div>
</body>
</html>

overflow以及父级边框塌陷问题

  • clear

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

解决父级元素塌陷方案：

  1. 增加父级元高度

height=1000px;

 

  1. 增加一个空的div标签，清除浮动

<div class="clear"><div>

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

  1. voerflow

在父类元素中增加一个 overflow：hidden;

 

  1. 父类添加一个伪类：after

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

  • 塌陷小结：

  1. 浮动元素后面增加空div

    • 简单，代码中尽量避免空div

  2. 设置父级元素高度

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

  3. overflow

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

  4. 父类添加一个伪类：after（推荐）

    • 写法稍微复杂一些，但是没有副作用，推荐使用

  • 对比 display和float都可以让元素排到一列

    • display

      • 方向不可以控制

      • 但是不会有塌陷问题

    • float

      • 方向可以控制

      • 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题。

定位

相对定位

相对定位：position：relative;

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        div {
            padding: 10px;
            margin: 50px;
        }

        #father {
            border: 1px solid yellow;
        }

        #first {
            border: 1px dashed red;
            background-color: yellow;
            position: relative; /*相对定位*/
            left: 20px;
            top: 30px;
        }

        #second {
            border: 1px dashed red;
            background-color: #ee33ff;
        }

        #third {
            border: 1px dashed blue;
            background-color: #20ff57;
            position: relative;
            right: 30px;
            bottom:10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">

    </div>

    <div id="second">

    </div>

    <div id="third">

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

 

参数：
top
left
bottom
right

绝对定位

position：absolute;

定位：基于***的定位，上下左右

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

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

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

  4. 相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，他不在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        div {
            padding: 10px;
            margin: 50px;
        }

        #father {
            border: 1px solid yellow;
            position: relative;
        }

        #first {
            border: 1px dashed red;
            background-color: yellow;
            position: absolute; /*相对定位*/
            left: -20px;
            bottom: -100px;

        }

        #second {
            border: 1px dashed red;
            background-color: #ee33ff;
        }

        #third {
            border: 1px dashed blue;
            background-color: #20ff57;
            position: relative;
            right: 30px;
            bottom:10px;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">

    </div>

    <div id="second">

    </div>

    <div id="third">

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

固定定位fixed

position: fixed;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }

        div:nth-of-type(1){
            height: 50px;
            width: 50px;
            border: 1px red solid;
            background: yellow;
            position: absolute;
            right: 0;
            bottom:0 ;
        }
        div:nth-of-type(2){
            height: 100px;
            width: 100px;
            border: 1px blue dashed;
            background: cadetblue;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>

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

</body>
</html>

z-index以及透明度

list-style=none去掉ul li圆点

opactiy:0.5/背景透明度/区间（0-1）

filter：Alpha(opacity=50);之前浏览器用的背景透明度，一般两个都写上，

z-index：0； 默认为0，最高无限制，一般写999就可以了，z-index意思为当前默认显示的层数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        body{
            height: 1000px;
        }

        div:nth-of-type(1){
            height: 50px;
            width: 50px;
            border: 1px red solid;
            background: yellow;
            position: absolute;
            right: 0;
            bottom:0 ;
            /*opacity: 0.5; 现在用的*/
            /*filter: alpha(opacity=50); 最早之前用到*/
            /*z-index: 1;*/
        }
        div:nth-of-type(2){
            height: 100px;
            width: 100px;
            border: 1px blue dashed;
            background: cadetblue;
            position: fixed;
            opacity: 0.1;
            right: 0;
            bottom: 0;
        }
        span{
            /*文本模糊度*/
           color: rgba(0,0,0,0.1);
          /*文本阴影*/
            text-shadow: 30px 2px  3px red ;
        }
    </style>
</head>
<body>

<div >div1</div>
<div>div2</div>
<span>你好</span>
</body>
</html>

 

https://space.bilibili.com/95256449?spm_id_from=333.788.b_765f7570696e666f.1

CSS笔记整理

原文：https://www.cnblogs.com/Kentstudy/p/12770988.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！