CSS入门（全）

article/2025/11/11 8:10:32

本文学习链接由此处

1、什么是CSS

如何学习

1、CSS是什么

2、CSS怎么用

3、CSS选择器

4、美化网页（文字、阴影、超链接、渐变…）

5、盒子模型

6、浮动

7、定位

8、网页动画（特效效果）

1.1什么是CSS

  • CSS 指层叠样式表 (Cascading Style Sheets)

  • CSS:表现（美化网页）

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

1.2CSS发展史

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

1.3快速入门

命名规范

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    规范语法:选择器｛声明1；声明2；声明3；｝--><style>h1{color: red;}</style>
</head>
<body><h1>我是1号标题</h1></body>
</html>

单独CSS文件

   /*规范*//*     语法:*//*     选择器｛*//*     声明1；*//*     声明2；*//*     声明3；*//*｝*/h1{color: red;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>我是1号标题</h1></body>
</html>

CSS的优势

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

1.4四种CSS导入方式(就近原则)

行内样式、内嵌样式、链接样式、导入样式

  • 1、行内样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--行内样式:在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: blueviolet">这是行内样式</h1>
</body>
</html>
  • 2、写在html的标签，内部样式表
h1{color: red;
}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css">
</head>
<body><h1>我是1号标题</h1></body>
</html>
  • 3、单独一个style.css文件，外部样式表
   /*规范*//*     语法:*//*     选择器｛*//*     声明1；*//*     声明2；*//*     声明3；*//*｝*/h1{color: red;
}<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css">
</head>
  • 4、导入式(2.1特有的)
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="style.css"><style>@import "style.css";</style>
</head>

2、选择器

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

2.1 、 3个基本选择器(精准度)

id选择器>class选择器>标签选择器

  • 1、标签选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r96Vystv-1588935547357)(C:\Users\13560\AppData\Roaming\Typora\typora-user-images\1588865471431.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*标签选择器会选择到页面上所有的这个标签*/h1{color: blueviolet;background: aqua;border-radius: 24px;}p{font-size: 80px;}</style>
</head>
<body><h1>学JAVA</h1>
<h1>学JAVA_2</h1>
<P>狂神说</P>
</body>
</html>
  • 2、类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YdYSOYrq-1588935547361)(C:\Users\13560\AppData\Roaming\Typora\typora-user-images\1588865417233.png)]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*类选择器的格式*/.first{color: aquamarine;}.second{color: blueviolet;}</style>
</head>
<body><h1 class="first">这是测试类选择器1</h1>
<h1 class="second">这是测试类选择器2</h1>
<h1>这是测试类选择器3</h1></body>
</html>
  • 3、Id选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*#id名称｛｝  id保证全局唯一*/#first{color: red;}#second{color: blueviolet;}</style>
</head>
<body><h1 id="first">这是测试ID选择器1</h1>
<h1 id="second">这是测试ID选择器2</h1>
<h1>这是测试ID选择器3</h1></body>
</html>

2.2、层次选择器

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rp1ipKbp-1588935547364)()]

/*后代选择器*/
body p{color: aqua;
}
  • 2、子选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WteJRgmZ-1588935547368)()]

/*子选择器*/
body >p{color: blueviolet;
}
  • 3、相邻兄弟选择器(向下)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1qAfZx3-1588935547372)()]

/*兄弟选择器*/
.active + p{
background: red;
}<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
  • 4、通用选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CQx5xrSj-1588935547376)()]

/*通用选择器，向下所有兄弟*/
.active~p{
color: blue;
}<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NTlpSsMH-1588935547378)()]

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li><p>p4</p></li><li><p>p5</p></li><li><p>p6</p></li>
</ul>

2.3、结构伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WycoXqER-1588935547380)()]

<!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{color: blue;}/*选中p1:定位到父元素，选择当前的第一个元素*//*选择当前p元素的父级元素，选中父级元素的第一个*/p:nth-child(1){background: blueviolet;}/*选中父元素下的p元素的第二个*/p:nth-of-type(2){background: yellow;}/*ul的第2个子元素*/</style>
</head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>
</body>
</html>

2.4属性选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U43p7LaA-1588935547382)()]

<!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: aquamarine;text-align: center;color: chartreuse;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/*属性名，属性名=属性值（正则）*//*=绝对等于--*//**=包含这个元素--*//*^=以这个开头--*//*$=以这个结尾--*//*存在id属性的元素 a[]{}*//*a[id]{*//*    background: aqua;*//*}*//*id=one的属性*//*a[id = one]{*//*    background: aqua;*//*}*//*class中有links的元素*//*a[class *=links]{*//*    color: red;*//*}*//*选中href中的以http开头的元素*//*a[href ^= http]{*//*    background: yellow;*//*}*//*a[href$=doc]{*//*    background: blueviolet;*//*}*/</style></head>
<body><p class="demo"><a href="http://www.baidu.com" class="links item first" id="one">1</a><a href="http://www.mxlamm.cn" class="links item active" target="_blank">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.png" 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.doc" class="links item ">8</a><a href="abac.doc" class="links item ">9</a><a href="mxlamm.cn" class="links item last">10</a></p></body>
</html>

3、美化网页

3.1为什么要美化网页

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

Span标签，重点突出的字，使用Span套起来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5BPwkgkw-1588935547386)()]

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

3.2字体样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DaZoJms-1588935547388)()]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    font-family  字体-->
<!--    font-size  字体大小--><style>body{font-family: 楷体;}h1{font-size: 50px;}.p1{font-weight: bold;}#last{color: chartreuse;}</style>
</head>
<body>
<h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，总会有一个神秘而恐怖的异常生物重生，它就是魁拔！魁拔的每一次出现，都会给元泱境界带来巨大的灾难！即便是天界的神族，也在劫难逃。在天地两界各种力量的全力打击下，魁拔一次次被消灭，但又总是按333年的周期重新出现。魁拔纪元1664年，天神经过精确测算后，在魁拔苏醒前一刻对其进行毁灭性打击。但谁都没有想到，由于一个差错导致新一代魁拔成功地逃脱了致命一击。很快，天界魁拔司和地界神圣联盟均探测到了魁拔依然生还的迹象。因此，找到魁拔，彻底消灭魁拔，再一次成了各地热血勇士的终极目标。
</p><p id="last">在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼，却把他们生活的村庄搅得鸡犬不宁。村民们绞尽脑汁把他们赶走。一天，消灭魁拔的征兵令突然传到窝窝乡，村长趁机怂恿蛮大人和蛮吉从军参战。然而，在这个一切都凭纹耀说话的世界，仅凭蛮大人现有的一块冒牌纹耀，不要说参军，就连住店的资格都没有。受尽歧视的蛮吉和蛮大人决定，混上那艘即将启程去消灭魁拔的巨型战舰，直接挑战魁拔，用热血换取至高的荣誉。
</p></body>
</html>

3.3 文本样式

  • 1、颜色 color rgb rgba
  • 2、文本对齐方式 text-align=center
  • 3、首行缩进 text-index:2em
  • 4、行高 line-height
  • 5、装饰 text-decoration
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    颜色：单词RGB，0-FRGBA（透明度A:0~1）
--><style>/*h1{*//*    color: red;*//*}*//*h1{*//*    color: rgba(0,255,255,0.2);*//*}*//*文本居中，text-align排版居中*//*h1{*//*    text-align: center;*//*}*//*段落首行缩进*//*.p1{*//*    text-indent: 2em;*//*}*//*行高*//*.p2{*//*    background: #7b62ff;*//*    height: 50px;*//*    !*line-height: 50px;*!*//*}*//*!*下划线*!*//*.l1{*//*    text-decoration: underline;*//*}*//*!*中划线*!*//*.l2{*//*    text-decoration: line-through;*//*}*//*!*上划线*!*//*.l3{*//*    text-decoration: overline;*//*}*/</style>
</head>
<body>
<p class="l1">123123</p>
<p class="l2">123123</p>
<p class="l3">123123</p><h1>故事介绍</h1><p class="p1">平静安详的元泱境界，每隔333年，各地热血勇士的终极目标。。。。
</p><p class="p2" id="last">在偏远的兽国窝窝乡，蛮大人和蛮吉每天为取得象征成功和光荣的妖侠纹耀而刻苦修炼。。。。
</p></body>
</html>

3.4阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-br6odvPJ-1588935547390)()]

<style>
#price{text-shadow: #7FFF00 10px 10px 2px;
}
</style><p id="price">99￥</p>

3.5超链接伪类

正常情况下: a,a:hover

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-boTywftx-1588935547392)()]

    <style>/*默认的颜色*/a{text-decoration: none;color: #000000;}/*鼠标悬停的效果状态*/a:hover{color: aqua;font-size: 50px;}/*鼠标按住未释放状态*/a:active{color: yellow;}/*未访问链接*/a:link{color: blue;}/*已经访问的链接*/a:visited{color: red;}</style>

3.6列表

#nav{width: 280px;background: #a0a0a0;
}
.title{font-size: 18px;font-weight: bold;text-indent: 1em;line-height: 34px;background: red;text-align: center;background: red url("d.png") 200px no-repeat;}
/*ul lilist-style:none 去掉circle 空心圆decimol数字square 正方形
*/
ul{background: #a0a0a0;
}ul li{height: 30px;list-style: none;text-indent: 1em;background-image: url("r.png");background-repeat: no-repeat;background-position: 150px 2px;
}
a{text-decoration: none;font-size: 14px;color: #000000;
}
a:hover{color: orange;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav"><h2 class="title">全部商品分类</h2><ul><li><a href="#">图书</a>&nbsp;<a href="#">音像</a>&nbsp; <a href="#">数字商品</a> </li><li><a href="#">家用电器</a>&nbsp;<a href="#">手机</a>&nbsp; <a href="#">数码</a> </li><li><a href="#">电脑</a>&nbsp;<a href="#">办公</a>&nbsp; <a href="#">数字商品</a> </li><li><a href="#">家居</a>&nbsp;<a href="#">家装</a>&nbsp; <a href="#">厨具</a> </li><li><a href="#">服饰韩帽</a>&nbsp;<a href="#">个人化妆</a>&nbsp; <a href="#">数字商品</a> </li><li><a href="#">礼品箱包</a>&nbsp;<a href="#">钟表</a>&nbsp; <a href="#">珠宝</a> </li><li><a href="#">食品饮料</a>&nbsp;<a href="#">保健食品</a>&nbsp; <a href="#">数字商品</a> </li><li><a href="#">彩票</a>&nbsp;<a href="#">旅行</a>&nbsp; <a href="#">充值</a> </li></ul>
</div>
</body>
</html>

3.7背景

背景颜色

背景图片

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{width: 1000px;height: 700px;border: 1px solid red;background-image: url("uu.jpg");}.div1{background-repeat: repeat-x;}.div2{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>

3.8渐变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4QsFC8WS-1588935547395)()]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body{background-color: #00DBDE;background-image: linear-gradient(135deg, #00DBDE 0%, #FC00FF 100%);}</style>
</head>
<body>
</body>
</html>

4、盒子模型

4.1什么是盒子模型

img

margin:外边距

padding:内边距

border:边框

4.2 边框

  • 1、边框的粗细
  • 2、边框的样式
  • 3、边框的颜色

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmuiQ0YS-1588935547396)()]

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*body总有一个默认外边距*/body{margin: 0;padding: 0;text-decoration: none;}h2{font-size: 16px;background-color: #fffbaf;line-height: 30px;color: #00DBDE;}/*border:粗细，样式，颜色*/#box{width: 300px;border: 1px solid red;}form{background: #FC00FF;}div:nth-of-type(1) input{border: 2px solid aqua;}</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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wKOqYGpo-1588935547399)()]

/*border:粗细，样式，颜色*/
#box{width: 300px;border: 1px solid red;margin:  0 auto;
}

4.3圆角边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--左上 右上 右下 左下圆圈 ： 圆角 = 半径！--><style>div{width: 100px;height: 100px;border: 10px solid red;border-radius: 10px;}</style>
</head>
<body>
<div></div>
</body>
</html>


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

5、浮动

5.1介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0TeQTBih-1588935547401)()]

  • 块级元素

    • 独占一行
    • h1-h6 p div 列表…

  • 行内元素

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

    • 不独占一行

    • span a img strong…

5.2、display

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ar1KVtOt-1588935547414)()]

5.3、float

35547401)]

  • 块级元素

    • 独占一行
    • h1-h6 p div 列表…

  • 行内元素

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

    • 不独占一行

    • span a img strong…

5.4父级元素坍塌

clear

clear:right;右侧不允许浮动元素
clear:left;左侧不允许浮动元素
clear:both;两侧不允许浮动元素
clear：none;
  • 1、增加父级元素的高度~
#father {border: 1px #000 solid;height: 800px;
}
  • 2、增加一个空的div标签，清除浮动
<div class='clear'></div>.class{clear: both;margin: 0;padding;
}
  • 3、overflow
在父类元素种增加一个 overflow:hidden;
  • 4、父类添加伪类:after

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BI0ZQGsM-1589001438378)()]

#father:after{content:'';displap:block;clear:both;
}

小结：1、浮动元素后面增加空div，简单，代码中尽量避免空div

​ 2、设置父元素的高度，简单，元素假设没有了固定高度，就会被限制

​ 3、overflow,简单，下拉的一写场景避免使用

​ 4、父类添加一个伪类:after,写法稍微复杂，但是没副作用，推荐使用

5.5display与float

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

6、定位

6.1相对定位

  • position:relative
  • 相对于原来的位置，进行偏移,相对定位的话，仍然在标准文档流中，原来位置被保留
            position: relative;bottom: 20px;right: 20px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlcK0MLH-1589001438385)(C:\Users\13560\AppData\Roaming\Typora\typora-user-images\1588951227913.png)]

<!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;}#first{background-color: #649;border: 1px solid #649;position: relative;top: -20px;left: 20px;}#secondly{background-color: #886a12;border: 1px solid #886a12;position: relative;bottom: 20px;right: 20px;}#third{background-color: #99c944;border: 1px solid #99c944;position: relative;}</style>
</head>
<body>
<div id="father"><div id="first">第一个盒子</div><div id="secondly">第二个盒子</div><div id="third">第三个盒子</div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UmWJPjgT-1589001438387)()]

<!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: #FC00FF;line-height: 100;text-align: center;color: #000000;display: block;}a:hover{background: blue;}.a2,.a4{position: relative;left: 200px;top: -100px;}.a5{position: relative;left: 100px;top: -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>

6.2绝对定位

  • 1、没有父级元素定位前提下，相对于浏览器定位
  • 2、假设父级元素存在定位，我们通常相对于父级元素进行偏移
  • 3、在父级元素范围内移动
  • 4、相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不存在标准文档流中，原来的位置不会被保留

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OY8Pscd6-1589001438390)()]

        #secondly{background-color: #886a12;border: 1px solid #886a12;position: absolute;}

6.3固定定位(返回顶部)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s8Thu873-1589001438392)()]

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

6.4层级，z-index

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eiY61hfL-1589001438397)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EpQMmwnC-1589001438400)()]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-htxNOfY1-1589001438402)()]

7、动画


http://chatgpt.dhexx.cn/article/oObdBSO9.shtml

相关文章

css入门学习

css入门学习

CSS入门 前言一、CSS是什么&#xff1f;二、CSS使用&#xff08;一&#xff09;CSS基本语法&#xff08;二&#xff09;CSS选择器&#xff08;三&#xff09;三种生效方式1.外部样式表2.内部样式表3.内联样式表 &#xff08;四&#xff09;CSS颜色&#xff08;五&#xff09;盒…
阅读更多...
CSS入门 超详细

CSS入门 超详细

文章目录 CSS一基础认知1.1&#xff1a;css的介绍1.2css语法规则1.3css初体验2.1&#xff1a;css引入方式 二&#xff1a;基础选择器1.1&#xff1a;选择器的作用1&#xff1a;标签选择器2&#xff1a;类选择器3&#xff1a;id选择器补充&#xff0c;类和id的区别4&#xff1a;…
阅读更多...
同步时序逻辑电路分析——数电第六章学习

同步时序逻辑电路分析——数电第六章学习

同步时序逻辑电路分析 概述同步时序分析工具状态转换表例子 状态转换图时序图 同步时钟分析完整流程例1例2 概述 在之前所讨论的组合逻辑电路中&#xff0c;任一时刻的输出信号仅取决于当时的输入信号。但在时序逻辑电路中&#xff0c;电路状态还取决于电路原来状态。 比如串行…
阅读更多...
数字电子技术之时序逻辑电路

数字电子技术之时序逻辑电路

时序逻辑电路是比较重要的内容,里面的知识点在很多地方都会应用到,比如强化学习领域经常要用到下一个状态对当前状态产生的影响,所以这块"硬骨头"一定要啃下来 分析与设计计数器计数器的应用寄存器移位寄存器的应用 1. 分析与设计 同步时序逻辑电路的分析方法 时…
阅读更多...
数电基础：时序逻辑电路的时序分析

数电基础：时序逻辑电路的时序分析

目录 1.组合逻辑延迟 2.时钟输出延迟Tco 3.同步系统中时钟频率 3.1 建立时间与保持时间都满足 3.2 建立/保持时间不满足 &#xff08;1&#xff09; Tcomb太大导致建立时间不满足 &#xff08;2&#xff09; 器件的固有保持时间增大&#xff08;老化&#xff09;使得保持…
阅读更多...
数电学习（六、时序逻辑电路）（二）

数电学习（六、时序逻辑电路）（二）

文章目录 若干常用的时序逻辑电路寄存器移位寄存器 计数器同步计数器同步二进制计数器同步二进制加法计数器经典设计 74161 同步二进制减法计数器同步二进制加减计数器 同步十进制计数器 异步计数器二进制计数器二进制加法计数器二进制减法计数器 任意进制计数器的构成方法当N&…
阅读更多...
数字电路 第六章 时序逻辑电路

数字电路 第六章 时序逻辑电路

时序逻辑电路 特点&#xff1a; 任意时刻的输出不仅与该时刻输入变量的取值有关&#xff0c;而且与电路的原状态&#xff0c;即过去的状态有关。 时序逻辑电路&#xff1a; 包含组合电路和存储电路&#xff0c;存储电路具有记忆功能&#xff0c;通常由触发器构成 存储电路的输…
阅读更多...
时序逻辑电路设计与仿真

时序逻辑电路设计与仿真

一、实验目的 1、掌握时序逻辑电路的设计方法&#xff1b; 2、掌握基于 QuartusII 集成开发环境的时序逻辑电路设计流程&#xff1b; 3、熟练掌握VerilogHDL语言&#xff1b; 4、熟练掌握 DE2-115 开发板的使用方法&#xff1b; 二、实验任务及要求 1.任务一&#xff1a;…
阅读更多...
同步时序逻辑电路的设计

同步时序逻辑电路的设计

同步时序逻辑电路的设计&#xff0c;就是根据逻辑问题的具体要求&#xff0c;结合同步时序逻辑电路的特点&#xff0c;设计出能够实现该逻辑功能的最简同步时序电路。 同步时序逻辑电路中含有组合逻辑电路部分和存储电路部分&#xff0c;组合电路的设计在之前已作介绍.本节主要…
阅读更多...
时序逻辑电路总结【一】触发器

时序逻辑电路总结【一】触发器

触发器&#xff08;Flip-Flop&#xff09;是一种具有记忆功能&#xff0c;可以存储二进制信息的双稳态电路&#xff0c;它是组成时序逻辑电路的基本单元&#xff0c;也是最基本的时序电路。 一 输出反馈电路 分析以下三种输出反馈电路   如图5.1&#xff08;a&#xff09;所…
阅读更多...
时序逻辑电路的状态转移图

时序逻辑电路的状态转移图

步骤大致如下&#xff1a;1.根据逻辑电路图列出状态、驱动、输出方程 2.列出状态转移表 3.根据状态转移表画出状态转移图 以以下逻辑电路图为例&#xff1a; 注意&#xff1a;状态转移图的由来以00到01为例&#xff0c;00表示Q20&#xff0c;Q10&#xff08;注意状态转移图中…
阅读更多...
数字电路 时序逻辑电路

数字电路 时序逻辑电路

第六章 时序逻辑电路 文章目录 第六章 时序逻辑电路6.1 概述6.1.1 时序逻辑电路的特点6.1.2 时序电路的一般结构形式与功能描述方法6.1.3 时序电路的分类 6.2 时序电路的分析方法6.2.1 同步时序电路的分析方法6.2.2 时序电路的状态转换表、状态转换图和时序图 6.3 若干常用的时…
阅读更多...
组合逻辑电路 时序逻辑电路

组合逻辑电路 时序逻辑电路

文章目录 组合逻辑电路多路选择器译码器编码器比较器数据扩展器 时序逻辑电路锁存器SR锁存器En锁存器D锁存器触发器 组合逻辑电路 特点&#xff1a;是任意时刻的输出仅仅取决于当前时刻的输入&#xff0c;与电路之前的历史状态无关&#xff08;即无记忆能力&#xff09; 组合…
阅读更多...
【数电】常用时序逻辑电路模块总结

【数电】常用时序逻辑电路模块总结

文章目录 同步置零和异步置零同步预置数和异步预置数一. 移位寄存器I. D触发器构成的4位移位寄存器II. 双向移位寄存器 74HC194 二. 计数器I. 同步计数器i. 同步二进制计数器1. 同步二进制加法计数器 741612. 同步二进制减法计数器3. 同步加/减计数器 74LS191 74LS193 ii. 同步…
阅读更多...
【时序逻辑电路】——寄存器

【时序逻辑电路】——寄存器

&#x1f3a8;&#x1f3a8;欢迎大家来学习数字电路——时序逻辑电路。 &#x1f3a8;&#x1f3a8;在这里我们会讲解数码寄存器、移位寄存器、单向移位寄存器和集成双向移位寄存器74LS194&#xff0c;希望通过我们的学习会让你更明白数字电路中的奥秘。 目录 &#x1f3a8;一…
阅读更多...
数字电路（5）时序逻辑电路（一）

数字电路（5）时序逻辑电路（一）

文章目录 一、时序逻辑电路概述 二、时序逻辑电路分析方法 三、状态转换表、状态转换图、状态机流程图和时序图 一、时序逻辑电路概述 1、 定义&#xff1a;任意时刻的输出信号不仅取决于当时的输入信号电路原来的状态。 2、2个特点&#xff1a;时序电路通常包括组合电路…
阅读更多...
时序逻辑电路一——数字逻辑实验

时序逻辑电路一——数字逻辑实验

0 &#x1f37a;实验目的 &#xff08;1&#xff09;熟悉触发器的逻辑功能及特性。 &#xff08;2&#xff09;掌握集成D和JK触发器的应用。 &#xff08;3&#xff09;掌握时序逻辑电路的分析和设计方法。 1 &#x1f37a;实验仪器及材料 2 &#x1f37a;实验内容及步骤 用D触…
阅读更多...
数电学习（六、时序逻辑电路）（三）

数电学习（六、时序逻辑电路）（三）

文章目录 时序逻辑电路的设计方法同步时序逻辑电路的设计方法一般步骤改进步骤 例&#xff1a;蚂蚁走迷宫背景分析继续编码状态&#xff0c;然后写出状态图&#xff0c;然后卡诺图化简&#xff0c;得到方程设计总结 时序逻辑电路的设计方法 同步时序逻辑电路的设计方法 一般步…
阅读更多...
时序逻辑电路的设计与分析

时序逻辑电路的设计与分析

目录 1.时序逻辑电路的基本结构与分类 1.1时序电路的基本结构 1.2异步与同步时序电路 1.3米利型和穆尔型时序电路 2.时序逻辑电路功能的表达 2.1逻辑方程组 2.2转换表 2.3状态表 2.4状态图 2.5时序图 3.同步时序电路的分析 3.1分析同步时序逻辑电路的一般步骤 3.2同…
阅读更多...
【时序逻辑电路】——计数器

【时序逻辑电路】——计数器

&#x1f984;&#x1f984;欢迎大家来学习数字电路——时序逻辑电路。 &#x1f984;&#x1f984;在这里我们会讲解二进制计数器、十进制计数器和集成计数器74LS161&#xff0c;希望通过我们的学习会让你更明白数字电路中的奥秘。 目录 &#x1f511;一、计数器 &#x1f…
阅读更多...
推荐文章

Copyright @ 2022~2023