css学习笔记
2022/6/9 23:22:31
本文主要是介绍css学习笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1.我的第一个css程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--规范,<style> 可以编写css代码 语法: 选择器{ 声明1; 声明2; 声明3; } <style> h1{ color: red; } </style> --> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>我是标题</h1> </body>
</html>、 2.导入方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: #95ff00; } </style> <link rel="stylesheet" href="style.css"> </head> <body> <h1 style="color: #ff0000">我是标题</h1> </body> </html> 3.基本选择器 id选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /* id选择器 #id名称{} 不遵循就近原则,固定的 id选择器>类选择器>标签选择器 */ #yu{ color: #95ff00; } .liang{ color: bisque; } h1{ color: aliceblue; } </style> </head> <body> <h1 id="yu">标题1</h1> <h1 class="liang">标题2</h1> <h1>标题3</h1> <h1>标题4</h1> <h1>标题5</h1> </body> </html> 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: aqua; } p{ font-size: 80px; } </style> </head> <body> <h1>学java</h1> <h1>学java</h1> <p>不想学Java</p> </body> </html> 类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*类选择器的格式 .class的名称{} 好处,可以多个标签归类,是同一个class */ .yu{ color: aqua; } .liang{ color: antiquewhite; } </style> </head> <body> <h1 class="yu">标题1</h1> <h1 class="liang">标题2</h1> <h1 class="yu">标题3</h1> <p class="yu">p标签</p> </body> </html> 4.层次选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*p{ background: bisque; } */ /*后代选择器 body p{ background: aqua; } */ /*子选择器 body>p{ background: aqua; } */ /*相邻兄弟选择器 .active + p{ background: aqua; } */ /*通用选择器,当前选中元素的向下所有兄弟元素*/ .active~p{ background: aqua; } #meng~li{ background: red; } </style> </head> <body> <p>p0</p> <p class="active">p1</p> <p>p2</p> <p>p3</p> <ul> <li id="meng"> <p>p4</p> </li> <li> <p>p5</p> </li> <li> <p>p6</p> </li> </ul> <p>p7</p> <p>p8</p> </body> </html>
这篇关于css学习笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享
- 2024-03-06流程样式css(css实现流程图)-icode9专业技术文章分享
- 2024-03-06css怎么调搜索键样式(css搜索框怎么调大小)-icode9专业技术文章分享
- 2024-03-06css层叠样式(Css层叠样式介绍)-icode9专业技术文章分享
- 2024-03-06css样式表有何特点(css样式表的使用方法有几种)-icode9专业技术文章分享
- 2024-03-06css的列表样式(css列表样式属性包括)-icode9专业技术文章分享
- 2024-03-06css3手机端样式(手机端css怎么写)-icode9专业技术文章分享
- 2024-02-21蝉知CSS样式修改(改变css样式)-icode9专业技术文章分享