CSS基础入门（详细总结笔记）

article/2025/11/10 18:16:20

目录

1、CSS介绍

2、CSS引入方式

2.1、行内样式

2.2、内联样式

2.3、外联样式

2.4、样式的优先级

2.5、样式选择

3、CSS选择器

3.1、基本选择器

3.2、属性选择器

3.3、层级选择器

3.4、组合选择器

3.5、伪类选择器

3.6、通配符

3.7、选择器优先级

4、CSS盒子模型

4.1、基础样式

4.2、盒子模型

4.2.1、边框颜色

4.2.2、边框粗细

4.2.3、边框样式

4.2.4、边框的简写

4.2.5、外边设置

4.2.6、内边设置

4.2.7、背景

4.2.8、display属性

4.3、浮动

4.3.1、清除浮动

4.3.2、解决浮动塌陷问题

4.4、定位

4.4.1、相对、 绝对定位

4.4.2、固定定位

4.4.3、堆叠顺序

5、CSS3常见效果

5.1、圆角效果

5.2、透明效果

5.2.1、背景透明

5.2.2、整体透明

5.3、盒子阴影

5.3.1、文本阴影

5.4、响应式效果

5.4.1、手机屏幕的适应

5.4.2、页面自适应

1、CSS介绍

层叠样式表其实就是对静态页面进行装饰，但是，特别要注意的点是：通常建议表现形式与页面内容分离（例如：人就是内容，穿着打扮就是表现形式）。

2、CSS引入方式

2.1、行内样式

行内样式（将样式直接写在标签上），需要使用style属性。

<!-- 行内样式 -->
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>
<div style="color: green; border: 1px solid red;">每天叫醒我的不是闹钟，是梦想！！！</div>

该方式可用于提高样式的优先级，多次使用会导致代码臃肿，不利于后期维护 。 

2.2、内联样式

讲页面内容与表现形式进行分离，方便对样式进行统一管理。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!--使用style标签写在head标签内--><style>/*元素选择器*/div {color: red;font-size: 18px;}p{color: pink;font-size: 20px;}</style></head><body><div>每天叫醒我的不是闹钟，是梦想！！！</div><div>每天叫醒我的不是闹钟，是梦想！！！</div><div>每天叫醒我的不是闹钟，是梦想！！！</div><p>钢铁侠</p><p>蝙蝠侠</p><p>蜘蛛侠</p></body>
</html>

2.3、外联样式

对内联样式进行进一步的抽离，方便多个页面共用同一个样式，创建一个css文件，需要该样式的HTML直接引用样式即可。在项目下创建css包，创建css文件

外联样式引入方式有两种：

link引入

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

@import引入

<style>@import url(css/asd.css);
</style>

asd.css 

div {color: antiquewhite;
}
p{color: blue;
}

html文件 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- link引入 --><!-- <link rel="stylesheet" href="css/asd.css"> --><!-- @import引入 --><style>@import url(css/asd.css);</style></head><body><div>每天叫醒我的不是闹钟，是梦想！！！</div><div>每天叫醒我的不是闹钟，是梦想！！！</div><div>每天叫醒我的不是闹钟，是梦想！！！</div><p>钢铁侠</p><p>蝙蝠侠</p><p>蜘蛛侠</p></body>
</html>

2.4、样式的优先级

就近原则： 行内样式 > 内联样式 == 外联样式 (后面覆盖前面) 。
注意事项： 今后尽量不要对同个html进行多个样式书写。
如何选择三种样式写法？
1、如果样式是固定并且不修改并且很少情况，行内样式。
2、如果样式针对当前html页面做的样式，并且量比较大的情况下， 内联样式。
3、如果你的样式是通用，如果你的css代码很多，外联样式，需要创建一个css文件，引入。

2.5、样式选择

三种样式引入方式，在实际开发过程中该如何选择？

1.如果是通用样式，就选择外联样式。

2.当样式内容过多时，也会将样式单独抽离成一个.css文件，方便管理。

3.当某个标签有特殊样式实现，且在页面中是不重复的，出现次数唯一的，就使用行内样式。

4.除了上面的几种情况，通常使用的都是内联样式。

3、CSS选择器

3.1、基本选择器

选择器可以快速、方便的选择所需要使用的页面元素。

基本选择器分三种：标签选择器、类选择器、id选择器。

标签选择器

语法：标签名{}

例如：div{color:red;font-size:20px;}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 标签选择器 */div{color: bisque;}/* 类选择器 */.div-cls{color: aqua;}.p-cls{color: yellow;}/* id选择器 */#p-id{color: green;}</style></head><body><div class="div-cls">我是div1，我用的是class选择器</div><div class="p-cls" id="p-id">我是div2，我用的是class选择器和id选择器</div><div class="div-cls">我是div3，我用的是class选择器</div><p class="p-cls">我是p，我用的是class选择器</p><h4 class="h4-cls">我是h4，我用的是class选择器</h4></body>
</html>

类选择器

类选择器是通过class属性进行元素的获取，可用于对多个元素进行相同的样式设置。

语法：.类名{}

例如：.div-cls{color:red;}

.div-cls{color: red;
}
.p-cls{color: green;
}
.h4-cls{color: blue;
}

id选择器

id选择器是通过id属性给元素一个唯一标识（设置多个id相同不会报错，会影响后期js的学习，建议id值要唯一）。

语法：#id名{}

例如：#div-id{color:red;}

/*id选择器：在标签上添加了一个id属性，作为唯一标识，通常不允许重复*/
#p-id{color: #483D8B;
}

3.2、属性选择器

属性选择器是根据元素上已有的属性标识进行选择

语法：[属性名='']{}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 具有title属性的元素 */[title]{font-size: 18px;color: red;}/* 以http开头的元素 */[href^="http"]{color: #008B8B;}/* 以...结束 */[href$="cn"]{color: #483D8B;}/*href中包含有i*/[href*='i']{color: #808080;}</style></head><body><button title="普通按钮">普通按钮</button><a href="http://www.baidu.com">百度链接</a><a href="www.sina.cn">新浪博客</a><a href="http://www.yunhe.cn">云和数据</a></body>
</html>

3.3、层级选择器

后代选择器是根据元素在页面中的相对（嵌套）位置进行按区域选择元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>/* 祖宗后代 */div span{font-size: 18px;color:red;}/* 父子选择器 */div p{color: blue;}/* 兄弟选择器 */div~p{color: pink;}/* 跟班选择器 */p+span{background-color: deeppink;}</style><body><div><p>嘻嘻嘻</p><a href="#"><span>点我点我！</span></a></div><p>我是div的兄弟</p><p><span>我是p标签中的span标签</span></p><span>跟班选择器</span></body>
</html>

3.4、组合选择器

组合选择器是根据元素在页面中的同级关系进行选择。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div span,p span {color: green;}p span,h4 span{color: yellow;}</style></head><body><div>div中的不带标签的内容<span>组合选择器，注意很常用</span></div><p><span>p标签中的span标签</span></p><h4><span>h4标签中的span标签</span></h4></body>
</html>

3.5、伪类选择器

伪类选择器是css3中提供的用于快速查找元素的便捷选择器，开发中常用nth-of-type选择器。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>//第一个p:nth-of-type(1) {color: red;}//奇数项p span:nth-of-type(2n+1) {background-color: aqua;}//偶数项p span:nth-of-type(2n) {background-color: blue;}/* 默认被点击的状态 */a:link {color: red;}/* 访问之后的状态 */a:visited {color: yellow;}/* 处在活动状态 */a:active {color: brown;}/* 鼠标悬浮状态 */a:hover {color: blueviolet;}</style></head><body><p><span>百度新闻</span><span>新浪官网</span><span>云和官网</span><span>腾讯官网</span><span>人人编程官网</span></p><a href="#">百度一下</a></body>
</html>

3.6、通配符

*通配符，作用在页面中的所有标签上，开发不建议使用，影响网页的渲染性能。

*{color:red;font-size:20px;
}

开发不建议使用通配符，通配符相当于是作用在了所有的标签上，某些属性并不是所有的标签都能识别，只要加了属性不论是否生效，浏览器都会对属性进行解析然后渲染，这样比较消耗性能  

3.7、选择器优先级

网页中的选择器多种多样，可以组合使用，当同一个元素有多个样式时，最终生效的样式与优先级有关。

可以假设行内样式的优先级为1000，那么id选择器、类选择器、标签选择器的优先级大小如下所示

!important>行内样式>id选择器>类选择器>标签选择器

  无穷大       1000          100          10                1

4、CSS盒子模型

4.1、基础样式

样式名描述
text-align设置内容位置
text-decoration控制下划线 none没有 underline有
line-hight行高
font-size设置字体大小
font-weight设置字体粗细的
font-famliy设置字体样式
letter-spacing设置中文字体之间的间距
word-spacing设置英文单词之间的间距

行高：设置单行文字所占据的高度，实际位置是文字的大小+上下的空白间距  

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 400px;height: 400px;background-color: pink;color: aquamarine;text-align: center;line-height: 100px;font-size: 18px;font-weight: bold;font-family: '宋体';letter-spacing: 20px;}#p1{word-spacing: 60px;}#p2{letter-spacing: 20px;}</style></head><body><div>轻轻的我走了，正如你轻轻来了<br>轻轻的我走了，正如你轻轻来了<br></div><p id="p1">hello world java</p><p id="p2">我爱你中国</p></body>
</html>

4.2、盒子模型

页面中的每个元素都可以称为盒子，主要目的是为了计算元素在网页中的实际占位，通过F12可以直观的查看到盒子模型。

4.2.1、边框颜色

border-color

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#box {width: 400px;height: 400px;border: 1px solid red;background-color: antiquewhite;/*上下 左右*/border-color: red blue;/*red上 blue左右  blueviolet下*/border-color: red blue blueviolet;/*上右下左*//* border-color: red blue pink lawngreen; *//*border-top-color: yellow;border-left-color: orange;border-bottom-color: green;border-right-color: red;*/}</style></head><body><div id="box">我是盒子！</div></body>
</html>

4.2.2、边框粗细

整体粗细：

border-width:20px;  整体边框

指定方位调整粗细：

border-top-width      上 

border-left-width      左

border-right-width    右

border-bottom-width   下

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 300px;height: 300px;background-color: aqua;/* border: solid;border-width:20px;border-color: red; */border:solid;border-color: pink;border-top-width: 10px;border-left-width: 20px;border-right-width: 30px;border-bottom-width: 40px;}</style></head><body><div class="box">hello  world！</div></body>
</html>

4.2.3、边框样式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.box{width: 300px;height: 300px;background-color: #D7D7D7;border-left-style:solid;//边框样式为实线border-top-style: dashed;/*边框样式为虚线*/border-bottom-style: double;/*边框样式为双线*/border-bottom-style: solid;/*边框样式为实线*/}</style></head><body><div class="box">hello  world！</div></body>
</html>

4.2.4、边框的简写

	<head><style>.box{width: 251px;height: 251px;background-color: #D7D7D7;border:1px solid #3a6587}</style></head><body><div class="box">hello world</div></body>

4.2.5、外边设置

margin可以设置块元素的水平对齐方式

div{margin:0 auto;//让块元素在水平方向居中
}
<style>*{margin: 0px;}.box{width: 251px;height: 251px;background-color: #D7D7D7;border:1px solid #3a6587;margin-top: 30px;margin-left:60px ;/*margin: 0px auto;居中*/}#h2id{margin-top: 20px;margin-left: 500px;}</style></head><body><h2 id="h2id">学生列表</h2><div class="box">你好！同学</div></body>

4.2.6、内边设置

padding-left调用文本与左边间距

padding-top调用文本与上边间距

padding-bottom调用文本与底部间距

padding-right调用文本与右边间距

.input{font-size:16px;background-color:#3a6587;height:35px;line-height:35px;color:#FFF;padding-left: 110px; padding-top:10px ;   /* 让标题左边留点空隙*/
}

4.2.7、背景

属性名说明
background-color设置背景颜色
background-image设置背景图片
background-position设置背景图片的位置
background-size设置背景图片的大小
background-repeat设置背景图片是否重复
background-attachment设置背景图片相对浏览器的定位位置
div{width: 1000px;height: 1000px;/* background-color: #008B8B;background-image: url(./timg.jpg);background-size: 50px 50px;background-repeat: no-repeat;background-position: center;background-attachment: fixed; */background: #008B8B url(./timg.jpg) no-repeat;
}

4.2.8、display属性

属性名描述
display:none;隐藏元素
display:block;将元素变为块元素
display:inline;将元素变为行元素
display:inline-block;将元素变为行内块元素
<style>img{width: 200px;}ul li{display: inline-block;  /*转为行内块元素*/list-style: none;       /*消除列表前面的小圆圈*/margin-left: 120px;}ul li:hover img{border: 2px solid yellow;}</style>

4.3、浮动

浮动是改变元素在文档流（元素默认从上往下布局的方式就叫文档流）中的规则，让元素可以在水平方向上进行排版。

float:left或者right

4.3.1、清除浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.wrapper{width: 260px;height: 260px;background-color: pink;}.content{float: left;/* 会按照从左向右浮动  */border: 1px solid #ccc;width: 50px;height: 50px;background-color: wheat;}#id8,#id9{/*清除浮动，因为content浮动后面的div都会根着浮动，清楚 id8,id9不能左浮动（标准的从上往下显示）*/clear: left;}</style></head><body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div id="id8" class="content">8</div><div id="id9" class="content">9</div></div></body>
</html>

4.3.2、解决浮动塌陷问题

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#box1{width: 400px;background-color: aquamarine;/* 方案一  设置固定高度*//* height: 400px; *//* 方案二  使用overflow属性 *//* overflow: hidden; */}#box2{float: left;background-color: pink;}.divclass{/* 方案三 在浮动的下面清除浮动 */clear: both;}</style></head><body><div id="box1"><div>我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云我是天空的一片云，偶尔投影在你的波心， 不必讶异，我是天空的一片云</div><div id="box2"   style="width: 200px;height: 200px;"></div><div class="divclass"></div></div></body>
</html>

4.4、定位

浮动更多的用于对模块化（无具体像素值要求）区域进行整体排版，对于精确到像素值的页面调整需要使用定位，例如：购物车上的数量、消息通知等。

属性名描述
position:relative;相对定位（相对默认位置进行定位，不脱离文档流，仍占据页面位置）
position:absolute;绝对定位（相对第一个带有定位属性的父元素进行定位，默认是浏览器）
position:fixed;相对浏览器进行固定定位

4.4.1、相对、 绝对定位

<head><meta charset="UTF-8"><title></title><style>*{margin: 0px;padding: 0px;}.box1{width: 100px;height: 100px;background-color: black;opacity: 0.5; /*透明度*//*绝对定位 不会保留原来的位*/position: absolute;left: 150px;top: 150px;
/*绝对定位：会脱离原来的层，box1这一层被腾空了，别的层就可以上去了，只是不同的层而已，每个absolute都是一层，可以自由动*//*相对定位 会保留原来的位置*//*position: relative;left: 150px;top: 150px;*/}.box2{width: 200px;height: 200px;background-color: red;}</style></head><body><div class="box1"></div><div class="box2"></div></body>

4.4.2、固定定位

	<head><meta charset="UTF-8"><title></title><style>.divid{width: 150px;height: 30px;background-color: #ff4200;border-radius:32px ;text-align: center;line-height: 31px;color: white;position: fixed;/* 固定定位*/top: 220px;right: 10px;}</style></head><body><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><div class="divid">固定定位</div><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p><p>内容内容内容内容内容内容</p>

4.4.3、堆叠顺序

元素在进行定位时，会出现位置相同的情况，可以通过设置其堆叠顺序决定显示的优先级。        

z-index 数值越大越靠前

	<style>img{position: absolute;left: 0px;top: 0px;z-index: -1;  /* 图片就在文字下方*/}p{color: #E91917;}</style></head><body><img src="xxx.jpg" width="200px" /><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P><P>This is some text. This is some text. This is some text.</P></body>

5、CSS3常见效果

5.1、圆角效果

控制盒子的四个角的弧度，语法：border-radius，控制的是元素的四个角的弧度，当弧度值大于或等于元素宽高的一半时，元素会变成一个圆。border-radius的值可以是百分比或者px像素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#big{position: relative;margin: 200px auto;width: 300px;height: 300px;background-color: black;border-radius: 50%;}#min{position: absolute;width: 250px;height: 250px;margin: 25px;background-color: white;border-radius: 50%;}</style></head><body><div id="big"><div id="min"></div></div></body>
</html>

5.2、透明效果

5.2.1、背景透明

背景透明只针对背景颜色进行透明。background-color:rgba(x,x,x,x) 透明度在0~1之间

<style>div{width: 200px;height: 200px;background-color:rgba(255,0,0,0.5); /*红色*/background-color:rgba(0,255,0,0.5); /*绿色*/background-color:rgba(0,0,255,0.5); /*蓝色*/background-color: rgba(255, 255, 255, 0); /*则表示完全透明的白色*/background-color: rgba(0, 0, 0, 1); /*则表示完全不透明度的黑色*/}</style></head><body><div></div></body>

5.2.2、整体透明

针对整个元素进行透明，包括该元素的所有子元素。opacity 透明度在0~1之间

<style>div{width:100px;height:35px;background-color: #FF0000;color: white;line-height: 35px;text-align: center;border-radius: 10px;opacity: 0.2;}
</style><body><div>百度一下</div>
</body>

5.3、盒子阴影

box-shadow

对块元素添加阴影效果从而达到视觉效果上的立体感。

		<style>div{width: 200px;height: 200px;margin: 50px auto;box-shadow: 3px 3px 9px 100px gray ;/*  参数一 X轴偏移量 参数二 Y轴偏移量 参数三 阴影模糊程度 参数四 阴影扩展半径参数五 阴影颜色 参数六 inset内阴影 */}</style><body><div></div></body>

5.3.1、文本阴影

text-shadow

对文本添加阴影从而达到视觉效果上的立体感。

	<style>p{text-align: center;text-shadow: 3px 3px 9px grey;}</style><body><p>轻轻的我走了，正好我轻轻的来了</p></body>

5.4、响应式效果

早期页面的开发，需要有前端人员、Android工程师和IOS工程师，因为PC端和移动端的屏幕大小差别比较大，需要针对PC端和移动端分别开发整套项目；从H5出现之后，前端人员在开发PC端可以通过技术将PC端的页面在IPAD和移动端上都进行自适应，因此前端就变得更加重要了。 自适应方式两种：响应式、弹性盒子；目前基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作。

5.4.1、手机屏幕的适应

H5的出现可以让PC端的应用直接在手机端进行等比例使用，需要设置其视图模式。

<meta name="viewport" content="width=device-width, initial-scale=1">

5.4.2、页面自适应

对网页中的元素的大小，根据电脑屏幕的大小进行动态设置，从而达到一种响应式的效果。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- width = device-width：宽度等于当前设备的宽度initial-sacle=1：初始的缩放比例为1(默认是1) --><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style>/* 设置初始样式 */*{margin: 0px;padding: 0px;}.heading,.container,.footing{margin: 10px auto;}.heading{height: 100px;background-color: cadetblue;}.left,.right,.main{background-color: green;}.footing{height: 100px;background-color: orange;}/* 设置宽度大于960px的页面布局 */@media screen  and (min-width: 960px){.heading,.container,.footing{width:960px;}.left,.main,.right{float: left;height: 500px;}.left,.right{width: 200px;}.main{margin-left: 5px;margin-right: 5px;width: 550px;}.container{height: 500px;}}/* 设置处于600px-900px之间的页面布局 */@media screen and (min-width: 600px) and (max-width:960px){.heading,.container,.footing{width: 600px;}.left,.main{float: left;height: 400px;}.right{display: none;}.left{width: 160px;}.main{width: 435px;margin-left: 5px;}.container{height: 400px;}}/* 设置小于600px的页面布局 */@media screen and (max-width: 600px) {.heading,.container.footing{width: 400px;}.left,.right{width: 400px;height: 100px;}.main{margin-top: 10px;width: 400px;height: 200px;}.right{margin-top: 10px;}.container{height: 400px;}</style></style></head><body><div class="heading"></div><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div><div class="footing"></div></body>
</html>


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

相关文章

CSS入门。（仅供参考）

CSS入门。（仅供参考）

文档出处部分Coogle和《原创》&#xff0c;如有雷同纯属巧合 《仅供参考》 首先说明以下内容是本人自己整理&#xff08;仅供参考&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff09; 首先浏览器我建议使用Googl…
阅读更多...
零基础CSS入门教程(17)–表格样式

零基础CSS入门教程(17)–表格样式

点此查看 所有教程、项目、源码导航 本文目录 1. 题外话2. 前言3. HTML表格边框4. CSS设定表格边框5. 设定列边框6. 折叠边框7. 表格尺寸8. 表格内边距9. 表格背景色10. 小结 1. 题外话 不知不觉&#xff0c;写到第40篇了。 可能已经是我写过的最长的系列文章了&#xff0c;虽…
阅读更多...
一套完整的CSS入门教程

一套完整的CSS入门教程

最近花了点时间&#xff0c;整理了一下之前的CSS博客文章&#xff0c;完成了这个CSS教程。也为我的个人网站&#xff0c;增加了一个教程模块。教程模块地址&#xff1a;请点击这里。教程地址&#xff1a;请点击这里。 该教程是一套完整的CSS入门教程&#xff0c;看了绝对不会…
阅读更多...
CSS入门基础详解——笔记、案例

CSS入门基础详解——笔记、案例

CSS入门学习 一、CSS简介 1、什么是css css:层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML&#xff08;标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。 2、CSS的作…
阅读更多...
CSS入门 练习

CSS入门 练习

CSS入门 练习 CSS练习1 -- 画三角形CSS练习2 -- 画太极 CSS练习1 – 画三角形 代码&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>无标题文档</title> <style type"text/css"> #…
阅读更多...
头歌-CSS入门

头歌-CSS入门

目录 CSS从入门到精通-文本与字体样式 第1关 字体颜色、类型与大小 第2关 字体粗细与风格 第3关 文本装饰与文本布局 CSS从入门到精通-背景样式 第1关 背景颜色 第2关 背景图片 第3关 背景定位与背景关联 CSS从入门到精通-基础选择器 第1关 CSS 元素选择器 第2关 CSS…
阅读更多...
CSS入门到精通——表格样式

CSS入门到精通——表格样式

第1关&#xff1a;表格边框 任务描述 本关任务&#xff1a;在本关中&#xff0c;我们将学习如何使用CSS设置表格样式&#xff0c;使表格更好看。本关任务完成之后的效果图(index.html)如下&#xff1a; 相关知识 为了完成本关任务&#xff0c;请大家认真阅读以下内容。 在之…
阅读更多...
Tailwind CSS 入门和实践

Tailwind CSS 入门和实践

作者&#xff1a;康曾璐 背景 Tailwind 是一个基于 Atomic/Utility-First 规范 CSS 框架&#xff0c;提供了基础的工具类 utility classes&#xff08;如&#xff1a;内边距 padding、字体 text 和 font、动画 transition 等预设类&#xff09;&#xff0c;能直接在脚本标记语…
阅读更多...
CSS入门

CSS入门

CSS入门学习 一、CSS简介 1、什么是CSS CSS&#xff1a;Cascading Style Sheet 层叠样式表 是一组样式设置的规则&#xff0c;用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离&#xff0c;便于团队开发 样式复用&#xff0c;便于网站的后期维护 页面的精确控…
阅读更多...
TailWindCSS入门

TailWindCSS入门

上一篇文章我们说过了如何搭建项目以及引入TailWindCSS&#xff0c;这篇文章我们说一下如何使用它&#xff0c;刚看到的时候我对这些缩写感觉很迷茫呀&#xff0c;官网我也没找到如何能知道具体对应的都是撒意思&#xff0c;后面找到一片天比较详细的介绍的文章&#xff0c;认真…
阅读更多...
《CSS基础入门篇》

《CSS基础入门篇》

一、CSS概念 CSS&#xff1a;是Cascading Style Sheets的英文缩写&#xff0c;CSS通常称为CSS样式表或层叠样式表&#xff08;级联样式表&#xff09;&#xff0c;主要用于设置HTML页面中的文本内容&#xff08;如文字的字体、大小、对齐方式等&#xff09;、图片的外形&#…
阅读更多...
CSS入门教程

CSS入门教程

文章目录 一、 前端二、CSS2.1 css概念2.2 CSS样式引入方式2.2.1 外部样式2.2.2 内部样式2.2.3 行内样式 2.3 基础选择器2.3.1 元素选择器2.3.2 类选择器2.3.3 id选择器2.3.4 通配符选择器2.3.5 后代选择器2.3.6 群组选择器 2.4 字体样式2.4.1 字体类型2.4.2 字体大小2.4.3 字体…
阅读更多...
CSS入门（全）

CSS入门（全）

本文学习链接由此处 1、什么是CSS 如何学习 1、CSS是什么 2、CSS怎么用 3、CSS选择器 4、美化网页&#xff08;文字、阴影、超链接、渐变…&#xff09; 5、盒子模型 6、浮动 7、定位 8、网页动画&#xff08;特效效果&#xff09; 1.1什么是CSS CSS 指层叠样式表 (C…
阅读更多...
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;通常由触发器构成 存储电路的输…
阅读更多...
推荐文章

Copyright @ 2022~2023