欢迎光临
我的个人博客网站

【CSS】CSS3学习笔记(二)


✨课程链接

【狂神说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="">         <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="">     </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>&nbsp;&nbsp;<a href="#">音响</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>             <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>             <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>             <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>             <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>             <li><a href="#">礼品鞋帽</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>             <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>             <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>         </ul>     </div>  </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14966632.html

版权所有,如需转载请注明出处。

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【CSS】CSS3学习笔记(二)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏