【狂神说JAVA】CSS详细笔记(全)

已于 2023-02-01 10:51:34 修改
阅读量987 收藏 34
点赞数 9
分类专栏： 狂神说JAVA系列笔记 文章标签： css java html
于 2023-01-18 22:01:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53517370/article/details/128730839
版权

文章目录

1、CSS是什么

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

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

1.2 发展史

CSS1.0
CSS2.0 DIV(块) + CSS, HTML与CSS结构分离的思想 网页变得简单
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…. 浏览器兼容性~

1.3 快速入门

style
基本入门
代码示例

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

    <!--规范，<style> 可以编写CSS代码 每一个声名使用分号结尾
    语法：
    选择器{
    声名1;
    声名2;
    声名3;
    }
    -->
    <style>
      h1{
        color: aquamarine;
      }
    </style>

  </head>
  <body>

    <h1>这是一个标题</h1>

  </body>
</html>

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

1.4 CSS的3种导入方式

优先级：就近原则 行内样式>内部样式>外部样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>导入方式</title>

    <!-- 内部样式 -->
    <style>
      h1 {
        color: black;
      }
    </style>

    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>

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

  </body>
</html>

拓展：外部样式两种写法
1.链接式
HTML

<!-- 外部样式 -->
<link rel="stylesheet" href="css/style.css">

2.导入式
@import是CSS 2.1特有的

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

2、选择器

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

2.1 基本选择器

1.标签选择器

**特点：选择一类标签 标签{},**会选择到页面上所有的这个标签的元素

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      h1{
        color: green;
      }
      p{
        color: red;
      }

    </style>
  </head>
  <body>
    <h1> 标题1 </h1>
    <h1> 标题1 </h1>
    <p> 我是段落 </p>
  </body>
</html>

2.类选择器

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

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

    <style>
      /* 类选择器
      对同一个类操作
      */
      .class-name1{
        color: red;
      }

      .class-name2{
        color: green;
      }
    </style>

  </head>
  <body>

    <h1 class="class-name1">标题1</h1>
    <h1 class="class-name2">标题2</h1>
    <p class="class-name2">段落2</p>

  </body>
</html>

3.ID选择器

特点：全局唯一 #id{}

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

    <style>
      /* ID选择器
      只能对一个ID操作，ID唯一，用#
      */
      #id-1{
        color: red;
      }

      #id-2{
        color: green;
      }
    </style>

  </head>
  <body>

    <h1 id="id-1">标题1</h1>
    <h1 id="id-2">标题2</h1>

  </body>
</html>

总结

#id > .class > h1
ID选择器 > 类选择器 > 标签选择器

2.2 层次选择器

在这里插入图片描述

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

  <!--/* 后代选择器 */-->
  <!--<style>-->
  <!--  body p{-->
  <!--    background: red;-->
  <!--  }-->
  <!--</style>-->

  <!--/** 子选择器 **/-->
  <!--<style>-->
  <!--  body > p{-->
  <!--    background: aquamarine;-->
  <!--  }-->
  <!--</style>-->

  <!--/* 相邻选择器 */-->
  <!--<style>-->
  <!--  .active + p{-->
  <!--    background: red;-->
  <!--  }-->
  <!--</style>-->

  /* 通用兄弟选择器 */
  <style>
    .active ~ p{
      background: red;
    }
  </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>
</body>
</html>

1、后代选择器

在某个元素的后面全部变了、祖爷爷，爸爸，儿子，选中所有的后辈

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

2、子选择器

只有一代，选中所有的儿子

/** 子选择器 **/
<style>
body > p{
  background: aquamarine;
}
</style>

3、相邻兄弟选择器

同辈、相邻（对下不对上）、只往同一层 向后 传递一次，选中他的第一个弟弟

/* 相邻选择器 */
<style>
.active + p{
  background: red;
}
</style>

4、通用选择器

当前选中元素的向后的所有兄弟元素(同一层)，选中他所有的弟弟

/* 通用兄弟选择器 */
<style>
.active ~ p{
  background: red;
}
</style>

2.3 结构伪类选择器

在这里插入图片描述

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

        /*ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }
        
        /*
        p的父元素下的第二个元素，如果是P，就生效，否则不生效
        */
        p:nth-child(2){
            background: yellow;
        }
        /*选中父元素，下的p元素的第二个，*/
        p:nth-of-type(2){
            background: black;
        }
    </style>
    
    
</head>
<body>

    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
    </ul>


</body>
</html>

2.4 属性选择器（重要）

把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;text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
        /*属性选择器    属性名 = 属性值（正则）
        存在ID属性的元素   a[id = ]{}
        */
        
        /*包含id=first的a标签*/
        a[id=first]{
        
        }

        /*class的属性为links的a标签*/
        a[class ="links"]{
    
        }
        
        
        /*包含links关键词的class的a标签*/
        a[class *="links"]{
        
        }

        /*href以http开头*/
        a[href ^= "http"]{
            background: red;
        }

        /*href以g结尾*/
        a[href $= g]{
            background: green;
        }
    
    </style>

</head>
<body>

<p class="demo">
    <a href="http://www.baidu.com" class="links itme" id="first">1</a>
    <a href="http://www.bilibili.com" class="links itme itme">2</a>
    <a href="images/123.html" class="links itme">3</a>
    <a href="images/456.jpg" class="links itme">4</a>
    <a href="sad" class="links itme itme">5</a>
    <a href="adc" class="links itme">6</a>
</p>

</body>
</html>

3、美化网页元素

3.1 为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验
span标签：重点要突出的字，使用span套起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        .title1{
            font-size: 50px;
            background: aquamarine;
        }
    </style>

</head>
<body>

学习的<span class="title1">人最帅</span>

</body>
</html>

在这里插入图片描述

3.2 字体样式

<!--
font-family: 字体
font-size：  字体大小
font-weigth：字体粗细
color：      字体颜色
-->
<style>
    body{
        font-family: 仿宋_GB2312;
    }
</style>

3.3 文本样式

1、颜色 color rgb rgba
2、文本对齐的方式 text-align = center(居中)
3、首行缩进 text-indent: 2em
4、行高 line-heigth: 单行文字上下居中 line-heigth = heigth
5、装饰 text-decoration
6、文本图片水平对齐：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：排版，居中（center）
    text-indent: 首行缩进
    line-heigth：行高 （和快点高度一致，就可以上下居中）
    -->
    <style>
      h1{
        color: rgba(0,255,255,0.8);
        text-align: center;
      }
      .p1{
        text-indent: 2em;
      }
    </style>
  </head>
  <body>

    <h1>背景故事</h1>
    <p class="p1">天地初开，太古混乱。</p>
    <p>灵长之战后，时空人祖、九巫、始佛、幽冥、大魔神相继出世，开创道法，威临八方，众生朝迎，世人尊为始祖。</p>
    <p>天尊无敌当世，始祖名传古今。</p>
    <p>但，皆不可得长生……</p>
    <p>…………</p>
    <p>张若尘自逆境中崛起，从平凡中非凡，在这一条满是英才、妖魔、美人的长生路上，走出一个崭新的大世。</p>

  </body>
</html>

3.4 阴影

#id-1{
    /*右下为正方向*/
    text-shadow: red 10px 10px 10px;
}

3.5 超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: red;
        }
        /*鼠标被按住的颜色*/
        a:active{
            color: green;
        }
        /*被访问过的颜色*/
        a:visited{
            color: yellow;
        }
        
        #id-1{
            /*右下为正方向*/
            text-shadow: red 10px 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="#" alt="">测试超链接伪类
</a>

<a href="#" id="id-1">
    测试阴影
</a>
</body>
</html>

在这里插入图片描述

3.6 列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
    <li><a href="#">图书</a>&nbsp;<a href="#">音响</a>&nbsp;<a href="#">图书</a>&nbsp;</li>
    <li><a href="#">图书</a>&nbsp;<a href="#">音a a 响</a>&nbsp;<a href="#">图dd书</a>&nbsp;</li>
    <li><a href="#">图书</a>&nbsp;<a href="#">音ww响</a>&nbsp;<a href="#">dd</a>&nbsp;</li>
</ul>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        
        #nav{
            width: 300px;
            background: aquamarine;
        }
        h2{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
            background: red;
        }
        /*
        list-style
        none      去掉原点
        circle    空心圆
        decimal   数字
        square    正方形
        */
        ul li{
            list-style: none;
            text-indent: 1em;
    
        }
        
        /*ul{*/
        /*    background: aquamarine;*/
        /*}*/
        
        a{
            text-decoration: none;
            font-size: 14px;
        }
        a:hover{
            color: orange;
            text-decoration: underline;
        }
    </style>
    
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;<a href="#">音响</a>&nbsp;<a href="#">图书</a>&nbsp;</li>
        <li><a href="#">图书</a>&nbsp;<a href="#">音a a 响</a>&nbsp;<a href="#">图dd书</a>&nbsp;</li>
        <li><a href="#">图书</a>&nbsp;<a href="#">音ww响</a>&nbsp;<a href="#">dd</a>&nbsp;</li>
    </ul>
</div>
</body>
</html>

在这里插入图片描述

3.7 背景

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

4、盒子模型

4.1 边框和内外边距

  • margin 框架向外扩张
  • border 框架的粗细
  • padding 框架向内扩张
  • 最里层的是 比如input的大小

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

![image.png](https://img-blog.csdnimg.cn/img_convert/1685de47b8beada6f9f429407c684c13.png#averageHue=#fefdfd&clientId=uad104e53-d7dc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=728&id=u242ff672&margin=[object Object]&name=image.png&originHeight=910&originWidth=1309&originalType=binary&ratio=1&rotation=0&showTitle=false&size=63214&status=done&style=stroke&taskId=u93f896f4-e6a6-435b-bb43-dbe47488840&title=&width=1047.2)
在这里插入图片描述

一张图片的大小，应该等于=margin+border+padding+自己本身的width/height

5、浮动

5.1 display

块内元素：h1-h6 p div 列表 独占一行
行内元素：span a img strong 不独占一行
display

  • display:block 独占一行的块
  • display:inline 不独占一行的
  • display:inline-block 不独占一行的块，本质是块，但是后面可以加东西

基础：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
        
    </style>
</head>
<body>

<div>测试1</div>
<span>测试2</span>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

5.2 float

float

  • float: right向右浮动，不独占一行(后面的浮动和他一行)，类似于word
  • clear:both(/left/right只有左右)配合float使用，独占一行

在这里插入图片描述

5.3 父级边框塌陷问题

问题：浮动之后，没有图片在父级边框之内
在这里插入图片描述

解决方案：
1、增加父级元素高度

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

2、增加一个空DIV标签，清除浮动 (标准写法,但是添加了空div代码不美观）

<div class = "clear"></div>
.cleal{
  clear:both;
  margin:0;
  padding:0;
}

3、在父级元素中增加一个overflow

#father{
  border:1px #000 solid;
  height:800px;
  overflow:hidden;   //意思是超出范围就隐藏(如果有宽高的话) scroll 滚动条
}

4、父类添加一个伪类：after （本质和添加一个空div一样，但是代码更美观，方便实用)

#father:after{
    content:'';
    display:block;
    clear:both;/*消除浮动*/
}

小结

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

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

  1. 设置父元素的高度

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

  1. overflow

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

  1. 父类添加一个伪类: after(推荐)

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

5.4 display和float对比

  • display

方向不可以控制o

  • float

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

6、定位

标准：

<!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 green;
        }
        #first{
            border: 1px dashed red;
        }
        #second{
            border: 1px dashed orange;
        }
        #third{
            border: 1px dashed blue;
        }
    </style>
    
</head>
<body>

<div id="father">
    <div id="first">第1个盒子</div>
    <div id="second">第2个盒子</div>
    <div id="third">第3 个盒子</div>
</div>

</body>
</html>

在这里插入图片描述

6.1 相对定位relative

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

#father{
  border: 1px solid green;
}
#first{
  border: 1px dashed red;
  position: relative; /*相对定位，上下左右*/
  top: -20px;
  left: 10px; /*以原来为界限，距离左边10个单位*/
}
#second{
  border: 1px dashed orange;
}
#third{
  border: 1px dashed blue;
  position: relative;
  bottom: 10px; /*距离原来的下面有10个单位*/
}

在这里插入图片描述

6.2 绝对定位absolute

定位:基于xxx定位，上下左右~

  1. 没有父级元素定位的前提下，相对于浏览器定位
  2. 假设父级元素存在定位，我们通常会相对于父级元素进行偏移，(父元素要postion:relative一下）

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

div{
  position: absolute;
  left: 50px;
  top: 100px
}

6.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: green;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>


<div>div1</div>
<div>div2</div>
</body>
</html>

在这里插入图片描述

总结

  • 绝对定位，浏览器滑动，它变位置了
  • 固定定位，浏览器滑动，它永远在右下角

6.4 z-index

在这里插入图片描述

图层，层级的概念

.tipText{
    z-index: 999; /*图层级别*/
}

透明度

.tipBg{
    opacity: 0.5; /*背景透明度*/
    filter: alpha(opacity=50); !*背景透明度*!
}
就你叫Martin？
关注
  • 9
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
狂神笔记，b站狂神说课程笔记大全(最新)
09-19
狂神说java系列笔记（java基础+javaweb+ssm+微服务）全套 狂神说上课笔记未删减 Java基础到技术升级 1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE：方法 5、JavaSE：数组 6、JavaSE：...
【狂神说】CSS学习笔记
pan_h1995的博客
05-07 8250
参考B站狂神说视频教程
CSS完整笔记
weixin_68478645的博客
01-29 619
font-size：大小尺寸 ：值：inherited 默认值16px px像素 %百分比相对于父标签的 字体大小的百分比 em 倍数 相对于父元素标签字体大小的倍 数 rem 相对于根标签文本字体的尺寸。hand（手型）、crosshair （“十”型）、text （“I”型）、wait（等待）、default （默认）、help（帮助）、类选择器：以点为前缀。font：简写：font：font-style|font-weight|font-size|font-family。
CSS笔记汇总-最全最仔细（会时刻更新）
小女不才
09-21 1006
样式表优点缺点使用情况控制范围行内样式书写方便，权重高没有实现样式和结构相分离较少一个标签内部样式部分结构和样式像分离没有彻底分离较多控制一个页面外部样式完全实现结构和样式相分离需要引入最多，强烈推荐控制整个站点一个完整的网页 ，是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。标准流可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。浮动可以让多个块级元素行显示或者左右对齐盒子 ，多个块级盒子水平显示就用浮动布局。定位。
【狂神说Java】CSS3快速入门
weixin_54533016的博客
02-26 161
跟着B站的狂神说学习CSS3，学习总结如下CSS3快速学习提示：以下是本篇文章正文内容，下面案例可供参考Cascading Style Sheet 层叠级联样式表CSS：表现（美化网页）字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动…标签说明margin外边距padding内边距border边框。
CSS笔记（精简）
weixin_46160720的博客
03-11 4414
CSS笔记 HTML 前端教程 前端笔记
狂神说各种学习视频配套笔记
05-30
包括Java、html、CSS、JavaScript、Mysql、JavaWeb、Mybatis、SpringMVC、Linux、Redis、SpringCloud等
狂神说上课笔记未删减 Java基础到技术升级
08-09
1、JavaSE：Java入门 2、JavaSE：基础语法 3、JavaSE：流程控制 4、JavaSE：方法 5、JavaSE：数组 6、JavaSE：面向对象 7、JavaSE：异常机制 8、JavaSE：常用类 9、JavaSE：集合框架 10、JavaSE：IO流 11...
狂神说系列 JavaScript笔记
06-15
狂神说系列 JavaScript笔记
狂神说视频-CSS笔记.pdf
11-12
主要根据狂神说的视频整理CSS
狂神Java学习笔记————前端入门——html、css、JavaScript学习代码
06-17
此资源为我跟着B站up主【遇见狂神说】java系列视频中前端入门部分学习过程中所写 大部分和视频保持一致，有一些自己的理解和一些扩展的部分
CSS学习笔记
qq_46485137的博客
02-28 3681
css的基本知识 一、初识CSS 1.1 CSS是什么 1.2 CSS发展史 1.3CSS的三种导入方式 1.3.1 内部样式： 1.3.2 外部样式（推荐使用）： 1.3.3 行内样式 二、CSS选择器⭐ 三、美化网页（文字，阴影，超链接，列表） 四、盒子模型 五、浮动 六、定位 七、网页动画（特效） 一、初识CSS 1.1 CSS是什么 CSS：Cascading Style Sheet 层叠级联样式表 ...
【狂神说】SpringMVC笔记整理 | SSM框架整合
小七自学博客
12-21 1328
SpringMVC 目录SpringMVC1.MVC1.1 MVC是什么1.2 Model时代1.3 Model2时代1.4 回顾ServletMVC框架要做哪些事情2. 什么是SpringMVC2.1 概述2.2 中心控制器2.3 SpringMVC执行原理3. HelloSpeingMVC配置版注解版小结4. RestFul和控制器4.1 控制器Controller实现Controller接口使用注解@Controller4.2 @RequestMapping4.3 RestFul 风格概念学习测试使用
CSS笔记[狂神版]
weixin_47741922的博客
07-30 195
CascadingStyleSheet层叠级联样式表CSS表现（美化网页）
CSS3 笔记
SwaeLeeUknow的博客
03-09 192
CSS 文章目录CSS1.什么是CSS？1.1、什么是CSS1.2、发展史1.3、快速入门 1.什么是CSS？ 如何学习 CSS是什么 CSS怎么用（快速入门） CSS 选择器（重点 + 难点） 美化网页（文字，阴影，超链接，列表，渐变…） 盒子模型 浮动 定位 网页动画（特效） 菜鸟教程、W3C 1.1、什么是CSS Cascading Style Sheet 层叠级联样式表 CSS：表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动 1.2、发展史 CSS1.0 CSS
【狂神学习笔记】CSS
weixin_45500506的博客
08-02 513
文章目录什么是CSScss导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷display和浮动定位相对定位绝对定位固定定位css导入方式选择器（重点）基本选择器标签选择器（重点，必会）类选择器id选择器层次选择器后代选择器子选择器相邻弟弟选择器通用弟弟选择器结构伪类选择器属性选择器（常用）盒子模型居中display浮动清除浮动父级框塌陷displa
JavaWeb-01：HTML,CSS,JavaScript,DOM的理解
最新发布
博客
05-17 139
HTML,CSS,JavaScript,DOM的理解
狂神说java多线程笔记
10-11
Java多线程是Java语言中的一个重要特性，可以让程序同时执行多个任务，提高程序的效率和性能。狂神在他的Java多线程笔记中，详细介绍了Java多线程的相关知识，包括线程的创建、启动、停止、等待、唤醒等操作，以及线程安全、锁、同步等概念和技术。 在Java多线程中，线程的创建有两种方式：继承Thread类和实现Runnable接口。其中，实现Runnable接口更为常用，因为它可以避免单继承的限制，并且更符合面向对象的设计原则。 线程的启动使用start()方法，而不是run()方法。start()方法会启动一个新的线程，并在新线程中执行run()方法中的代码。 线程的停止可以使用stop()方法，但这个方法已经被废弃了，因为它可能会导致线程不安全。更好的方式是使用interrupt()方法来中断线程，并在run()方法中检查中断标志位来安全地停止线程。 线程的等待和唤醒可以使用wait()、notify()和notifyAll()方法来实现。wait()方法会使当前线程进入等待状态，并释放锁；notify()和notifyAll()方法会唤醒等待在同一个对象上的其他线程。 线程安全是指多个线程同时访问共享资源时，不会出现数据不一致或者程序崩溃等问题。为了保证线程安全，可以使用锁和同步机制来控制对共享资源的访问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

就你叫Martin？

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值