ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS学习总结

2021-04-19 19:29:48  阅读:130  来源: 互联网

标签:总结 color text 学习 width background webkit CSS


CSS学习总结

一、CSS简介

  CSS是级联样式表(Cascading Style Sheets)的缩写。HTML 用于撰写页面的内容,而 CSS 将决定这些内容该如何在屏幕上呈现.

  网页的内容是由 HTML的元素构建的,这些元素如何呈现,涉及许多方面,如整个页面的布局,元素的位置、距离、颜色、大小、是否显示、是否浮动、透明度等等。

  万维网联盟 W3C(World Wide Web Consortium)意识到这个问题,于1997年推出 CSS 1.0(当前最新的版本是 CSS3),正式推动了内容(HTML)和表现(CSS)的分离,人们开始可以把所有的布局和样式代码从 HTML 中移除放入到 CSS 中。

  CSS 入门极其容易,但要完全掌握及合理的应用则比较困难。

二、CSS学习

1、CSS生效

  CSS生效有三种方式:1、外部样式表。2、内部样式表。3、内联样式

①外部样式表

通过在html中加入以下代码

<link rel="stylesheet" type="text/css" href="mycss.css">

然后在CSS文件中通过选择器写入需要的样式
如下所示:

body{
    background-image: url(body.jpg);
    /*实现图片平铺且不重复的效果*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.body{
    width: 1200px;
    height:auto;
    border: 2px rgb(15, 15, 94) solid;
    /*最后一个数为透明度的设置*/
    background-color:rgba(238, 231, 231, 0.9);
    margin:0 auto;
}
h1{
    text-align: center;
    /*实现文字颜色渐变的效果*/
    background-image: -webkit-linear-gradient(top,red,darkblue );
    color: transparent;
    -webkit-background-clip: text ;
    
}

②内部样式表

在head中写入style样式
如下所示:

<style>
    body {
      background-color: linen;
      text-align: center;
    }
    h1 {
      color: red;
    }
    .haha {
      margin-top: 100px;
      color: chocolate;
      font-size: 50px;
    }
  </style>

③内联样式

直接在标签中写出样式
如下所示:

<div class='headp'><img src='t/h1.jpg'alt='wrong'width='100%'height='100%'></div>

2、颜色、尺寸、对齐

代码如下所示:

.hero_h{
        width: 300px;
        border: black solid;
        text-align: center;
        position: relative;
        top: 50px;
        left: 970px;
        font-size: 40px;
        }

3、盒子模型

代码如下:

.video{
        position: fixed;
        top: 20px;
        right: 20px;
        width: 300px;
        height: auto;
        background-color:rgba(255,255,255,0.8);
    }
    .vhead{
        text-align: center;
        font-size: 25px;
        color: black;
        border: black solid 1.5px;
    }
    .video_t{
        width: 100%;
        background-color: rgb(215, 218, 206);
    }

在这里插入图片描述

4、边框与边距

代码如下:

.vhead{
        text-align: center;
        font-size: 25px;
        color: black;
        border: black solid 1.5px;
    }

在这里插入图片描述

5、定位

代码如下:

.video{
        position: fixed;
        top: 20px;
        right: 20px;
        width: 300px;
        height: auto;
        background-color:rgba(255,255,255,0.8);
    }

在这里插入图片描述

6、浮动

代码如下:

.li_abstract{
        margin-left: 2%;
        text-indent:2em;
        max-width:40%;
        display:inline-block;
        float:left;

    }

7、不透明度

代码如下:

.body{
    width: 1200px;
    height:auto;
    border: 2px rgb(15, 15, 94) solid;
    /*最后一个数为透明度的设置*/
    background-color:rgba(238, 231, 231, 0.9);
    margin:0 auto;
}

在这里插入图片描述

三、效果显示

代码如下:

body{
    background-image: url(body.jpg);
    /*实现图片平铺且不重复的效果*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.body{
    width: 1200px;
    height:auto;
    border: 2px rgb(15, 15, 94) solid;
    /*最后一个数为透明度的设置*/
    background-color:rgba(238, 231, 231, 0.9);
    margin:0 auto;
}
h1{
    text-align: center;
    /*实现文字颜色渐变的效果*/
    background-image: -webkit-linear-gradient(top,red,darkblue );
    color: transparent;
    -webkit-background-clip: text ;
    
}
.head1{
    width: 100%;
    height: 400px;
}
.marvel{
    width: 300px;
    border: black solid;
    text-align: center;
    position: relative;
    top: 50px;
    left: 970px;
    font-size: 40px;
    background-image: -webkit-linear-gradient(top,red,darkblue );
    color: transparent;
    -webkit-background-clip: text ;
    /*不同的浏览器版本号用webkit或moz*/
    -webkit-box-shadow:2px 2px 20px rgb(230, 4, 4);
    -webkit-transform:rotate(45deg);
    -moz-box-shadow: 2px 2px 20px rgb(230, 4, 4);
    -moz-transform:rotate(45deg);
}
.marvel:hover{
    font-size: 50px;
}
    .headp{
        margin-left: 2%;
        width: 600px;
        height: auto;
        margin-top:3%;
        /*设置成行内块元素,通过向左浮动来实现同一行显示*/
        display:inline-block;
        float: left;

    }
        .headt{
        text-indent:2em;
        margin-left: 5%;
        width: 30%;
        margin-top: 3%;
        display:inline-block;
        float: left;
        
  
    }
    .li_h{
        width: 300px;
        border: black solid;
        text-align: center;
        position: relative;
        top: 50px;
        left: 970px;
        font-size: 40px;
        background-image: -webkit-linear-gradient(top,red,darkblue );
        color: transparent;
        -webkit-background-clip: text ;
        /*不同的浏览器版本号用webkit或moz*/
        -webkit-box-shadow:2px 2px 20px rgb(230, 4, 4);
        -webkit-transform:rotate(45deg);
        -moz-box-shadow: 2px 2px 20px rgb(230, 4, 4);
        -moz-transform:rotate(45deg);
        
    }
    .li_h:hover{
        font-size: 50px;
    }
    .li_p{
        width: 600px;
        height: auto;
        display: inline-block;
        float:left;
    }
    .li_abstract{
        margin-left: 2%;
        text-indent:2em;
        max-width:40%;
        display:inline-block;
        float:left;

    }
    .li_create p{
        text-align: center;
        font-size: 30px;
    }
    .li_create{
        width: 70%;
    }
    .hero_h{
        width: 300px;
        border: black solid;
        text-align: center;
        position: relative;
        top: 50px;
        left: 970px;
        font-size: 40px;
        background-image: -webkit-linear-gradient(top,red,darkblue );
        color: transparent;
        -webkit-background-clip: text ;
        /*不同的浏览器版本号用webkit或moz*/
        -webkit-box-shadow:2px 2px 20px rgb(230, 4, 4);
        -webkit-transform:rotate(45deg);
        -moz-box-shadow: 2px 2px 20px rgb(230, 4, 4);
        -moz-transform:rotate(45deg);
    }
    .hero_h:hover{
        font-size:50px;
    }
    td{
        text-align: center;
    }
    td a{
        text-decoration: none;
    }
    .hero p{
        text-align: center;
        font-size: 30px;
        background-image: -webkit-linear-gradient(top,red,darkblue );
    color: transparent;
    -webkit-background-clip: text ;
    }
    .tablep{
        width: 200px;
        height: 200px;
    }
    .text1{
        width: 200px;
        text-indent: 2em;
    }
    .video{
        position: fixed;
        top: 20px;
        right: 20px;
        width: 300px;
        height: auto;
        background-color:rgba(255,255,255,0.8);
    }
    .vhead{
        text-align: center;
        font-size: 25px;
        color: black;
        border: black solid 1.5px;
    }
    .video_t{
        width: 100%;
        background-color: rgb(215, 218, 206);
    }
 
    .video_t a{
        display: inline-block;
        text-decoration: none;
        padding-inline: 4px;
        color: black;
    }
    .video_picture{
        width: 100%;
        height: 300px;
        background-image: url(./t/v1.jpg);
        background-size: 100% 100%;
        
    }
    .p:hover{
        cursor: pointer;
        color:darkred;
        background-color:white;
    }
    .p:nth-child(2):hover ~.video_picture{
        background-image: url(./t/v2.jpg);
    }
    .p:nth-child(3):hover ~.video_picture{
        background-image: url(./t/v3.jpg);
    }
    .p:nth-child(4):hover ~.video_picture{
        background-image: url(./t/v4.jpg);
    }
    .p:nth-child(5):hover ~.video_picture{
        background-image: url(./t/v5.jpg);
    }

效果:
在这里插入图片描述

四、学习总结

  在CSS这部分的学习过程中,相对来说要困难一点,但是学习起来比较有意思,也在其他地方去看了一些相关的视频,让样式可以看起来更加美观,这也让我们网页的展示有了更加丰富的可能和变化,可以帮助我们做出更多个性化的网页,给今后前端的学习打下了基础,以后也会慢慢的更加深入的学习,了解更多相关的知识。

标签:总结,color,text,学习,width,background,webkit,CSS
来源: https://blog.csdn.net/qq_50828712/article/details/115871493

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有