- A+
所属分类：Web前端
✨课程链接
【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili
✨学习笔记
span标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> #title1{ font-size: 30px; color: red; } </style> <body> 普通内容<span id="title1">被凸显的内容</span> </body> </html> 字体样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- font-family 字体 font-size 字体大小 font-weight 字体粗细 color 字体颜色 --> <style> body{ font-family: "Arial Black","楷体"; color: gray; } h1{ font-size: 50px; font-size: 2em; } .p1{ font-weight: bolder; /* font-weight: lighter; */ } </style> </head> <body> <h1>CSS</h1> <p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> <p>Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 字体风格 --> <style> p{ font:oblique lighter 30px "楷体"; } </style> </head> <body> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> </body> </html> 文本样式
<!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> <!-- 颜色： 单词 RGB 0~F #000000 #FF0000 红 #00FF00 绿 #0000FF 蓝 #FFFFFF rgb(0,255,255) RGBA a 0~1 text-align: center 排版(文本居中) text-indent: 2em; 段落首行缩进 行高 和 块 高度一致 单行文字上下居中 height: 100px; line-height: 100px; --> <style> h1{ /* color:#0000FF; */ color: rgba(0,255,255,0.5); text-align: center; } .p1{ text-indent: 2em; } .p3{ background: cornsilk; height: 100px; line-height: 100px; } /* 下划线 */ .l1{ text-decoration: underline; } /* 中划线 */ .l2{ text-decoration: line-through; } /* 上划线 */ .l3{ text-decoration: overline; } /* 超链接去下划线 */ a{ text-decoration: none; } /* 文本图片水平对齐 */ img,span{ vertical-align: middle; } </style> </head> <body> <a href="">去掉下划线</a> <p class="l1">111</p> <p class="l2">111</p> <p class="l3">111</p> <h1>CSS</h1> <p class="p1">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。</p> <p>CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p> <p class="p3">Stray birds of summer come to my window to sing and fly away. And yellow leaves of autumn, which have no songs, flutter and fall there with a sigh.</p> <br> <hr> <br> <p> <img src="image/demo.png" alt="【CSS】CSS3学习笔记（二）" alt=""> <span>被居中的字体</span> </p> </body> </html> 超链接伪类
<!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> /* 默认颜色 */ a{ text-decoration: none; color: black; } /* 选择所有未被访问的链接 */ a:link{ color: brown; } /* 选择所有已访问的链接 */ a:visited{ color: red; } /* 选择鼠标悬停其上的链接 （需要记住）*/ a:hover{ color: orange; font-size: 20px; } /* 选择活动的链接 */ a:active{ color: green; } /* 水平阴影 垂直阴影 模糊的距离 阴影的颜色 */ #price{ text-shadow: 10px -5px 2px blue; } </style> </head> <body> <a href="#"> <img src="image/demo.jpg" alt="【CSS】CSS3学习笔记（二）" alt=""> </a> <p> <a href="#">码出高效：Java开发手册</a> </p> <p> <a href="">作者：孤尽</a> </p> <p id="price"> ￥99.00 </p> </body> </html> 列表
#nav{ width: 300px; background: gray; } .title{ font-size: 20px; font-weight: bold; text-indent: 1em; line-height: 35px; background: red; } /* list-style none 去掉原点 circle 空心圆 decimal 数字 square 正方形 */ ul{ background: gray; } ul li{ height: 30px; list-style: none; text-indent: 1em; } a{ text-decoration: none; font-size: 14px; color: black; } a:hover{ color: orange; text-decoration: underline; } <!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> <link href="css/style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="nav"> <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> </div> </body> </html>
⭐转载请注明出处
本文作者：双份浓缩馥芮白
原文链接：https://www.cnblogs.com/Flat-White/p/14966632.html
版权所有，如需转载请注明出处。
