css引入方式与选择器 - css

首页 > 博客列表 > css引入方式与选择器

博主信息

博文 41

粉丝 0

访问量 41706

专题推荐

更多>

css引入方式

引入外部样式表

 <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 外部样式表也叫公共样式表，可多个页面引用 -->
    <link rel="stylesheet" href="css/style.css" />
  </head>

内联样式

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 内联样式通过<style>标签声明，只应用于当前页面 */
        ul>li {
          background-color: chartreuse;
        }
    </style>
  </head>

style样式属性

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
  <!--style样式属性只作用于当前元素 -->
    <h1 style="color: red">css样式</h1>
  </body>

标签选择器

 /* 定义标签元素  */
 li {
    background-color: red;
}

上下文选择器

<style>
  ul li p {
      background-color: darkcyan;
}
</style>
<ul>
   <li>
        <dl>
            <dt>标签1</dt>
            </dl>
        <p>这里是一个P标签</p>
   </li>
   <li id="site">标签2</li>
   <li>标签3</li>
   <li class="top">标签4</li>
   <li>标签5</li>
   <li>标签6</li>
   <li>标签7</li>
   <li>标签8</li>
</ul>

子选择器

<style>
  ul>li {
      background-color: lemonchiffon;
}
</style>
<ul>
   <li>
        <dl>
            <dt>标签1</dt>
            </dl>
        <p>这里是一个P标签</p>
   </li>
   <li id="site">标签2</li>
   <li>标签3</li>
   <li class="top">标签4</li>
   <li>标签5</li>
   <li>标签6</li>
   <li>标签7</li>
   <li>标签8</li>
   <ul>
        <li>内容</li>
   </ul>
</ul>

<style>
 /* 根据类定义元素  */
 .top {
   background-color: blueviolet;
}
</style>
 <ul>
      <li>标签1</li>
      <li>标签2</li>
      <li>标签3</li>
      <li class="top">标签4</li>
      <li>标签5</li>
      <li>标签6</li>
      <li>标签7</li>
      <li>标签8</li>
    </ul>

id选择器

<style>
 /* 根据id定义元素  */
 #site {
   background-color: crimson;
}
</style>
<ul>
   <li>标签1</li>
   <li id="site">标签2</li>
   <li>标签3</li>
   <li class="top">标签4</li>
   <li>标签5</li>
   <li>标签6</li>
   <li>标签7</li>
   <li>标签8</li>
</ul>

一般同胞选择器

<style>
 .top ~ li {
   background-color: darkcyan;
}
</style>
<ul>
   <li>标签1</li>
   <li id="site">标签2</li>
   <li>标签3</li>
   <li class="top">标签4</li>
   <li>标签5</li>
   <li>标签6</li>
   <li>标签7</li>
   <li>标签8</li>
</ul>

相邻同胞选择器

<style>
 .top + li {
   background-color: darkcyan;
}
</style>
<ul>
   <li>标签1</li>
   <li id="site">标签2</li>
   <li>标签3</li>
   <li class="top">标签4</li>
   <li>标签5</li>
   <li>标签6</li>
   <li>标签7</li>
   <li>标签8</li>
</ul>

伪类选择器

定义第一个元素 :first-of-tpye

<style>
  /* 定义第一个元素  */
  ul > li:first-of-type {
  background-color: chocolate;
}
</style>

定义最后一个元素 :last-of-type

<style>
/* 定义最后一个元素  */
ul > li:last-of-type {
background-color: violet;
}
</style>

定义偶数元素 :nth-of-type(2n)

<style>
/* 定义偶数元素  */
ul > li:nth-of-type(2n) {
background-color: chocolate;
}
</style>

定义奇数元素 :nth-of-type(2n-1)

<style>
/* 定义奇数元素  */
ul > li:nth-of-type(2n-1) {
background-color: green;
}
</style>

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

第一次作业---html标签及元素

2020-12-09 11:29:36