- A+
所属分类：Web前端
✨CSS
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记——选择器
我的第一个CSS
h1{ color: blue; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 规范：建议分离css与html--> <!-- <style>编写css代码</style>--> <!-- 语法：--> <!-- 选择器{--> <!-- 声明1;--> <!-- 声明2;--> <!-- 声明3;--> <!-- }--> <!-- 声明最好以;结尾--> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>一级标题</h1> <p>css的优势:<p/> <p>1、内容和表现分离</p> <p>2、网页结构表现统一,可以实现复用</p> <p>3、样式十分的丰富</p> <p>4、建议使用独立于htm的css文件</p> <p>5、利用SEO，容易被搜索引擎收录!</p> </body> </html> 导入方式
/*外部样式*/ h1{ color: green; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 内部样式--> <style> h1{ color: red; } </style> <!-- 外部样式--> <link rel="stylesheet" href="css/style.css"> </head> <body> <p>优先级 就近原则</p> <p>外部样式</p> <ul> <li>链接式（html）</li> <li>导入式（css2.1）</li> </ul> <!--行内样式 在标签元素中 编写style属性 编写样式--> <h1 style="color: blue">标题</h1> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <li>导入式</li> <style> @import "css/style.css"; /*@import url("css/style.css");*/ </style> </head> <body> <h1>外部样式导入式</h1> </body> </html> 基本选择器
标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 会选择所有这个标签的元素*/ h1{ color: red; } p{ font-size: 20px; } </style> </head> <body> <h1>标签选择器h1</h1> <h1>标签选择器h1</h1> <p>标签选择器p</p> </body> </html> 类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器格式 .class的名称{}*/ /*可以多个标签归类 同一个class 可以复用*/ .class1{ color: red; } .class2{ color: blue; } </style> </head> <body> <h1 class="class1">类选择器</h1> <h1 class="class2">类选择器</h1> <h1 class="class3">类选择器</h1> <p> class="class1">类选择器</p> </body> </html> id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*id选择器 id必须保证全局唯一*/ /*#id名称{}*/ /*不遵循就近原则*/ /*id选择器 > class选择器 > 标签选择器*/ #id1{ color: red; } .class1{ color: blue; } h1{ color: green; } </style> </head> <body> <h1 id="id1">id选择器</h1> <h1 class="style1">id选择器</h1> <h1>id选择器</h1> </body> </html> 基本选择器总结
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ font-size: 20px; } </style> </head> <body> <p>标签选择器 选择一类标签</p> <p>类选择器 选择所有class属性一致的标签 跨标签</p> <p>id选择器 全局唯一</p> <br> <p>优先级：</p> <p>不遵循就近原则<p/> <p>id选择器 > class选择器 > 标签选择器</p> </body> </html> 层次选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器*/ /*body p{*/ /* background: red;*/ /*}*/ /*子选择器*/ /*body > p{*/ /* background: green;*/ /*}*/ /*相邻兄弟选择器 只有下一个*/ /*.active + p{*/ /* background: red;*/ /*}*/ /*通用兄弟选择器 当前选中元素的向下所有兄弟元素*/ .active ~ p{ background: blue; } </style> </head> <body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul> <li> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p7</p> <p>p8</p> </body> </html> 结构伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 避免使用class id选择器--> <style> /*ul第一个元素*/ ul li:first-child{ background: red; } /*ul最后一个元素*/ ul li:last-child{ background: blue; } /*选中p1*/ /*定位到父元素 选择当前的第一个元素*/ /*选择当前p元素的父级元素 选中父级元素的第一个 并且是当前元素才生效*/ p:nth-child(1){ background: green; } /*选择当前p元素的父级元素 选中p元素的第二个 类型*/ p:nth-of-type(2){ background: yellow; } a:hover{ background: red; } </style> </head> <body> <!-- <a href="">a</a>--> <!-- <h1>h1</h1>--> <p>p1</p> <p>p2</p> <p>p3</p> <ul> <li>li1</li> <li>li2</li> <li>li3</li> </ul> </body> </html> 属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .demo a{ float: left; display: block; height: 50px; width: 50px; border-radius: 10px; background: red; text-decoration: none; text-align: center; font:bold 20px/50px Arial; color: gainsboro; margin-right: 5px; } /*属性名 属性名 = 属性值（正则）*/ /* = 绝对等于 *= 包含这个元素 ^= 以这个开头 $= 以这个结尾 */ /*存在id属性的元素*/ /*a[id]{*/ /* background: yellow;*/ /*}*/ /*a[id = first]{*/ /* background: yellow;*/ /*}*/ /*class中有links的元素*/ /* a[class*="links"]{ background: yellow; } */ /* 选中herf中以http开头的元素 */ a[href^=http]{ background: yellow; } a[href$=pdf]{ background: blue; } </style> </head> <body> <p class="demo"> <a href="https://www.baidu.com/" class="links item first" id="first">1</a> <a href="https://www.baidu.com/" class="links item active" target="_blank" title="test">2</a> <a href="images/none.html" class="links item active">3</a> <a href="images/none.png" class="links item">4</a> <a href="none.jpg" class="links item">5</a> <a href="none.pdf" class="links item">6</a> <a href="none.docx" class="links item">7</a> <a href="none.pptx" class="links item">8</a> <a href="none.xlsx" class="links item">9</a> <a href="none.cpp" class="links item last">10</a> </p> </body> </html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14964830.html
版权所有，如需转载请注明出处。
