一、链接形式

1、行内样式
写法：在网页元素上通过style=””属性

<div style="color: pink; margin-top: 10px;border: 1px solid blue">行内样式</div>

2、内部样式表
写法：在网页创建嵌入的样式表，写在里面

<head>
    <style>
        p{
            color:pink;
            border:blue 1px solid;
        }
    </style>
</head>

3、链入外部样式表
写法：网页引入外部样式表，外部创建一个css文件，在html中通过连接这个css文件，一般写在css前面

<link rel="stylesheet" type="text/css" herf="1.css">

二、各种选择器

css样式

/* 1、元素选择器 */
p {
  background-color: #ccc;
}
span {
  font-size: 24px;
}
a {
  color: red;
}
/* 2、类选择器 */
.title_0 {
  font-weight: bold;
}
.title_1 {
  color: green;
}
p.title_1 {
  color: red;
}
.title_2 {
  color: violet;
}
.title_3.title_4 {
  font-style: italic;
  font-size: 20px;
}
.title_5.title_6.title7 {
  font-style: italic;
  font-size: 20px;
  background-color: aqua;
}
/* 3、ID选择器 */
#title_8 {
  color: orange;
  font-weight: bold;
}
/* 4、分组选择器 */
.t1,
.t2,
.t3 {
  background-color: gray;
  color: #fff;
}
/* 下面这个是多类选择器，代表只要class=t1 t2 t3中的任意一个元素，
则class生效，与上面的分组选择要区分开。 
.t1.t2.t3{
  background-color: gray;
  color: #fff; 
}
*/
h1,
h2,
h3 {
  color: chocolate;
}
/* 5、属性选择器 */
*[title="aaaa"] {
  font-weight: bold;
  color: red;
}
span[title="aaaa"] {
  font-weight: bold;
  color: green;
}
div,
h3[title="hhhh"] {
  color: blue;
}
a[href][title="a"] {
  background-color: gray;
}
img[alt] {
  border: 5px solid red;
}
/* 6、后代选择器 */
h3 em{
    color: aqua;
}
ul em{
    background-color: aquamarine;
}
.left a:link{
    background-color: gray;
    color: white;
}
/* 7、子元素选择器 */
h4 > em{
    color: goldenrod;
}
/* 8、兄弟选择器 */
li + li {
    color:#ccc;
    font-weight: bold;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="0706.css" />
  </head>
  <body>
    <!-- 1、元素选择器 -->
    <p>p element selector - text content</p>
    <span>span element selector - text content</span>
    <br />
    <a href="#">a link element selector - text link</a>
    <hr />
    <!-- 2、类选择器 -->
    <div class="title_1">div title_1</div>
    <!-- 结合元素的类选择器 -->
    <p class="title_1">p title_1</p>
    <div class="title_2">div title_2</div>
    <!-- 多类选择器 -->
    <!-- 同时执行title_0 和 title_2样式 -->
    <div class="title_0 title_2">title_0 title_2</div>
    <!-- .title_3.title_4连接可执行样式，
    但是title_5与title_6.title7连接，而class中没有 title_6.title7 ，
    所以无法执行title_5样式 -->
    <div class="title_3 title_4 title_5">title_3 title_4 title_5</div>
    <hr />
    <!-- 3、ID选择器 -->
    <!-- ID选择器名称区分大小写，不能以数字开头 -->
    <div id="title_8">ID selector生效</div>
    <div id="Title_8">ID selector不生效</div>
    <hr />
    <!-- 4、分组选择器 -->
    <!-- 将多个具有相同规则的选择器放在一起，用逗号,隔开 -->
    <p class="t1">This is t1</p>
    <p class="t2">This is t2</p>
    <p class="t3">This is t3</p>
    <hr />
    <!-- 5、属性选择器 -->
    <!-- 元素中的任何属性都可以使用属性选择器，包含但不限于title\href\alt\src\url... -->
    <p title="aaaa">p aaaa</p>
    <span title="aaaa">span aaaa</span>
    <div title="hhhh">div hhhh</div>
    <h3 title="hhhh">h3 hhhh</h3>
    <a href="#" title="a">link text</a>
    <br />
    <a href="qq.com" title="hhhh">link text title=hhhh</a>
    <br />
    <img src="https://www.php.cn/static/images/logos.png" alt="aaaa" />
    <br />
    <img src="https://www.php.cn/static/images/logos.png" />
    <hr />
    <!-- 6、后代选择器 -->
    <!-- 后代选择器可以作为某元素后代的元素 -->
    <h3>this is a cup of<em>TEA</em></h3>
    <h2>this is a cup of<em>TEA</em></h2>
    <!-- 两个元素层次间隔是无限的，即继承的元素所在的嵌套深度可以是无限的 -->
    <ul>
      <li>
        <ol>
          <li>q</li>
          <li>q</li>
        </ol>
        <ol>
          <li><em>121212</em></li>
          <li>w</li>
        </ol>
        <ol>
          <li>w</li>
          <li><em>343434</em></li>
        </ol>
      </li>
    </ul>
    <div class="main">
      <div class="left">
        <a href="#">link link link link</a>
      </div>
    </div>
<hr>
    <!-- 7、子元素选择器 -->
    <!-- 缩小后代元素的范围，只选择某个元素的子元素 -->
    <!-- 下面的示例显示证明，第三个h4里面有span，而span才包含em，所以不生效 -->
    <h4><em>itema1</em></h4>
    <h4><em>itema2</em> <em>itema2</em></h4>
    <h4>
      <span><em>itema3</em></span>
    </h4>
<hr>
<!-- 8、兄弟选择器 -->
<!-- 选择紧接在另一元素后的元素，且二者有相同的父元素 -->
<div>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
    <ol>
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
      <li>List item 4</li>
    </ol>
  </div> 
</body>
</html>

效果图

批改老师：

PHPz

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

MarkDown常用语法与emmet常用语法

2022-07-04 12:52:54