CSS选择器-浅谈篇

马肤
这是懒羊羊

温馨提示:这篇文章已超过601天没有更新,请注意相关的内容是否还可用!

前言

有老铁说让我不要讲的太官方,最好讲的一听就懂,所以我想我就稍微改变一下咯,



正文


CSS选择器-浅谈篇,屏幕截图 2022-12-03 221727.png,html,css,第1张



CSS样式表的每个规则都有两个主要部分:选择符(selector)和声明( declaration)。

CSS控制网页内容显示格式的方式是通过许多定义的样式属性(如字号、段落控制等)实现的,并将多个样式属性定义为一组可供调用的选择符(selector)。

CSS样式规则

selector{属性:属性值[[;属性:属性值]…]}


语法说明:
selector表示希望进行格式化的元素;声明部分包括在选择符后的大括号中;用“属性:属性值”描述要应用的格式化操作。



CSS选择器

1.标记选择器

标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

2.类选择器

类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>类选择器</title>
       <style type="text/css">
       .red{color:red;}
       .green{color:green;}
       .font22{font-size:22px;}
       p{
          text-decoration:underline;
          font-family:"微软雅黑";
       }
   </style>
   </head>
   <body>
       <h2 class="red">二级标题文本</h2>
       <p class="green font22">段落一文本内容</p>
       <p class="red font22">段落二文本内容</p>
       <p>段落三文本内容</p>
   </body>
</html>

CSS选择器-浅谈篇,屏幕截图 2022-12-03 222741.png,html,css,第2张

3.id选择器

#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>id选择器</title>
       <style type="text/css">
           #bold {font-weight:bold;}
           #font24 {font-size:24px;}
       </style>
   </head>
   <body>
       <p id="bold">段落1:id="bold",设置粗体文字。</p>
       <p id="font24">段落2:id="font24",设置字号为24px。</p>
       <p id="font24">段落3:id="font24",设置字号为24px。</p>
       <p id="bold font24">段落4:id="bold font24",同时设置粗体和字号24px。</p>
   </body>
</html>

CSS选择器-浅谈篇,屏幕截图 2022-12-03 222839.png,html,css,第3张


还有些我后面会再讲,有点累了


文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复:表情:
评论列表 (暂无评论,400人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码