m5k1umn 发表于 2024-6-30 11:03:05

CSS常用选取器都在这儿了！！！！


    <h3 style="color: black; text-align: left; margin-bottom: 10px;">本节重点</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.什么是<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">每一条css样式声明由两部分<span style="color: black;">构成</span>，如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">选取</span>器{
      样式;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在css中{}之前的部分<span style="color: black;">便是</span>"<span style="color: black;">选取</span>器","<span style="color: black;">选取</span>器"指明了{}中的”样式“的<span style="color: black;">功效</span>对象，<span style="color: black;">亦</span><span style="color: black;">便是</span>说该”样式“<span style="color: black;">功效</span>与网页中的<span style="color: black;">那些</span>元素。</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2.<span style="color: black;">基本</span><span style="color: black;">选取</span>器</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">标签<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">标签<span style="color: black;">选取</span>器顾名思义<span style="color: black;">便是</span>html代码中的标签。<span style="color: black;">咱们</span>之前学习的html、body、h系列的标签、p、div、img等等<span style="color: black;">咱们</span>都<span style="color: black;">能够</span><span style="color: black;">运用</span>标签<span style="color: black;">选取</span>器来设置对应的css样式属性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">它<span style="color: black;">能够</span>选中页面中所有的元素，而不是某一个元素内容，<span style="color: black;">因此</span>选中的是页面中共有的属性</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">举个栗子：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为页面中所有的段落设置字号为12px,字体颜色为红色，字体粗细为更粗。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">代码如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;!DOCTYPE html&gt;
      &lt;html lang="en" dir="ltr"&gt;
      &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type=text/css&gt;
      p{
      color:red;
      font-size:12px;
      font-weight:bold;
      }
      &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;h3&gt;抖音&lt;/h3&gt;
      &lt;p&gt;年后，一股抖音风<span style="color: black;">火热</span>了社媒，抖音上的博主带火了小猪佩奇。<span style="color: black;">她们</span>的标志是"手带小猪佩奇手表，身披小猪佩奇纹身"，于是就诞生了"小猪佩奇身上纹，掌声送给社会人"。&lt;/p&gt;
      &lt;img src="index01.jpeg" alt=""&gt;
      &lt;p&gt;估计林俊杰<span style="color: black;">自己</span>都没想过，《醉赤壁》一句最不起眼的台词竟然<span style="color: black;">成为了</span>众多网友口中的一个梗，最优秀这个梗的完美结合。&lt;/p&gt;
      &lt;img src="index02.jpeg" alt=""&gt;

      &lt;/body&gt;
      &lt;/html&gt;</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">ID<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ID好比是<span style="color: black;">每一个</span>人的身份证号<span style="color: black;">同样</span>，<span style="color: black;">每一个</span>人都有身份证，并且身份证号是不<span style="color: black;">同样</span>的。在网页中所有的标签都<span style="color: black;">能够</span>设置id，并且id<span style="color: black;">不可</span>重复。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">语法：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">#ID<span style="color: black;">选取</span>器名<span style="color: black;">叫作</span>{
      css样式代码;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、以#开头</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、其中ID<span style="color: black;">选取</span>器名<span style="color: black;">叫作</span><span style="color: black;">能够</span>任意起名(最好不要起中文)</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、ID的名<span style="color: black;">叫作</span><span style="color: black;">必要</span>是<span style="color: black;">独一</span>的</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">ID<span style="color: black;">选取</span>器选中的是页面中元素特有的属性。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">例如</span>对上节课代码中的林俊杰文本来设置字体颜色为绿色，并且字体<span style="color: black;">体积</span>为14px。并且设置《醉赤壁》文本的字体<span style="color: black;">体积</span><span style="color: black;">亦</span>为14px。<span style="color: black;">那样</span>仅仅靠标签<span style="color: black;">选取</span>器是完成不了的，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">这般</span>做。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">运用</span><span style="color: black;">过程</span>如下：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、<span style="color: black;">运用</span>合适(&lt;span&gt;&lt;/span&gt;)的标签把要修饰的内容标记出来，如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;span&gt;林俊杰&lt;/span&gt;
      &lt;span&gt;《醉赤壁》&lt;/span&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2、<span style="color: black;">运用</span>id=id<span style="color: black;">选取</span>器名<span style="color: black;">叫作</span>为<span style="color: black;">每一个</span>标签设置<span style="color: black;">区别</span>的id。如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;p&gt;估计&lt;span id="span1"&gt;林俊杰&lt;/span&gt;<span style="color: black;">自己</span>都没想过，&lt;span id="span2"&gt;《醉赤壁》&lt;/span&gt;一句最不起眼的台词竟然<span style="color: black;">成为了</span>众多网友口中的一个梗，最优秀的要属毛爷爷的表情包和这个梗的完美结合。&lt;/p&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">有的童鞋可能有疑问了？难道我<span style="color: black;">不可</span>给林俊杰,《醉赤壁》添加完span标签之后，直接设置你<span style="color: black;">需求</span>的样式么？<span style="color: black;">大众</span>会<span style="color: black;">发掘</span>，给文本<span style="color: black;">所有</span>设置为14px,并且设置了绿色，<span style="color: black;">那样</span>《醉赤壁》<span style="color: black;">亦</span>会变为绿色，这是<span style="color: black;">不可</span>满足需求的。<span style="color: black;">因此</span><span style="color: black;">咱们</span><span style="color: black;">能够</span>给<span style="color: black;">每一个</span>span设置<span style="color: black;">区别</span>的id，来分别设置<span style="color: black;">区别</span>的样式</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3、设置ID<span style="color: black;">选取</span>器css样式，如下：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">#span1{
      color:green;
      font-size:14px;
      }
      #span2{
      font-size:14px;
      }</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">类<span style="color: black;">选取</span>器</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类选择器跟id有点<span style="color: black;">类似</span>，任何的标签元素都<span style="color: black;">能够</span>添加类(class)，<span style="color: black;">然则</span><span style="color: black;">区别</span>的是类是<span style="color: black;">能够</span>重复，有“归类”的概念，并且同一个标签中<span style="color: black;">能够</span>携带多个类，用空格隔开。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">例如</span>狗、猫、刺猬属于动物类，黑白打印机和彩色打印机属于打印机类。<span style="color: black;">一样</span><span style="color: black;">状况</span>下，<span style="color: black;">例如</span>网页中的某几个标签，像p、li、a标签同属于ac</p>




听听海 发表于 2024-8-25 16:03:09

我们有着相似的经历，你的感受我深有体会。

nykek5i 发表于 2024-9-30 17:31:17

谷歌外贸网站优化技术。
页: [1]
查看完整版本: CSS常用选取器都在这儿了！！！！