CSS样式表的引入方式与选择器练习

CSS样式表的引入方式与选择器练习

思闻_Sven

CSS样式表的引入方式

1.行内样式
通过 style 属性设置元素样式。

<p style="background-color: red">第一个</p>

2.内部样式
将样式编写到<style>标签中，通过CSS选择器选中元素并设置元素样式。

<style>
    #box1 > p { text-align: center; }
    #box1 p { border: solid blue; }
</style>

3.外部样式
将CSS样式编写到一个外部.css文件中，之后将其引入到html文件中。

<link rel="stylesheet" href="style/reset.css" />
<style>
    @import url(style/style.css);
</style>

4.在浏览器中可以查看元素的CSS样式的引入方式

CSS选择器练习

以下会通过两种不同方式实现图中的效果

1.不使用结构伪类选择器

html结构

    <div id="box1">
      <p style="background-color: red">第一个</p>
      <p class="abc">第二个</p>
      <p class="abc">第三个</p>
      <div><p>第四个</p></div>
      <p>第五个</p>
      <p>第六个</p>
      <p>第七个</p>
    </div>

样式表

<style>
    #box1{
    width: 100px;
    border: solid;
    }
    .abc {
    background-color: orange;
    }
    #box1 > p {
    text-align: center;
    }
    #box1 p {
    border: solid blue;
    }
    #box1 > div + p {
    background-color: greenyellow;
    }
    #box1 > div ~ p {
    font-size: x-large;
    }
</style>

2.使用结构伪类选择器

html结构

    <div id="box2">
      <p>第一个</p>
      <p>第二个</p>
      <p>第三个</p>
      <div><p>第四个</p></div>
      <p>第五个</p>
      <p>第六个</p>
      <p>第七个</p>
    </div>

样式表

#box2{
  width: 100px;
  border: solid;
}
#box2 :nth-of-type(n) {
  border: solid blue;
  text-align: center;
}
#box2 :nth-of-type(-n + 3) {
  background-color: orange;
}
#box2 :nth-last-of-type(-n + 3) {
  font-size: x-large;
}
#box2 :first-of-type {
  background-color: red;
}
#box2 :nth-of-type(4) {
  background-color: greenyellow;
}
#box2 :only-of-type {
  text-align: left;
  font-size: medium;
  background-color: #fff;
}