HTML中引入CSS样式的第二种方式：样式块

heliuerya

已于 2023-02-02 17:47:10 修改

阅读量193

点赞数

分类专栏：学习笔记 CSS 文章标签： css html5 前端

于 2023-01-29 05:50:25 首次发布

本文链接：https://blog.csdn.net/heliuerya/article/details/128783948

版权

学习笔记同时被 2 个专栏收录

277 篇文章 5 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

<!--
   第二种方式：在head标签中使用style块，这种方式被称为样式块方式。
       语法格式：
           <head>
               <style type="text/css">
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       ......
                   }
                   选择器 {
                       样式名 : 样式值;
                       样式名 : 样式值;
                       ......
                   }
                   ......
               </style>
           </head>

-->
<!DOCTYPE html>
<html>
   <head>
       <title>HTML中引入CSS样式的第二种方式：样式块</title>
       <style type="text/css">
           /*
               这是CSS注释。
           */
           /*
               id选择器语法格式：
                   #id名字{
                       样式名:样式值;
                       样式名:样式值;
                       样式名:样式值;
                       ...
                   }
               id选择器只能对某一个标签进行定位。
           */
           #myid{
               color:red;       /* 字体颜色：红色 */
               font-size:30px;   /* 字体大小：30px */
           }
           /*
               标签选择器语法格式：
               标签名{
                   样式名:样式值;
                   样式名:样式值;
                   样式名:样式值;
                   ...
               }
               标签选择器作用的范围比id选择器广。它能对同一类型的标签进行统一定位，不灵活。
           */
           div{
               background-color:black;       /* 背景颜色：黑色 */
               border:2px solid red;       /* 边框粗细2像素，边框样式：实线，边框颜色：红色 */
               width:100px;               /* div宽度：100px */
               height:100px;               /* div高度：100px */
           }
           /*
               类选择器语法格式：
               .类名{
                   样式名:样式值;
                   样式名:样式值;
                   样式名:样式值;
                   ...
               }
               类选择器可以对不同类型的标签进行定位，比较灵活
           */
           .myclass{
               border:5px solid yellow;   /* 边框：宽度5px 实线黄色 */
           }

</style>
       </style>
   </head>
   <body bgcolor="antiquewhite">
       
       <span id="myid">欢迎学习CSS</span>


       <div></div><br/>
       <div></div><br/>
       <div></div><br/>

附：在网页中的展示效果如下图：