CSS超详细知识点总结2

10.0 层次选择器对比

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素,且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素,且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素,且位于E元素后的所有F元素

10.1 后代选择器案例

<title>后代选择器</title><style>.cuxiao li {list-style: none;}.cuxiao p {color: red;}.div1 {border: 1px solid red;width: 300px;height: 300px;}.div2{border: 1px solid red;width: 200px;height: 200px;}.div3{border: 1px solid blue;width: 100px;height: 100px;}.div1 div{color: green;}</style>
</head>
<body><div class="cuxiao"><ul><li>大促销</li><li>低价大甩卖</li><li>走过路过别错过</li></ul><p>这个案例为了说明后代选择器</p><div class="div1"><div class="div2">div2<div class="div3">div3</div></div>div1</div>
</div>
</body>
</html>

10.2 子选择器案例

body>p{background: red;}</style></head>
<body><p>你好我是一个段落</p>
<p>你好我是一个段落</p>
<p>你好我是一个段落</p>

10.3 相邻兄弟选择器

 <style>.first+p{background: red;}</style></head>
<body><p class="first">第一段</p>
<p>第二段</p>
<p>第三段</p>

10.4 通用兄弟选择器

<title>通用兄弟选择器</title><style>.first~p{background: red;}</style>
</head>
<body><p class="first">第一</p>
<p>第二</p>
<p>第三</p>

11.0 使用css3结构伪类选择器选择器

<title>结构伪类选择器</title><style>/*ul下面第一个子元素*/ul li:first-child{background: red;}/*ul下面最后一个子元素*/ul li:last-child{background: #1f87cc;}/*  body下面的第2个p元素*/body p:nth-child(2){background: blue;}/* 选择父级里的第一个子元素p*/p:nth-child(1){background: pink;}/* 父级元素里面第二个类型为p的元素*/p:nth-of-type(2){background: green;}</style></head>
<body><p>p1</p>
<p>p2</p>
<p>p3</p>
<ul><li>li1</li><li>li2</li><li>li3</li>
</ul>

案例:制作开心餐厅页面

<title>制作开心餐厅</title><link rel="stylesheet" href="a/style.css">
</head>
<body>
<img src="happycook/game01.jpg" alt="主题图片"><br/>
<img src="happycook/game02.jpg" alt="游戏简介">
<p>开心餐厅,让你可以开心的烹饪出美味佳肴,从一个简洁的小餐厅起步,逐步打造出自己的餐饮大时代<br/>烹饪美食,雇佣好友帮忙,装饰个性餐厅,获得顾客美誉<br>步步精心经营,精细打理,我们都能成为餐饮大亨.
</p>
<img src="happycook/game03.jpg" alt="游戏特色">
<h2 class="firstH2">如何做菜</h2>
<p>1.点击餐厅中的灶炉,选择自己做得食物后,进行烹饪,不断点击灶卢,知道事务进入自动烹饪阶段<br/>2.每道菜所需要的步骤和时间不一样<br/>3.食物完成后,服务员会自动端给顾客,然后顾客吃完付钱
</p>
<h2>如何丰富餐厅?</h2>
<p>1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>2.随着等级越高,可雇佣人越多<br>3.餐桌摆放越讲究
</p>
<h2>如何吸引顾客</h2><p>1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>2.随着等级越高,可雇佣人越多</p><br>3.餐桌摆放越讲究
</p>
<h2>如何和好用互动</h2>
<p>1.自己做老板,当大厨,雇佣好友帮忙 心情越好:好友亲密度越高<br>2.随着等级越高,可雇佣人越多<br>3.餐桌摆放越讲究<br>
</p>
<img src="happycook/game04.jpg" alt="游戏口碑">
<p>开心餐厅,让你可以开心的烹饪美食,自己做老板,当大厨,雇佣好友帮忙 <br>心情越好:好友亲密度越高</p>
</body>

style.css

/*
层次选择器*/
p{font-size: 14px;
}
body h2{font-size: 16px;
}
/*
第一个h2变成红色*/
.firstH2{
color: red;
}
/*第一个h2元素后面的所有h2元素变成蓝色*/
.firstH2~h2{color: blue;
}
/*让第一个图片设置宽高*/
img:first-child{width: 100%;height: 400px;
}
/*找个图片类型为第二个的img*/
img:nth-of-type(2){border: 1px solid red;
}

总结

选择器	功能描述
E:first-child	作为父元素的第一个子元素E
E:last-child	作为父元素的最后一个子元素E
E:nth-child(n)	先择父级元素E的第n个子元素F,n(可以是任意整数),关键字even,odd
E:first-of-type	选择父级元素内具有指定类型的第一个E元素
E F:nth-of-type(n)	选择父级元素内具有指定类型的第n个元素F

小结：

使用E F:nth-child(n)和E F:nth-of-type(n)的关键点
E F:nth-child(n):在父级里从一个元素开始查找,部分类型
E F:nth-of-type(n):在父级里先看类型,再看位置

制作爱奇艺视频的播放列表

使用无序列表来布局
影视名称用标题标签
文字描述用p标签
使用结构伪类选择器选择li元素下的标题元素,并设置字体大小16px,字体颜色@#4D4D4D
使用结构伪类选择器选择li下面的第一个p元素设置字体大小为14px,字体颜色为#640000
使用结构伪类选择器选择li下面的第二个p元素,设置字体大小为12px,字体颜色为蓝色

<title>爱奇艺播放列表</title><style>* {/*去除内外边距*/padding: 0;margin: 0;/*去除默认样式*/list-style: none;}ul li {/*浮动左*/float: left;/*左内边距*/padding-left: 30px;/*行内块元素*/display: inline-block;}li h4:nth-of-type(1) {font-size: 16px;color: #4D4D4D;}li p:nth-of-type(1) {color: #640000;font-size: 14px;}li p:nth-of-type(2) {color: blue;font-size: 12px;}.div1 {width: 100%;height: 100%;text-align: center;}</style>
</head>
<body><!--使用无序列表来布局
影视名称用标题标签
文字描述用p标签
使用结构伪类选择器选择li元素下的标题元素,并设置字体大小16px,字体颜色@#4D4D4D
使用结构伪类选择器选择li下面的第一个p元素设置字体大小为14px,字体颜色为#640000
使用结构伪类选择器选择li下面的第二个p元素,设置字体大小为12px,字体颜色为蓝色-->
<div class="div1"><h3>热播</h3><ul><li><img src="aiqiyi/img1.png" alt=""><h4>武神赵子龙</h4><p>林更新不抱网红女神</p><p>点击次数:2452884次</p></li><li><img src="aiqiyi/img2.png" alt=""><h4>旋风十一人</h4><p>胡歌变教练撩前女友</p><p>点击次数:875522445次</p></li><li><img src="aiqiyi/img3.png" alt=""><h4>太阳的后裔</h4><p>宋慧乔吃嫩草</p><p>点击次数:522445次</p></li><li><img src="aiqiyi/img4.png" alt=""><h4>山海经之赤影传说</h4><p>娜扎张翰再度联手</p><p>点击次数:24522445次</p></li></ul></div>
</body>

案例折扇

 <title>折扇</title><style>* {/* 去除内外边距*/padding: 0;margin: 0;}/*扇子*/.box {/* border: 1px solid red;*/width: 600px;height: 230px;/*盒子距离上下50px 左右自适应居中*/margin: 50px auto;position: relative;border-bottom: 2px solid #000;}.box div {width: 60px;height: 200px;/*过渡效果,所有有属性,10s完成*/transition: all 10s;position: absolute;left: 40%;box-shadow: 3px 3px 5px #333;/*   作用：设置元素旋转的基点位置。注：元素旋转前后基点位置不变。使用：transform-origin：x-axis y-axis z-axis;x-axis取值：left、right、center、length、%y-axis取值：top、bottom、center、length、%z-axis取值：lengthtransform-origin：center center；（默认位置，以元素中心点为基点，相当于50% 50%）transform-origin：left top；（以左上角为基点）transform-origin：right top；（以右上角为基点）transform-origin：center bottom；（以底线中心为基点）*/transform-origin: center bottom;}/*设置每一片扇叶*/.box div:nth-child(1) {background: red;}/*hover鼠标放上触发css*/.box:hover div:nth-child(2) {background: orange;/*旋转  15度*/transform: rotate(15deg);}.box:hover div:nth-child(3){background: yellow;transform: rotate(30deg);}.box:hover div:nth-child(4){background: green;transform: rotate(45deg);}.box:hover div:nth-child(5){background: blue;transform: rotate(60deg);}.box:hover div:nth-child(6){background: cyan;transform: rotate(75deg);}.box:hover div:nth-child(7){background: purple;transform: rotate(90deg);}/*往左边旋转*/.box:hover div:nth-last-child(1){background: orange;transform: rotate(-15deg);}.box:hover div:nth-last-child(2){background: yellow;transform: rotate(-30deg);}.box:hover div:nth-last-child(3){background: green;transform: rotate(-45deg);}.box:hover div:nth-last-child(4){background: blue;transform: rotate(-60deg);}.box:hover div:nth-last-child(5){background: cyan;transform: rotate(-75deg);}.box:hover div:nth-last-child(6){background: purple;transform: rotate(-90deg);}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>7</div><div>6</div><div>5</div><div>4</div><div>3</div><div>2</div>
</div>

属性选择器

属性选择器	功能描述
E[arre]	选择匹配具有attr属性的E元素
E[attr=value]	选择匹配具有attr属性的E元素,其属性值为value{value区分大小写}
E[attr^=value]	选择匹配具有attr属性,其属性值是value开头的任意字符
E[attr$=value]	选择匹配具有attr属性,其属性值是以value结尾的任意字符
E[attr*=value]	选择陪陪具有attr属性,其属性值包含value 换句话说,字符串value与属性值中的任意位置相匹配

示例

<title>属性选择器</title><style>.demo a {float: left;display: block;height: 50px;width: 50px;border-radius: 10px;text-align: center;background: #aac;color: red;margin-top: 5px;margin-right: 5px;text-decoration: none;margin: 5px;}/*存在具有id属性的元素*//*a[id]{background: #4D4D4D;}*//* 存在具有id属性的元素,并且元素值id=first*//* a[id=first] {background: red;}*//*   属性class=links的元素*//*a[class="links"]{background: blue;}*//*属性包含links的字符串*/a[class*="links"]{background: #1f87cc;}/*属性 herf以http开头的*//* a[href^=http]{background: #640000;}*//*属性以st结尾的 a元素*/a[class$=st]{background: #640000;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" class="links first" id="first">1</a><a href="#" class="links active">2</a><a href="#" class="links item">3</a><a href="#" class="links item">4</a><a href="#" class="links item">5</a><a href="#" class="links first">6</a><a href="#" class="links first">7</a><a href="#" class="links first">8</a><a href="#" class="links first">9</a><a href="#" class="links last">10</a></p>

案例:纯css绘制的小猫笑脸动画演示

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小猫笑脸</title><link rel="stylesheet" href="a/mao.css">
</head>
<body>
<!--猫整体-->
<div class="mao_box"><!--猫--><div class="mao"><!--猫头--><div class="mao_head"><!--猫头部花纹--><div class="huawen"><div><!--猫花纹--></div></div></div><!--猫耳朵--><div class="erduo"><div></div><div></div></div><!--猫眼睛--><div class="yanjing"><div><!--眼圈--><div class="yanquan"><div></div></div><div class="yanquan_hedding"></div><div class="hong"></div></div><!--眼右边--><div class="yan_right"><!--眼圈--><div class="yanquan"><div></div></div><div class="yanquan_hedding"></div><div class="hong"></div><div style="clear: both"></div></div></div><!--花纹--><div class="face_huawen"><div class="face_huawen_huawen huawen_left"><div id="huawen1"></div><div id="huawen2"></div><div id="huawen3"></div><div id="huawen4"></div></div><div class="face_huawen_huawen huawen_right"><div></div><div></div><div></div><div></div></div><div style="clear: both"></div></div><!--鼻子--><div class="bizi"><div></div><div></div><div></div><div></div></div><!--嘴巴--><div class="zuiba_box"><div class="zuiba"><div></div><div></div><div></div></div></div></div>
</div></body>
</html>

CSS

body {margin: 0px;background: #F6F7A7;
}.mao_box {position: relative;top: 50px;/*width:424px;*/
}.mao {margin: 0 auto;width: 400px;
}.mao_head {margin: 0 auto;width: 400px;height: 340px;background: #F6F7F2;position: relative;border-radius: 50% 50% 35% 35%;border: solid 2px #2e2e2e;overflow: hidden;z-index: 10;
}.huawen {position: absolute;height: 160px;width: 180px;background: #8D8D8D;left: 110px;border-radius: 0% 0% 50% 50%;overflow: hidden;
}.huawen > div:first-child {height: 160px;width: 90px;background: #F0AC6B;
}/*耳朵*/
.erduo {width: 374px;height: 120px;position: absolute;top: -6px;left: 50%;margin-left: -187px;border-radius: 0% 0% 0% 0%;
}
/*左耳*/
.erduo > div:first-child {height: 200px;width: 160px;border: 2px solid #2e2e2e;background: #f3f3f3;transform: rotate(-15deg);-ms-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);border-radius: 4% 80% 0% 50%;position: absolute;left: -20px;top: 0px;transition: transform 1s,left 1s;
}
/*右耳*/
.erduo > div:last-child {height: 180px;width: 160px;border: 2px solid #2e2e2e;background: #f3f3f3;transform: rotate(15deg);-ms-transform: rotate(15deg);-moz-transform: rotate(15deg);-webkit-transform: rotate(15deg);-o-transform: rotate(15deg);border-radius: 80% 4% 50% 0%;position: absolute;right: -20px;top: 0px;transition: transform 1s,right 1s;
}
/*鼠标浮动耳朵样式*/
/*左耳*/
.mao:hover .erduo > div:first-child {left: -10px;transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);border-radius: 4% 80% 0% 60%;/*transition: all 1s;*//*transition: transform 1s,left 1s;*/
}.mao:hover .erduo > div:last-child {right: -10px;transform: rotate(0deg);-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);border-radius: 80% 4% 60% 0%;/*transition: transform 1s,right 1s;*/
}
/*眼睛*/
.yanjing {height: 60px;width: 300px;position: absolute;top: 200px;z-index: 20;left: 50%;margin-left: -150px;overflow: hidden;
}
/*左眼*/
.yanquan {height: 100px;width: 100px;border: 2px solid #2e2e2e;border-radius: 50% 50% 50% 50%;overflow: hidden;position: absolute;
}
/*眼珠子 左*/
.yanquan > div:first-child {height: 100px;width: 30px;background-color: #2e2e2e;margin-left: 35px;transition:all 1s;/*transition-property: width;transition-duration: 2s;*/
}
.mao:hover .yanquan > div:first-child {width:40px;margin-left: 30px;/*transition:all 1s;*/}
.yanquan_hedding {height: 100px;width: 180px;border-top: 2px solid #2e2e2e;border-radius: 50% 50% 50% 50%;background: #F6F7F2;margin-top: 50px;margin-left: -40px;position: absolute;transition: margin-top 1s;
}.hong {position: absolute;height: 28px;width: 70px;background: red;top: 34px;/*top: 64px;*/left: 18px;border-radius: 50% 50% 50% 50%;background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 66%, rgba(253,234,247,0.8) 100%);opacity: 0.0;/*transition: opacity 0.5s ease-in 0.2s;*/
}.yan_right {left: 196px;top: 0px;background: red;position: absolute;
}
/*眼睛浮动属性*/
.mao:hover .yanquan_hedding {margin-top: 30px;/*transition: margin-top 1s;*/
}.mao:hover .hong {/*top: 34px;*/opacity: 0.8;transition: opacity 0.5s ease-in 0.2s;
}/*脸部花纹*/
/*左边花纹*/
.face_huawen {height: 80px;width: 380px;position: absolute;top: 190px;z-index: 20;left: 50%;margin-left: -190px;
}.face_huawen_huawen > div:first-child {width: 30px;height: 10px;border-top: 6px #E53941 solid;border-radius: 30% 80% 20% 50%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 20px;
}.face_huawen_huawen > div:nth-child(2) {width: 20px;height: 6px;background-color: #E53941;border-radius: 50% 50% 50% 50%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 20px;
}.face_huawen_huawen > div:nth-child(3) {/*margin-top:10px;*/width: 32px;height: 10px;border-bottom: 4px #E53941 solid;border-radius: 30% 0% 90% 30%;transform: rotate(25deg);-ms-transform: rotate(25deg);-moz-transform: rotate(25deg);-webkit-transform: rotate(25deg);-o-transform: rotate(25deg);margin-left: 8px;
}.face_huawen_huawen > div:nth-child(4) {margin-top: 20px;width: 26px;height: 20px;border-bottom: 4px #E53941 solid;border-radius: 30% 0% 90% 30%;transform: rotate(30deg);-ms-transform: rotate(30deg);-moz-transform: rotate(30deg);-webkit-transform: rotate(30deg);-o-transform: rotate(30deg);margin-left: 28px;
}.face_huawen_huawen > div:last-child {width: 22px;height: 10px;border-bottom: 3px #E53941 solid;border-radius: 0% 0% 50% 50%;transform: rotate(-15deg);-ms-transform: rotate(-15deg);-moz-transform: rotate(-15deg);-webkit-transform: rotate(-15deg);-o-transform: rotate(-15deg);margin-left: 40px;margin-top: -8px;
}
/*右边花纹*/
.huawen_right {float: right;transform: rotateY(180deg);-webkit-transform: rotateY(180deg); /* Safari 和 Chrome */-moz-transform: rotateY(180deg); /* Firefox */margin-top: -85px;
}
/*
鼻子*/
.bizi{width: 30px;height: 36px;position: absolute;left: 50%;margin-left: -15px;top: 260px;z-index: 30;
}
.bizi>div:first-child{width: 30px;height: 10px;border-bottom: 8px solid #2e2e2e;border-radius: 0% 0% 50px 50px;margin-top: -10px;}
.zuiba_box{width: 200px;height: 36px;position: absolute;overflow: hidden;left: 50%;margin-left: -100px;top: 260px;z-index: 30;/*border: 1px solid red;*/
}
.zuiba{margin-left: 85px;margin-top: 6px;
/*    border: 1px solid red;*/
}
/*嘴巴和鼻子连接*/
.zuiba > div:first-child{width: 4px;height: 8px;background: #2e2e2e;margin-left: 13px;
}
/*
右半边嘴巴*/
.zuiba > div:nth-child(2){width: 50px;height: 40px;border-bottom: 4px solid #2e2e2e;border-left: 4px solid #2e2e2e;border-radius: 40% 0% 20% 50%;margin-left: 13px;margin-top: -26px;position: absolute;transition: border-radius 1s;
}
/*左半边嘴巴*/
.zuiba > div:nth-child(3){width: 50px;height: 40px;border-bottom: 4px solid #2e2e2e;border-right: 4px solid #2e2e2e;border-radius: 0% 40% 20% 50%;margin-left: -38px;margin-top: -26px;position: absolute;transition: border-radius 1s;
}
/*
鼠标触发改变嘴巴样式*/
.mao:hover .zuiba > div:nth-child(2){border-radius: 50% 50% 50% 50%;width: 40px;
}
.mao:hover .zuiba > div:nth-child(3){border-radius: 50% 50% 50% 50%;width: 40px;margin-left: -30px;
}

css3美化网页元素

会使用css设置字体样式和文本样式
会使用css设置超链接样式
会使用css设置列表样式
会使用css设置背景样式
会使用css设置渐变效果

设置字体样式以及文本样式

span标签

<title>设置sapn标签字体样式</title><style>p .show{font-size: 36px;font-weight: bold;color: red;}p{font-size: 14px;}.bird span{font-size: 36px;font-weight: bold;color: red;}p #dream{font-size: 24px;font-weight: bold;color: red;}</style>
</head>
<body><p>享受<span class="show">"锋式"</span>教育服务</p>
<p>在千锋,有一群人默默支持你的成就,<span id="dream">IT梦想</span></p>
<p class="bird">选择<span>千锋</span>成就,你的梦想</p>
</body>

字体类型

font-family:字体字体类型<title>字体类型</title><style>body{font-family:Times ,"Times New Roman" ,"楷体";}</style>
</head>
<body>
<H1>京东商城</H1>
<h2>图书,音像,电子书刊</h2>
<p><sapn>电子书刊</sapn>电子书 网络原创 数字杂志 多媒体图书<br/><span>音像</span>音乐 影视 教育音像<br/><span>经营励志</span>经济 金融与投资 励志与成功
</p>
<h2>家用电器</h2>
<p><span>大家电</span> 平板电视 空调 冰箱 DVD播放机<br/><span>生活电器</span> 净化器 电风扇 饮水机 电话机
</p></body>

字体风格

font-style:h1{font-size: 24px;/*字体风格*/font-style: oblique;}

字体粗细

font-weight:属性

文本样式

属性	含义	举例
color	设置文本颜色	color:#00c;
text-align	设置文本的对齐方式	text-align:right;
text-indent	设置首行文本缩进	text-indent:20px;
line-height	设置文本行高	line-height:25px;
text-decoration	设置文本装饰	text-decoration:underline

CSS超详细知识点总结2相关推荐

大学计算机基础超详细知识点(高手总结),大学计算机基础超详细知识点(高手总结).doc...
大学计算机基础超详细知识点(高手总结).doc 第一章计算机及信息技术概述电子计算机的发展历程 ①1946年2月由宾夕法尼亚大学研制成功的ENIAC是世界上第一台电子数字计算机."诞生了 ...
3D建模其实很简单！从零基础到大佬，超详细知识点汇总，附教程
游戏建模都要到哪些软件? Maya,即Autodesk Maya是美国Autodesk公司出品的世界顶级的三维动画软件,应用对象是专业的影视广告,角色动画,电影特技等.Maya功能完善 ,工作灵活, ...
css动画详细知识点梳理
css动画深入剖析整理-前端一前言 css动画是个很神奇的玩意儿,但是属性又很容易混淆,傻傻分不清楚.前端开发已经习惯用Javascript来写动画,但是作为一个想走前端方向的学生,我觉得还是有必 ...
JVM（类加载、运行时数据区、堆内存、方法区、本地接口、执行引擎和垃圾回收）java虚拟机（JVM）的超详细知识点
JVM虚拟机一.JVM的概述 1.为什么要学习JVM 2.虚拟机 3.JVM的作用作用特点 4.JVM的位置 5.JVM的分类 6.各个组成部分的用途 7.Java 代码的执行流程 8.JVM ...
嵌入式从入门到精通（入土）——超详细知识点分享1
Linux C从入门到精通(入土) 简单认识Linux及其常见的操作命令 1.1 Linux的特点开源的.软硬件可裁剪.多用户.多任务.分时操作系统. 1.2 嵌入式系统以计算机应用为中心,软硬件 ...
C/C++编程知识：网络编程之 Https 详细分析，超详细知识点！
01.为何会有Https Http的缺点通信使用明文通信使用明文意味着安全性大大降低,当通信过程被窃听后,无需花费额外的投入就可看到传输的数据. 例如使用抓包工具,无需任何配置就可查看任何使用HT ...
大疆嵌入式笔试试题整理最全（附超详细知识点整理与详解）
大疆嵌入式笔试试题整理刚刚结束了大疆的嵌入式工程师笔试考试,考的是A卷,答的不好,考试之前在网上找了很多往年的试题,确实是有很多往年考过的知识点,下面是我整理的往年的试题并按照这些试题顺序整理的知识 ...
TypeScript 学习笔记（十万字超详细知识点总结）
软考高项——【第一章-信息系统】超详细知识点
目录一.信息化和信息系统 4.信息化(p8) 5.信息系统生命周期 6.信息系统开发方法:(P12) 二.网络协议 7.网络协议 (1)OSI协议 (open system interconnect ...
Java图形化界面编程超详细知识点(10)——Swing_表格
目录 7 JTable.TableModel实现表格 7.1 创建简单表格 7.2 TableModel 7 JTable.TableModel实现表格表格也是GUI程序中常用的组件,表格是一个由多 ...

CSS超详细知识点总结2

CSS超详细知识点总结2

10.0 层次选择器对比

10.1 后代选择器案例

10.2 子选择器案例

10.3 相邻兄弟选择器

10.4 通用兄弟选择器

11.0 使用css3结构伪类选择器选择器

案例:制作开心餐厅页面

style.css

总结

小结：

制作爱奇艺视频的播放列表

案例折扇

属性选择器

示例

案例:纯css绘制的小猫笑脸动画演示

HTML

CSS

css3美化网页元素

设置字体样式以及文本样式

span标签

字体类型

字体风格

字体大小

字体粗细

文本样式

CSS超详细知识点总结2相关推荐

最新文章

热门文章

CSS超详细知识点总结2

CSS超详细知识点总结2

10.0 层次选择器对比

10.1 后代选择器案例

10.2 子选择器案例

10.3 相邻兄弟选择器

10.4 通用兄弟选择器

11.0 使用css3结构伪类选择器选择器

案例:制作开心餐厅页面

style.css

总结

小结：

制作爱奇艺视频的播放列表

案例 折扇

属性选择器

示例

案例:纯css绘制的小猫笑脸动画演示

HTML

CSS

css3美化网页元素

设置字体样式以及文本样式

span标签

字体类型

字体风格

字体大小

字体粗细

文本样式

CSS超详细知识点总结2相关推荐

最新文章

热门文章

案例折扇