CSS笔记 电玩女神 2023-10-02 11:09 5阅读 0赞 # 1.CSS样式种类 # ## 1.1行内样式<标签内部添加属性> ## 代码分析：<div style="color:yellow;bcakground:yellow;">我和我的祖国<div/> <body style="green"><body/>//页面背景颜色的填充 ## 1.2内部样式<整个页面的内部> ## 格式分析：<style type="text/css"> 标签\{ 属性 \} 代码分析： <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body\{ background-color: burlywood; \} div\{ color: chocolate; background-color: cyan; \} </style> </head> <body> 我和我的祖国 > </body> </html> ## 1.3外部样式 ## 解析：链接CSS文件 <link rel="stylesheet" typr="text/css" href="css/html文件"/> ## 1.4总结：三种样式优先级 ## 优先级：行内样式>内部样式>外部样式 # 2.选择器 # ## 2.1基本选择器 ## ### 2.11标签选择器 ### 代码解析： <style type="text/css" div\{ color:blue; \} </style> ### 2.1.2类选择器 ### .<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .there{ color: cyan; } </style> </head> <body> <div>123</div> <div>321</div> <div class="there">123</div> <div class="there">321</div> <div>123</div> </body> </html> ### 2.1.3ID选择器 ### <style type="text/css"> .there{ color: cyan; } #one{ background-color: cyan; } #two{ background-color: darkblue; } </style> </head> <body> <div>123</div> <div id="one">321</div> <div class="there">123</div> <div class="there">321</div> <div id="two">123</div> </body> </html> ### 2.1.4总结：三种基本选择器优先级 ### 优先级：ID选择器>类选择器>标签选择器 ## 2.2高级选择器 ## ### 2.2.1层次选择器 ### 后代选择器E F 代码分析： <style type="text/css"> body p{ background-color: darkblue; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <ul> <li> <p>11</p> </li> <li> <p>22</p> </li> </ul> </body> </html> 子选择器E>F body>p{ background-color: darkblue; } </style> 相邻选择器E+F 代码分析： p+span{ background-color: darkblue; } </style> //有效果的是+后面的 </head> <body> <p>1</p> <p>2</p> <span>33</span> <p>3</p> <ul> <li> <p>11</p> </li> <li> <p>22</p> </li> </ul> </body> </html> 通用兄弟选择器E~F 代码分析： <style type="text/css"> p~ul{ background-color: darkblue; } </style> //只显示兄弟，也就是~后面的，其本身不显示，也就是~前面的 </head> <body> <p>1</p> <p>2</p> <span>33</span> <p>3</p> <ul> <li> <p>11</p> </li> <li> <p>22</p> </li> </ul> </body> </html> ### 2.2.2结构伪类选择器<同类型中的第（n）个元素> ### 代码分析： <style type="text/css"> p:nth-of-type(3){ background-color: darkblue; } </style> </head> <body> <p>1</p> <p>2</p> <p>3</p> <ul> <li>11</li> <li>22</li> <p>1</p> <p>2</p> <p>3</p> </ul> </body> </html> ### 2.2.3属性选择器 ### 代码分析： <style type="text/css"> [class]{//【】里面的是属性 background-color: darkcyan; } </style> </head> <body> <p class="asdfg">asdfg</p> <p class="azxwf">azxwf</p> <p title="avrhy">avrhy</p> </body> </html> 代码分析（绝对定位） <style type="text/css"> [class="a"]{ //参照 class="a"来写的 background-color: darkcyan; } </style> </head> <body> <p class="a">asdfg</p> <p class="azxwf">azxwf</p> <p title="avrhy">avrhy</p> </body> </html> ^代表以xxx为开头的：【属性^="类引号里面元素值中的n个字母"】 <style type="text/css"> [class^="a"]{ background-color: darkcyan; } </style> </head> <body> <p class="asdfg">asdfg</p> <p class="azxwf">azxwf</p> <p title="avrhy">avrhy</p> </body> </html> $代表的是以xxx为结尾的（类后面的引号中的元素值） <style type="text/css"> [class$="f"]{ background-color: darkcyan; } </style> </head> <body> <p class="asdff">asdff</p> <p class="azxwf">azxwf</p> <p title="avrhy">avrhy</p> </body> </html> # 3.CSS实战 # ## 1.文本常用标签 ## ### 1.1<span>标签（凸显文本） ### 代码分析：<把内容放在span标签里，然后用内部样式渲染> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> span{ background-color: darkgreen; } </style> </head> <body> 床前明月光<span>(2)</span>，疑是地上霜⑶。 举头望明月⑷，低头思故乡。 </body> </html> ### 1.2font属性 ### 风格>粗细>大小>类型 风格：font-style属性 粗细：font-weight属性 大小：font-size属性 类型：font-family属性 font:风格 粗细 大小 类型（和上面的等价） 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ /* font-style: italic; font-size: 10px; font-weight: bold; font-family: '宋体'; */ font: italic bold 30px"宋体"; } </style> </head> <body> 床前明月光<span>(2)</span>，疑是地上霜⑶。 举头望明月⑷，低头思故乡。 </body> </html> ### 1.3文本属性 ### 文本颜色 color:rgba()函数 代码分析： <style type="text/css"> body{ /* color: #c52e32; */ //颜色 color: rgb(46, 51, 152);//rgb调色 } </style> </head> <body> 床前明月光<span>(2)</span>，疑是地上霜⑶。 举头望明月⑷，低头思故乡。 </body> </html> 代码分析：rgba（）函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ /* color: #c52e32; color: rgb(46, 51, 152); */ color: rgba(100, 100, 100, 0.5)//最后位的参数代表的是字体的透明度 } </style> </head> <body> 床前明月光<span>(2)</span>，疑是地上霜⑶。 举头望明月⑷，低头思故乡。 </body> </html> 文本对齐 text-align:center/left/right 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body{ text-align: center; } h1{ text-align: center; } </style> </head> <body> <h1>《静夜思》</h1> 床前明月光<span>(2)</span>，疑是地上霜⑶。 举头望明月⑷，低头思故乡。 </body> </html> 文本装饰 text-decoration: 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> h1{ text-decoration: overline; } h2{ text-decoration: line-through; } h3{ text-decoration: underline; } h4{ text-decoration: blink; } h5{ text-decoration: none; } </style> </head> <body> <h1>JAVA实战</h1> <h2>CSS盒子</h2> <h3>python实战</h3> <h4>c语言程序</h4> <h5>JAVA该机API</h5> </body> </html> 文本阴影 text-shadow:阴影横向偏移量 阴影纵向偏移量 模糊度 颜色（负号代表反方向） 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" ulcontent="width=, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ font-size: 100px; text-shadow: 10px 10px 10px blanchedalmond; } </style> </head> <body> <div>文本影子的效果</div> </body> </html> 垂直对齐（图片和文字）vertical-align 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <style type="text/css"> img,span{ vertical-align: middle; } </style> </head> <body> <p> <img src="img/asdf.jpg"> <span>少女</span> </p> </body> </html> ## 2.伪类超链接 ## 标签名：hover 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <style type="text/css"> a:hover{ text-decoration: none; } </style> </head> <body> <a href="#" >我是你爹</a> </body> </html> ## 3.列表属性 ## 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <style type="text/css"> </style> </head> <body> <style> ul li { height: 30px; line-height: 25px; text-indent: 1em;/*首行文本的缩进*/ } </style> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>列表样式</title> </head> <body> <h2 class="title">全部商品分类</h2> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a> </li> </ul> </body> </html> </body> </html> ## 4.背景样式 ## 背景颜色 背景图像 背景定位 代码分析： <style> #nav { width:230px; background-color:#D7D7D7; } .title { background-color:#C00; font-size:18px; font-weight:bold; color:#FFF; text-indent:1em; line-height:35px; } #nav ul li { height:30px; line-height:25px; list-style: none; } </style> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景图像</title> <link href="css/background.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="nav"> <div class="title">全部商品分类</div> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li> </ul> </div> </body> 代码分析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <title>Document</title> <style type="text/css"> </style> </head> <body> <style> #nav { width:230px; background-color:#D7D7D7; } .title { //背景颜色 背景图像 背景定位 background: #C00 url(img/arrow-down.gif) 205px 10px no-repeat; } #nav ul li { //背景颜色 背景图像 背景定位 background: url(img/arrow-right.gif) 170px 2px no-repeat; } </style> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>背景图像</title> <link href="css/background.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="nav"> <div class="title">全部商品分类</div> <ul> <li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li> <li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li> <li><a href="#">电脑</a> <a href="#">办公</a></li> <li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li> <li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li> <li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li> <li><a href="#">食品饮料</a> <a href="#">保健食品</a></li> <li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a></li> </ul> </div> </body> </body> </html>
相关 CSS笔记 01css 网页分成三个部分： 结构(HTML) 表现(CSS) 行为(JavaScript) CSS： - 层叠样式表 \- 网页实际上是一个多层的结构，通过 港控/mmm°/ 2023年10月03日 21:52/ 0 赞/ 6 阅读
相关 CSS笔记 目录 1. 三种样式介绍 1) 行间样式: 2) 内嵌样式: 3) 外链样式: 4) 样式的优先级: 2. 选择器 3. 关于背景颜色透明问题 4. 盒子模型的 川长思鸟来/ 2023年10月02日 17:39/ 0 赞/ 9 阅读
相关 CSS笔记 1.CSS样式种类 1.1行内样式<标签内部添加属性> 代码分析：<div style="color:yellow;bcakground:yellow;">我和我的 电玩女神/ 2023年10月02日 11:09/ 0 赞/ 6 阅读
相关 CSS 笔记 启用硬件加速 > 【移动端】启用硬件加速，使IOS系统下元素滚动条滑动流畅。 -webkit-overflow-scrolling: touch; 去掉超链 川长思鸟来/ 2022年09月02日 13:59/ 0 赞/ 171 阅读
相关 css笔记 后代选择器（.div1 .li2 p） 交集选择器（h3.special） 并集选择器（h3,li） 通配符 子选择器（div>p） 序号选择器（ul li:first- 向右看齐/ 2022年07月21日 11:18/ 0 赞/ 149 阅读
相关 CSS笔记 CSS笔记 用法 外部样式表 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 布满荆棘的人生/ 2022年06月10日 07:36/ 0 赞/ 214 阅读
相关 CSS笔记 一、position > fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 如果想将某控件固定在窗口某个位置，比如顶部，就可以采用该fixed属性。 野性酷女/ 2022年04月25日 01:04/ 0 赞/ 238 阅读
相关 CSS笔记 层叠样式表 页面的表现 外部样式表 <head> <link rel="stylesheet" href="hase.css"> </head - 日理万妓/ 2021年08月26日 21:40/ 0 赞/ 330 阅读
港控/mmm°
川长思鸟来
向右看齐
野性酷女
还没有评论，来说两句吧...