CSS3笔记1
1.CSS字体设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h4 { font: italic bold 14px "微软雅黑"; /*italic为倾斜 font综合写法,更简洁. 有顺序,不能乱调位置*/ color: green } </style> </head> <body> <h4>价值观是什么?</h4> 价值观是你的追求。 </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { font-weight: bolder; } </style> </head> <body> <p>i love you！</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { font-style: italic; } </style> </head> <body> <p>孤独寂寞的小屌丝写的code:(</p> </body> </html>
2.CSS选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { color: pink; } div { color: purple; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <div>A</div> <div>B</div> <div>C</div> </body> </html> <!-- 标签选择器,以标签名作为选择器,一旦修改,所有的标签都会生效 -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .mingren{ color: red } .zuozhu{ color: green } </style> </head> <body> <div class="mingren">鸣人</div> <div class="zuozhu">佐助</div> <div>卡卡西</div> </body> </html> <!-- 类选择器,上面声明,下面通过class引用. -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span { font-size: 100px; } .c-blue { color: #4285f4; } .c-red { color: #ea4335; } .c-orange { color: #fbbc05; } .c-green { color: #34a853; } </style> </head> <body> <span class="c-blue">G</span> <span class="c-red">o</span> <span class="c-orange">o</span> <span class="c-blue">g</span> <span class="c-green">l</span> <span class="c-red">e</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .font20 { font-size: 20px; } .font14 { font-size: 14px; } .pink { color: pink; } .fontWeight { font-weight: bold; } </style> </head> <body> <div class="pink fontWeight font20">亚瑟</div> <div class="font20">刘备</div> <div class="font14 pink">安其拉</div> <div class="font14">貂蝉</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tou { color: red; } #big { /*id选择器 和 类选择器 结合记忆更好*/ color: pink; } </style> </head> <body> <div id="big">熊大</div> <div>熊二</div> <div class="tou">光头强</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; /*类选择器是可以重复多次使用的 类似于人名*/ } #pink { color: pink; /*id 类似于身份证号 是唯一的,只允许使用一次*/ } </style> </head> <body> <div class="red">张三</div> <div id="pink">张三丰</div> <div class="red">张三疯子</div> <!-- 虽然浏览器可以显示，但任然不推荐,因为以后写js会产生冲突. --> <div>张大大</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { /*星号代表所有选择器都会生效*/ color: deeppink; } </style> </head> <body> <P>我是段落</P> <div>我是段落</div> <span>我是段落</span> <br /> <em>我是段落</em> <br /> <strong>我是段落</strong> <br /> <h1>我是段落</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { /*a是标签选择器 所有链接*/ font-weight: 700; font-size: 16px; color: gray; } a:hover { /*hover 是链接伪类选择器 鼠标经过改变颜色*/ color: red; /*鼠标经过的时候由原来的灰色变为红色*/ } </style> </head> <body> <a href="#">秒杀</a> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:first-child { /*选择第一个标签*/ color: pink; } li:last-child { /*最后一个标签*/ color: purple; } li:nth-child(4) { /*选择第四个标签 n代表第几个的意思*/ color: skyblue; } </style> </head> <body> <ul> <li>第一个标签</li> <li>第二个标签</li> <li>第三个标签</li> <li>第四个标签</li> <li>第五个标签</li> <li>第六个标签</li> <li>第七个标签</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*li:nth-child(odd) { /*选择所有的odd奇数 的标签*/ color: pink; } li:nth-child(even) { /*选择所有的even偶数的标签*/ color: deeppink;*/ } li:nth-child(3n) { /*选择所有的odd奇数是3的倍数的标签*/ color: pink; } </style> </head> <body> <ul> <li>第一个标签</li> <li>第二个标签</li> <li>第三个标签</li> <li>第四个标签</li> <li>第五个标签</li> <li>第六个标签</li> <li>第七个标签</li> </ul> } </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> li:nth-child(even) { /*从第一个标签开始数,给所有偶数的标签加上粉色*/ color: pink; } li:nth-last-child(even) { color: skyblue; /*从最后一个标签开始数,给所有偶数标签加上粉色*/ } </style> </head> <body> <ul> <li>第一个元素</li> <li>第二个元素</li> <li>第三个元素</li> <li>第四个元素</li> <li>第五个元素</li> <li>第六个元素</li> <li>第七个元素</li> <li>第八个元素</li> </ul> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> :target { /*用户点击a标签中的内容则会跳转到对应ID的信息处,信息的标题会修改成红色*/ color: red; font-size: 30px; } </style> </head> <body> <h2>目录</h2> <hr /> 1 早年经历<br /> <a href="#movie">2 演艺经历</a><br /> <a href="#live">3 个人生活</a><br /> 4 主要作品<br /> 5 社会活动<br /> 6 获奖记录<br /> 7 人物评价<br /> <h3>早年经历</h3> <hr /> 刘德华出生于香港新界,在家中排行老四. <h3 id="movie">演艺经历</h3> 刘德华演过盲探,其他的我不知道了. <h3 id="live">个人生活</h3> 刘德华的个人生活我也不知道. </body> </html>
3.CSS颜色和格式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { line-height: 26px; /*行间距*/ text-indent: 2em; /*此时2em就是2个汉字的宽度*/ } h3 { text-align: center; /*文字水平对齐*/ } </style> </head> <body> <h3>海贼王的创作背景</h3> <p>尾田荣一郎是海贼王的作者，日本人，其他的我就不知道了.</p> <p>尾田的海贼王是伴随我青春的作品.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { letter-spacing: 2px; /*字间距*/ } p { word-spacing: 10px; /*单词间距 针对与英文 中文无效*/ } </style> </head> <body> <div> 我是熊大 </div> <p>my name is andy </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { color: rgba(255, 0, 0, 0.2); /*最后一个参数设置透明度 0~1 之间 这4个参数 不能省略*/ } </style> </head> <body> <h1>文字是可以半透明的</h1> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { font-size: 100px; text-shadow: 5px 11px 3px rgba(0,0,0,0.5); /*text-shadow参数：水平位置 垂直位置 模糊距离 阴影颜色;*/ /*水平和垂直位置 前2个参数必须写，后面的2个参数可以省略 默认值*/ } </style> </head> <body> <h1>你是阴影，我是火影.</h1> </body> </html>
4.sublime快捷方式
5.综合案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Metasploit案例</title> <style> h2 { text-align: center; /*文字水平居中*/ color: #333; font-weight: normal; /*让粗体不加粗*/ } .center { text-align: center; font-size: 14px; } p { font-size: 14px; /*文字大小*/ line-height: 22px; /*行间距*/ text-indent: 2em; /*首行缩进2个汉字*/ letter-spacing: 1px; /*文字间距*/ } body { color: #333; } .c-deeppink { color: deeppink; } em { color: skyblue; font-style: normal; /*取消字体倾斜*/ } .co { font-weight: 700; color: #ccc; } .co:hover { /*链接伪类选择器,鼠标经过变换颜色*/ color: #f00; } .packtake { color: #f00; } </style> </head> <body> <h2>Metasploit Framework(MSF)发展历史</h2> <div class="center">2019年02月7日10:36 <span class="c-deeppink">百度百科 渗透测试框架 (<a href="#" class="packtake">1</a>人参与)</span> <a href="#" class="co">收藏本文</a></div> <hr /> <p> 2004年8月，在拉斯维加斯开了一次世界黑客交流会---黑帽简报（Black Hat Briefings). 在这个会议上，一款叫Metasploit 的攻击和渗透工具备受众黑客关注，出尽了风头。<em>[微博]</em> </p> <p> Metasploit 是同 HD Moore 和 Spoonm 等4名年轻人开发的，这款免费软 件可以帮助黑客攻击和控制计算机，安全人员也可以利用 Metasploit 来加强系统对此类工具的攻击。Metasploit 的演示吸引了来自“美国国防部”和“国家安全局”等政府机构的众多安全顾问和个人，正如 Spoonm 在演讲中所说的, Metasploit 很简单，只需要求“找到目标，单击和控制”即可。<em>[微博]</em> </p> <p> 2004年 Metasploit 的发布在安全界引发了强烈的“地震”。没有一款新工具能够一发布就能挤进此列表的15 强（也就是说，2000年和2003年的调查没有这种情况），更何况此工具在5强之列，超过很多广为流传的诞生了几十年的老牌工具。<em>[微博]</em> </p> <p> 2005年6月，西雅图效区的微软公司总部园区内的管理情报中心，如开了一次“蓝帽”会议。几百名微软公司的工程师和众多外界专家及黑客都被邀请进入微软帝国的中心。在会议中的黑客攻击演示中，当 Moore 向系统程序员们说明使用 Metasploit 测试系统对抗入侵时的可靠程度时，Metasploit 让微软公司的开发人员再次感到不安。在程序员们看来，Metasploit 将会使系统安全面临严重的考验。<em>[微博]</em> </p> <p> Metasploit Framework (MSF) 在2003年以开放源码方式发布，是可以自由获取的开发框架。它是一个强大的开源平台，供开发，测试和使用恶意代码，这个环境为渗透测试，shellcode 编写和漏洞研究提供了一个可靠平台。<em>[微博]</em> </p> <p> Metasploit框架直到2006年发布的2.7版本都用Perl脚本语言编写，由于Perl的一些缺陷，开发者于2007年底使用Ruby语言重写了该框架。到2007年年底，Spoonm和马特·米勒已经离开了项目。从2008年发布的3.2版本开始，该项目采用新的3段式BSD许可证。<em>[微博]</em> </p> <p> 2009年10月21号，漏洞管理解决公司Rapid7收购Metasploit项目。Rapid7承诺成立专职开发团队，仍然将源代码置于3段式BSD许可证下。<em>[微博]</em> </p> </body> </html>
用到的技术：颜色、水平居中、链接伪类选择器、em标签、取消字体倾斜、首行缩进、行高、字间距、粗体不加粗、标签选择器、类选择器
6.思维导图总结
