2021年3月7日 css类

类

class标签 类

结合html和css定义一类标签

把一类标签应用同样样式

类代码

p是选择标签

.是指定

greentea类名

p.greentea选择greentea类中的段落。

p.greentea {
	color: green;
}

应用

p段落添加类名

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge Elixirs</title>
    <link type="text/css" rel="stylesheet" href="../lounge.css" />
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <h2>Green Tea Cooler</h2>
    <p class="greentea">
      <img src="../images/green.jpg" alt="Green Tea Cooler">
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
    <h2>Raspberry Ice Concentration</h2>
    <p>
      <img src="../images/lightblue.jpg" alt="Raspberry Ice Concentration">
      Combining raspberry juice with lemon grass,
      citrus peel and rosehips, this icy drink
      will make your mind feel clear and crisp.
    </p>
    <h2>Blueberry Bliss Elixir</h2>
    <p>
      <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir">
      Blueberries and cherry essence mixed into a base
      of elderflower herb tea will put you in a relaxed
      state of bliss in no time.

如果多个相同类名如何处理

p、h1、h2都有greentea类名

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Head First Lounge Elixirs</title>
    <link type="text/css" rel="stylesheet" href="../lounge.css" />
  </head>
  <body>
    <h1>Our Elixirs</h1>

    <blockquote class="greentea"><h2>Green Tea Cooler</h2></blockquote>
    <p class="greentea">
      <img src="../images/green.jpg" alt="Green Tea Cooler">
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>
    <blockquote class="greentea"><h2>Raspberry Ice Concentration</h2></blockquote>
    <p>
      <img src="../images/lightblue.jpg" alt="Raspberry Ice Concentration">
      Combining raspberry juice with lemon grass,
      citrus peel and rosehips, this icy drink
      will make your mind feel clear and crisp.
    </p>
    <h2>Blueberry Bliss Elixir</h2>
    <p>
      <img src="../images/blue.jpg" alt="Blueberry Bliss Elixir">
      Blueberries and cherry essence mixed into a base
      of elderflower herb tea will put you in a relaxed
      state of bliss in no time.
    </p>
    <h2>Cranberry Antioxidant Blast</h2>
    <p>
      <img src="../images/red.jpg" alt="Cranberry Antioxidant Blast">
      Wake up to the flavors of cranberry and hibiscus
      in this vitamin C rich elixir.
    </p>
    <p>
      <a href="../lounge.html">Back to the Lounge</a>
    </p>
  </body>
</html>

批量处理的方法

在选择器使用.就可以把所有同样类名的全部选择上

.greentea{
	color:green;
}

一个标签加入多个类名

如果在html页面中一个标签有多种类名，可以在css选择器上给不同类输入不同的样式来区分和管理。

html的p段落

<p class="greentea  raspberry bluebreey">xxxxx</p>

css文件类选择器

每个类代表不同样式进行管理

p.greentea{
    color:red;
}
p.raspberry{
    font-family:castellar；
}

特定

这个规则选择所有叫greentea的类名

.greentea{
	color:green;
}

这两个规则选择的是p段落后的greentea和raspberry的类名

p.greentea{
    color:red;
}
p.raspberry{
    font-family:castellar；
}

继承情况

在查看代码的时候如果html页面有变化查看css要仔细。

可能不在改段落的指定类名可能是在父标签或者是父标签的父标签上。

还有一种情况比如p标签后面的类名都在css里标识了颜色

他们会有先后顺序，css读取的一定是p标签最后一个类名生成到html页面中

html的p段落

<p class="greentea  raspberry bluebreey">
      <img src="../images/green.jpg" alt="Green Tea Cooler">
      Chock full of vitamins and minerals, this elixir
      combines the healthful benefits of green tea with
      a twist of chamomile blossoms and ginger root.
    </p>

css后缀文件

p.greentea {
	color: green;
}
p.raspberry {
	color:red;
}
p.bluebreey{
	color: blue;
}

css会选择最后的p.bluebreey网页就变成蓝色。

posted on 2021-03-07 23:12  tallish  阅读(66)  评论(0)    收藏  举报

导航