CSS学习

已于 2023-03-21 22:18:02 修改
阅读量228 收藏
点赞数
文章标签： css 学习 前端
于 2022-09-17 21:15:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yezishuibuxing/article/details/126820611
版权

如何学习 

  1. CSS是什么
  2. CSS怎么用（快速入门）
  3. CSS选择器（重点+难点）
  4. 美化网页（文字，阴影，超链接，列表，渐变...）
  5. 盒子模型
  6. 浮动
  7. 定位
  8. 网页动画（特效效果）

什么是CSS

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

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

（任何一个网站右键->点击审查元素  或者  摁住f12->点击开发者工具）

 CSS发展史

CSS1.0

CSS2.0  DIV（块）+CSS,HTML与CSS结构分离的思想，网页变得简单，利于SEO

CSS2.1  浮动，定位

CSS3.0  圆角，阴影，动画...浏览器兼容性

练习格式：

快速入门

style

基本入门

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

<!--    规范,<style>可以编写css代码.每一个声明，最好使用分号结尾
        语法
            选择器{
                声明1;
                声明2;
                声明3;
            }
-->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我是标签</h1>

</body>
</html>

建议使用这种规范

 css的优势：

  1. 内容和表现分离
  2. 网页结构表现统一，可以实现复用
  3. 样式十分的丰富
  4. 建议使用独立于html的css文件
  5. 利于SEO，容易被搜索引擎收录

css的三种导入方式

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

    <style>
        /*内部样式*/
        h1{
            color: green;
        }
    </style>

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red " >我是标题</h1>
</body>
</html>

拓展：外部样式的两种写法

  • 链接式：html

    <!-- 外部样式-->

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

  • 导入式：@import是CSS2.1特有的

    <!--导入式-->

    <style>

       @import url("css/style.css "); 

    </style>

选择器

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

基本选择器

标签选择器：

选择一类标签        标签{}

目录

如何学习 

什么是CSS

什么是CSS

 CSS发展史

快速入门

基本入门

css的三种导入方式

选择器

基本选择器

标签选择器：

类选择器 class：

Id选择器：

优先级：id > class > 标签

层次选择器

结构伪类选择器

 属性选择器（常用）

美化网页元素

为什么要美化网页

字体样式

文本样式

阴影

超链接伪类

列表

背景

渐变

盒子模型

什么是盒子模型

边框

内外边距

圆角边框

盒子阴影

浮动

标准文档流

display

float

父级边框塌陷的问题

小结：

对比

定位

相对定位

绝对定位

固定定位fixed

z-index

动画

类选择器 class：

选择所有class属性一致的标签，跨标签        .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    /*类选择器的格式.类的名称{}
    好处：可以多个标签归类，是同一个class，可以复用
    */
    .my {
      color: #1859b8;
    }
    .yz {
      color: #57056e;
    }
  </style>
</head>
<body>
<h1 class="my" >标题1</h1>
<h1 class="yz" >标题2</h1>
<h1 class="my" >标题3</h1>

<p class="my" >P标签</p>
</body>
</html>

Id选择器：

全局唯一        #id名{}

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

  <style>
    /*id选择器格式  id必须保证全局唯一
      #id名称{}

      优先级：
      不遵循就近原则
      id选择器>class选择器>标签选择器
    */
    #my {
      color: #ea089a;
    }
  </style>

</head>
<body>
<h1 id="my" >标题1</h1>
<h1>标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id > class > 标签

层次选择器（不改变自身样式）

  • 后代选择器：在某个元素的后面 祖爷爷 爷爷 爸爸 你

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

  • 子选择器  一代，儿子

    /* 子选择器*/

    body>p{

         background: #57056e ;

    }

  • 相邻兄弟选择器  同辈

    /* 相邻兄弟选择器:只有一个 相邻，（向下）*/

    .active +p{

        background: brown ;

    }

  • 通用选择器

    /* 通用选择器:当前选中元素的向下的所有兄弟元素*/

    .active ~p{

        background: green ;

    }

结构伪类选择器

伪类：条件

/*ul的第一个子元素*/

ul li:first-child {

    background: #3cbda6 ;

}

/*ul的最后一个子元素*/

ul li:last-child {

    background: #57056e ;

}

/* 选中p1：定位到父元素，选择当前的第一个元素

    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效 顺序

*/

p:nth-child(2){

    background: #1859b8 ;

}

/*选中父元素，下的p元素的第二个 类型*/

p:nth-of-type(2){

    background: coral ;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--避免使用class,id选择器-->
  <style>
    /*ul的第一个子元素*/
    ul li:first-child {
      background: #3cbda6 ;
    }
    /*ul的最后一个子元素*/
    ul li:last-child {
      background: #57056e ;
    }

  /*  选中p1：定位到父元素，选择当前的第一个元素
      选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效  顺序
  */
    p:nth-child(1){
      background: #1859b8 ;
    }

    /*选中父元素，下的p元素的第二个  类型*/
    p:nth-of-type(2){
      background: coral ;
    }

    /*a:hover {*/
    /*  background: #056e46;*/
    /*}*/
  </style>
</head>
<body>
<!--  <a href="">dsd</a>-->
<!--  <h1>h1</h1>-->
  <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: 10px;
      background: #1859b8 ;
      text-align: center ;
      color: #9099b8;
      text-decoration: none ;
      margin-right: 5px;
      font: bold 20px/50px Arial ;
    }

    /*属性名，属性名=属性值（正则）
      =绝对等于
      *=包含这个元素
      ^=以这个开头
      $=以这个结尾
    */
    /*存在id属性的元素     a[]{}*/
    /*a[id ]{*/
    /*  background: yellow ;*/
    /*}*/

    /*id=first的元素*/
    /*a[id =first ]{*/
    /*  background: #22ff00;*/
    /*}*/

    /*class中有link的元素*/
    /*a[class *="links"]{*/
    /*  background: yellow ;*/
    /*}*/

    /*选中href中以http开头的元素*/
    /*a[href ^=http]{*/
    /*  background: yellow ;*/
    /*}*/

    a[href $=pdf]{
      background: yellow ;
    }
  </style>

</head>
<body>
<p class="demo" >
  <a href="https://www.baidu.com" class="links item first" id="first" >1</a>
  <a href="" class="links item active" target="_blank " title="test" >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="/abc.pdf" class="links item">8</a>
  <a href="abc.doc" class="links item">9</a>
  <a href="abcd.doc" class="links item last" >10</a>
</p>
</body>
</html>

=绝对等于

*=包含这个

^=以这个开头

$=以这个结尾 

美化网页元素

为什么要美化网页

  1. 有效的传递页面信息
  2. 美化网页，网页漂亮，才能吸引用户
  3. 凸显网页的主题
  4. 提高用户的体验

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #title1 {
        font-size: 50px;
      }
    </style>
</head>
<body>
欢迎学习<span id="title1">java</span>
</body>
</html>

字体样式

<!--
font-family:字体
font-size:字体大小
font-weight:字体粗细
color:字体颜色
-->
<style>
body {
  font-family: 华文行楷,Calibri ;
  color: #57056e;
}
h1{
  font-size: 50px;
}
.p1 {
  font-weight: bold;
}
</style>

文本样式

  • 颜色        color rgb rgba
  • 文本对齐的方式        text-align=center
  • 首行缩进        text-indent:2em;
  • 行高        line-heigth:单行文字上下居中  line-heigth=heigth;
  • 装饰        text-decoration:
  • 文本图片水平对齐        vertical-align:middle;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  颜色：
        单词
        rgb:0~F
        rgba  A:0~1
      text-align:排版，居中
      text-indent:段落首行缩进
      height: 150px;
      line-height: 150px;
      行高 和 块 的高度一致就可以上下居中
-->
  <style>
    h1{
      color: rgba(0,255,255,0.8) ;
      text-align: center ;
    }
    .p1 {
      text-indent: 2em;
    }
    .p3 {
      background: #ea089a;
      height: 150px;
      line-height: 150px;
    }
    /*下划线*/
    .l1 {
      text-decoration: underline ;
    }
    /*中划线*/
    .l2 {
      text-decoration: line-through ;
    }
    /*上划线*/
    .l3 {
      text-decoration: overline ;
    }
    /*超链接去下划线*/
    a{
        text-decoration: none ;
    }
    /*水平对齐：参照物  a,b*/
    img ,span {
        vertical-align: middle;
    }
  </style>
</head>
<body>
<a href="">123</a>
<p class="l1" >123123</p>
<p class="l2" >123123</p>
<p class="l3" >123123</p>

<h1>小说内容</h1>
<p class="p1" >
  “当然会失落难过的。”封浩微笑着说，“但人生就是如此啊，你们曾相遇，共同经历过一些美好的事情，需要分别的时候，挥挥手，感谢这段经历和那些人吧。然后，你还会遇到别的人和事情。”
</p>
<p>
  “分别真不好。”
</p>
<p class="p3" >
  Since there’s no help, come let us kiss and part;Nay, I have done, you get no more of me,And I am glad, yea glad with all my heartThat thus so cleanly I myself can free;Shake hands forever, cancel all our vows,And when we meet at any time again,Be it not seen in either of our browsThat we one jot of former love retain.Now at the last gasp of Love’s latest breath,When, his pulse failing, Passion speechless lies,When Faith is kneeling by his bed of death,And Innocence is closing up his eyes,Now if thou wouldst, when all have given him over,From death to life thou mightst him yet recover.
</p>

<img src="images/1.jpg" alt="">
<span>ajdkjefdkc</span>
</body>
</html>

阴影

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

超链接伪类

正常情况下 a,a:hover

/*默认的颜色*/
    a{
      text-decoration: none ;
      color: black;
    }
    /*鼠标悬浮的状态（只需要记住hover）*/
    a:hover {
      color: orange;
      font-size: 50px;
    }

列表

/*ul li*/
/*
    list-style:
        none 去掉原点
        circle 空心圆
        decimal 有序列表
        square 正方形

*/
ul{
    background: gray ;
}
ul li{
    height: 30px;
    list-style:none ;
    text-indent: 1em;
}

背景

背景颜色

背景图片

<style>
    div{
      width: 1000px;
      height: 700px;
      border: 1px solid red;
      background-image: url("images/3.jpg ") ;
      /*默认是全部平铺的 repeat*/
    }
    .div1{
      background-repeat: repeat-x ;
    }
    .div2 {
      background-repeat: repeat-y ;
    }
    .div3 {
      background-repeat: no-repeat ;
    }
  </style>

练习：

渐变

background-color:#FFFFFF;
background-image:linear-gradient(19deg,#21D4FD 0%, #21ff55 100%) ;

盒子模型

什么是盒子模型

 madgin:外边距

border:内边距

padding:边框

边框

边框的粗细

边框的样式

边框的颜色

<style>
  /*body总有一个默认的外边距：margin:0px 常见操作*/
  /*h1,ul,li,a,body {*/
  /*  margin: 0px;*/
  /*  padding: 0px;*/
  /*  text-decoration: none ;*/
  /*}*/
  /*border:粗细，样式，颜色*/
  #box {
    width: 300px;
    border: 1px solid red;
  }
  form{
    background: #96e0d3;
  }
  h2{
    font-size: 15px;
    background-color: #3cbda6;
    line-height: 30px;
  }
  div:nth-of-type(1) >input {
    border: 3px solid black;
  }
  div:nth-of-type(2) input{
    border: 3px dashed blue;
  }
  div:nth-of-type(3) input{
    border: 2px dashed green;
  }
</style>

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--  外边距的妙用：居中元素
      margin: 0 auto ;
-->
  <style>
    #box {
      width: 300px;
      border: 1px solid red;
      margin: 0 auto ;
    }
    /*
    顺时针旋转
    margin:0;上右下左
    margin:0 1px;上下，左右
    margin:0 2px 3px 4px;上 右 下 左

    */
    h2{
      font-size: 15px;
      background-color: #3cbda6;
      line-height: 30px;
      color: white;
      margin: 0;
    }
    form{
       background: #96e0d3;
     }
    input{
      border: 1px solid black;
    }
    div:nth-of-type(1) {
      padding: 10px 2px;
    }
  </style>
</head>
<body>
<div id="box">
  <h2>会员登陆</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>密码：</span>
      <input type="text">
    </div>
    <div>
      <span>邮箱：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

盒子的计算方式：你这个元素到底多大？

 margin+border+padding+内容宽度

圆角边框

四个角：顺时针

<style>
div{
  width: 100px;
  height: 100px;
  border: 10px solid red;
  border-radius: 50px 20px;
}
</style>

盒子阴影

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

<!--  margin: 0 auto ;居中
要求：块元素 块元素有固定的宽度
-->
  <style>
    img{
      margin: 0 auto ;
      border-radius: 540px;
      box-shadow: 100px 100px 100px yellow ;
    }
  </style>
</head>
<body>
<div style="width: 1200px;display: block ;text-align: center " >
    <img src="images/2.jpg " alt="">
</div>

</body>
</html>

浮动

标准文档流

块级元素：独占一行

h1~h6 p div 列表...

行内元素：不独占一行

span a img strong...

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

display

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

这个也是一种实现行内元素排列的方式，但是我们很多种情况都是用float

float

左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px black solid;
}
.layer01 {
    border: 1px dashed red;
    display: inline-block;
    float: right;
}
.layer02 {
    border: 1px #104ce3 dashed;
    display: inline-block;
    float: right;
}
.layer03 {
    border: 1px #0e5714 dashed;
    display: inline-block;
    float: right;
}
.layer04 {
    border: 1px rgba(33, 191, 229, 0.16) dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

父级边框塌陷的问题

clear

clear: right;右侧不允许有浮动元素

clear: left; 左侧不允许有浮动元素

clear: both; 两侧不允许有浮动元素

clear:none;

解决方案：

  1. 增加父级元素的高度

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

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

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

    .clear {

        clear: both;

        margin: 0;

        padding: 0;

    }

  3. overflow

    在父级元素中，增加一个overflow:hidden;

  4. 父类添加一个伪类after

    #father:after {

        content: '';

        display: block;

        clear: both;

    }

小结：

  1. 浮动后面增加一个空的div
    1. 简单，代码中尽量避免空的div
  2. 设置父元素的高度
    1. 简单，元素假设有了固定的高度，就会被限制
  3. overflow
    1. 简单，下拉的一些场景避免使用
  4. 在父类添加伪类：after(推荐)
    1. 写法稍微复杂一点，但是没有副作用，推荐使用

对比

  • display
    • 方向不可以控制
  • float
    • 浮动起来的话会脱离标准文档流，所有要解决父级边框塌陷的问题

定位

相对定位

<!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 #682780;
      padding: 0;
    }
    #first {
        background-color: #D5621BFF;
        border: 1px dashed #d5621b;
        position: relative; /*相对定位:上下左右*/
        top: -20px;
        left: 20px;
    }
    #second {
        background-color: #054F0BFF;
        border: 1px dashed #054f0b;
    }
    #third {
        background-color: #19D74EFF;
        border: 1px dashed #19d74e;
        position: relative;
        bottom: 10px;
        right: 20px;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="first">第一个盒子</div>
  <div id="second">第二个盒子</div>
  <div id="third">第三个盒子</div>
</div>
</body>
</html>

相对定位：position:relative;

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

top: -20px;

left: 20px;

bottom: 10px;

right: 20px;

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #box {
      width: 300px;
      height: 300px;
      padding: 10px;
      border: 2px solid red;
    }
    a{
      width: 100px;
      height: 100px;
      text-decoration: none ;
      background-color: palevioletred;
      line-height: 100px;
      text-align: center ;
      color: white;
      display: block;
    }
    a:hover {
      background-color: #1859b8;
    }
    .a2 ,.a4 {
      position: relative;
      left: 200px;
      bottom: 100px;
    }
    .a5 {
      position: relative;
      left: 100px;
      bottom: 300px;
    }
  </style>
</head>
<body>
<div id="box">
  <a class="a1"  href="#">链接1</a>
  <a class="a2"  href="#">链接2</a>
  <a class="a3"  href="#">链接3</a>
  <a class="a4"  href="#">链接4</a>
  <a class="a5"  href="#">链接5</a>
</div>
</body>
</html>

绝对定位

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

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对父级元素进行偏移
  3. 在父级元素范围内移动

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father {
            border: 1px solid #682780;
            padding: 0;
            position: relative;
        }
        #first {
            background-color: #D5621BFF;
            border: 1px dashed #d5621b;
        }
        #second {
            background-color: #054F0BFF;
            border: 1px dashed #054f0b;
            position: absolute;
            left: 100px;
        }
        #third {
            background-color: #19D74EFF;
            border: 1px dashed #19d74e;
        }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

固定定位fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body {
      height: 1000px;
    }
    div:nth-of-type(1){/*绝对定位：相对于浏览器*/
      height: 100px;
      width: 100px;
      background: red ;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){/*fixed:固定定位*/
      height: 50px;
      width: 50px;
      background: blue;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

z-index

图层

z-index:最低是0，最高无限~999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="css/style.css ">
</head>
<body>
<div id="content">
  <ul>
    <li><img src="images/1.jpg " alt=""></li>
    <li class="tipText" >学习微服务，找my</li>
    <li class="tipBg" ></li>
    <li>时间：2099-01-01</li>
    <li>地点：月球一号基地</li>
  </ul>
</div>
</body>
</html>
#content {
    margin: 0;
    padding: 0;
    width: 1000px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none ;
}
/*父级元素相对定位*/
#content ul {
    position: relative;
}
.tipText ,.tipBg {
    position: absolute;
    height: 25px;
    width: 1000px;
    top: 645px;
}
.tipText {
    color: white;
    z-index: 999;
}
.tipBg {
    background: black ;
    /*opacity: 0.3;!*背景透明度*!*/
    /*filter: alpha(opacity =0.1) ;*/
}

动画

总结

 

yezishuibuxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS学习总结
竹叶戏雨的博客
01-21 1273
总结由达内学习的笔记和菜鸟教程CSS板块(不包括CSS3)组成。 一.CSS概述 1.CSS：层叠样式表（Cascading Style Sheets）用于渲染HTML元素标签的样式，美化网页的一门技术 。 使用CSS设置样式，可以让展示数据的HTML代码和设置样式的CSS代码进行分离，可以增强网页的展示能力 2.CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:    ...
css学习
weixin_39111384的博客
04-16 1210
课程目标: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-copy-images-to: media CSS的发展历程 从HTML被发明开...
路恩CSS学习助手
07-07
路恩CSS学习助手，可快速查找css1、css2、css3全部属性和值，并配有每个属性和值的简要说明；对CSS语法规则和CSS选择器也做了详细介绍；并内置了CSS布局向导式学习教程。可以把本软件看作是一个CSS词典和CSS教程软件...
html+css学习.zip
01-01
html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习html+css学习html+css学习html+css学习html+css学习 html+css学习...
HTML和CSS学习.zip
最新发布
01-01
HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习HTML和CSS学习 HTML和CSS学习HTML和CSS学习HTML和CSS学习...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
html+css学习记录.zip
01-01
html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 html+css学习记录html+css学习记录html+css学习记录html+css学习记录 ...
css入门学习
山有木兮
06-25 4048
学过前端的人，对HTML语言一定不会感到陌生，因为它是前端设计最基本的工具。然而，随着网站越来越复杂，网站的维护变得越来越重要，对设计师的要求也越来越高。
CSS学习（下）
lvmengzou的专栏
06-30 186
2.4常用样式CSS中常用样式包括背景,大小，文本，边距，边框，显示，定位等几大类1.   背景背景指DOM元素显示的背景，任何DOM元素都可以设置背景样式，如文字，按钮等，但我们一般仅为大范围的DOM元素设置背景，如整个HTML或body等，从而实现一种底层衬托的效果。              Background-color： 用于设置背景颜色，RGB，十六进制，颜色名都可以。       ...
css学习一
杨园园的博客
07-01 237
一直知道css很强大，最近整理了一些 1、linear-gradient css 中的一个渐变的函数，用于创建一个表示两种或多种颜色线性渐变的图片 用在三个场景下：background， background-img, border-img （1）background background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); // 左上角开始，颜色渐变 如下图： （1）background-img backgro
CSS学习（一）
m0_62430017的博客
05-15 103
# CSS ## CSS引入方式 css引入方式共有一下3种 ```html 外部引入：<link rel="stylesheet" type="text/css" href="文件路径"/> 内部引入:<style type="text/css"></style> 行内引入：<div style="color:red"></div> ``` ## 字体样式 ```css font-family 字体类型 ...
CSS学习瓶颈期：理解与突破的重要性
在CSS学习过程中，常常会遇到一个关键的阶段，被称为"瓶颈期"，它如同瓶子的颈部，看似狭窄而困难，但突破后则意味着技能的飞跃和理解的深化。在这个阶段，初学者可能会感到迷茫和自我怀疑，认为CSS不过如此，但实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值