CSS的基本使用--笔记回顾

程序员文章站 2022-03-07 18:41:37

CSS的基本使用--笔记回顾1、CSS的引入_内联样式2、CSS引入文档样式表3、CSS外部样式表4、CSS选择器_通用选择器5、CSS选择器_元素选规器6、CSS选择器_类选择器7、CSS选择器_id选择器8、开发中结构和样式分离9、最常见的CSS属性10、颜色的设置方式1、CSS的引入_内联样式 ...</div> <div class="content"> <div class="toc"> <h3>CSS的基本使用--笔记回顾</h3> <ul> <li><a href="#1CSS__6">1、CSS的引入_内联样式</a></li> <li><a href="#2CSS_26">2、CSS引入文档样式表</a></li> <li><a href="#3CSS_68">3、CSS外部样式表</a></li> <li><a href="#4CSS__95">4、CSS选择器_通用选择器</a></li> <li><a href="#5CSS__129">5、CSS选择器_元素选规器</a></li> <li><a href="#6CSS__159">6、CSS选择器_类选择器</a></li> <li><a href="#7CSS_id_209">7、CSS选择器_id选择器</a></li> <li><a href="#8_243">8、开发中结构和样式分离</a></li> <li><a href="#9CSS_264">9、最常见的CSS属性</a></li> <li><a href="#10_326">10、颜色的设置方式</a></li> </ul> </div> <hr color="#000000" size='1"'> <h1> <a id="1CSS__6" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>1、CSS的引入_内联样式</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>   <h1 style="font-size: 50px;color: red;">网页的标题</h1> <p>网页的段落</p> <a href="#">百度一下</a> <div style="font-size: 20px;background-color: red;">哈哈哈</div> </body> </html> </code></pre> <h1> <a id="2CSS_26" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>2、CSS引入文档样式表</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 快捷键：ctrl+/ 选择器{ 属性名：属性值 } */ /* 单个元素选择器 */ h1{ font-size: 50px; color: red; } div{ font-size: 20px; background-color: red; } /* 类选择器 */ .red{ color: red; } /* 并集选择器 */ /* h1,p,a{ color: red; } */ </style> </head> <body>   <h1>网页的标题</h1> <p class="red">段落内容</p> <a class="red" href="#">百度一下</a> <div>呵呵呵</div> </body> </html> </code></pre> <h1> <a id="3CSS_68" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>3、CSS外部样式表</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>   <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/style.css">   <style> @import url(./css/base.css); @import url(./css/style.css); </style> </head> <body>  <h1>网页标题</h1> <p>段落内容</p> <a href="#">百度一下</a> <div>呵呵呵</div> </body> </html>= </code></pre> <h1> <a id="4CSS__95" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>4、CSS选择器_通用选择器</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 通配选择器 */ /* 尽量不用，影响效率 */ /* *{ color: red; background-color: red; } */ div,p,span,strong{ background-color: red; } *{ background-color: white; margin: 0; padding: 0; } </style> </head> <body> <div>div</div> <p>p</p> <span>span</span> <strong>strong</strong> </body> </html> </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MTAwOTMyMzU1OC5wbmc=" alt="CSS的基本使用--笔记回顾" title="CSS的基本使用--笔记回顾"> <h1> <a id="5CSS__129" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>5、CSS选择器_元素选规器</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> div{ color: pink; } p{ color:yellow; } a{ color: green; } </style> <body> <div>div1</div> <p>p</p> <a href="#">a</a> <div>div2</div> <div>div3</div> </body> </html> </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MTAwOTMzMTI0Mi5qcGc=" alt="CSS的基本使用--笔记回顾" title="CSS的基本使用--笔记回顾"> <h1> <a id="6CSS__159" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>6、CSS选择器_类选择器</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .box1{ color: pink; } .box2{ color: green; } .box3{ color: purple; } .large-font{ font-size: 25px; } </style> <body> <div class="box1">div1</div> <p class="large-font">p1</p> <a href="#">a</a>  <div class="box2 large-font">div2</div> <div class="box3">div3</div> <div class="box2">div4</div> <p>p2</p>   </body> </html> </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MTAwOTMzMTE4Mi5qcGc=" alt="CSS的基本使用--笔记回顾" title="CSS的基本使用--笔记回顾"> <h1> <a id="7CSS_id_209" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>7、CSS选择器_id选择器</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #header{ color: red; } #content{ color: blue; } #product{ color: yellow ; } #footer{ color: brown; } </style> </head> <body>   <div id="header">头部</div> <div id="contene">内容</div> <div id="product">商品</div> <div id="footer"></div> </body> </html> </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MTAwOTM0Nzg5NC5qcGc=" alt="CSS的基本使用--笔记回顾" title="CSS的基本使用--笔记回顾"> <h1> <a id="8_243" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>8、开发中结构和样式分离</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .product-item{ width: 100px; } </style> </head> <body>   <img class="product-item" src="../img/test.webp" alt=""> </body> </html> </code></pre> <h1> <a id="9CSS_264" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>9、最常见的CSS属性</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.color:前景色 */ .box1{ color: green; text-decoration:underlin ; /* border: 5px soild; */ border-width: 10px; border-style: solid; } /* 2.font-size:文字的大小 */ .box2{ font-size: 30px; } /* 3.background-color:背景颜色 */ .box3{ background-color: greenyellow; } .tiltle3{ background-color: skyblue; } /* 4.width/height:宽度和高度 */ .box4{ background-color: orange; width: 300px; height: 300px; } .title4{ background-color: purple; /* 无效的：宽度和高度不适用于非替换行内元素 */ width: 300px; height: 300px; } </style> </head> <body>  <div class="box1">hahahahaha</div>  <div class="box2">hehehhehehehe</div>  <div class="box3">hihiiihihihihi</div> <span class="title3">hehiehiehiehiehei</span> <span class="title">aaaa</span>  <div class="box4">xiixixixixiix</div> <span class="title4">bbbb</span> </body> </html> </code></pre> <img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczUuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAyMDEwMjYvYl8wXzIwMjAxMDI2MTAwOTM0MzM1MC5qcGc=" alt="CSS的基本使用--笔记回顾" title="CSS的基本使用--笔记回顾"> <h1> <a id="10_326" target="_blank" rel="nofollow" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbQ=="></a>10、颜色的设置方式</h1> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; /* background-color: rgb(0,0,0); */ /* alpha:0~1 */ background-color: rgba(0,255,0,0.5); /* 转成十六进制 */ /* background-color: #00ff00; */ /* background-color: transparent;等价于rgba（0，0，0，0），完全透明*/ } </style> </head> <body> <div></div> </body> </html> </code></pre> 本文地址：https://blog.csdn.net/qq_47000934/article/details/109273745 </div> <div class="tags"> 相关标签： <a href="/t/css/" target="_blank"> css </a> <a href="/t/html/" target="_blank"> html </a> <a href="/t/css3/" target="_blank"> css3 </a> </div> <div class="info-pre-next"> 上一篇： <a href="/article/96704.html"> WAP建站WML语言语法基础教程第6/6页 </a> 下一篇： <a href="/article/96706.html"> solidworks有限元分析教程 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2209719.html" target="_blank" title="基于JSP编译器基本语法的使用详解"> <h2> 基于JSP编译器基本语法的使用详解 </h2> </a> </li> <li> <a href="/article/2207472.html" target="_blank" title="使用纯 CSS 创作一个脉动 loader效果的源码"> <h2> 使用纯 CSS 创作一个脉动 loader效果的源码 </h2> </a> </li> <li> <a href="/article/2207083.html" target="_blank" title="使用Python操作MySQL的一些基本方法"> <h2> 使用Python操作MySQL的一些基本方法 </h2> </a> </li> <li> <a href="/article/2206612.html" target="_blank" title="Mysql SSH隧道连接使用的基本步骤"> <h2> Mysql SSH隧道连接使用的基本步骤 </h2> </a> </li> <li> <a href="/article/2206226.html" target="_blank" title="使用HTML5在网页中嵌入音频和视频播放的基本方法"> <h2> 使用HTML5在网页中嵌入音频和视频播放的基本方法 </h2> </a> </li> <li> <a href="/article/2206254.html" target="_blank" title="详解HTML5中的Communication API基本使用方法"> <h2> 详解HTML5中的Communication API基本使用方法 </h2> </a> </li> <li> <a href="/article/2205706.html" target="_blank" title="PHP小技巧之JS和CSS优化工具Minify的使用方法"> <h2> PHP小技巧之JS和CSS优化工具Minify的使用方法 </h2> </a> </li> <li> <a href="/article/2204827.html" target="_blank" title="IBM 笔记本 Fn功能键的详细使用方法"> <h2> IBM 笔记本 Fn功能键的详细使用方法 </h2> </a> </li> <li> <a href="/article/2204545.html" target="_blank" title="详解CSS3阴影 box-shadow的使用和技巧总结"> <h2> 详解CSS3阴影 box-shadow的使用和技巧总结 </h2> </a> </li> <li> <a href="/article/2203798.html" target="_blank" title="教你用笔记本：电池的保养和正确使用技巧"> <h2> 教你用笔记本：电池的保养和正确使用技巧 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>