8-13CSS

最新推荐文章于 2024-10-23 09:30:00 发布

原创最新推荐文章于 2024-10-23 09:30:00 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

实训专栏收录该内容

12 篇文章

订阅专栏

层叠样式表单<head>内写
规则：选择器{属性1：value1;属性2：value2;}
内嵌式

	<style type="text/css">
        #div {
            border: 10px red solid;
            width: 500px;
            height: 300px;
        }
    </style>
    <div id="div">
        CSS样式
    </div>

外联式

<link href="secondCSS.css" type="text/css" rel="stylesheet">

px | % 单位
标签选择器类选择器 ID选择器通配符选择器

	/* 标签选择器 */
      span {
        border: 10px red solid;
        width: 500px;
        height: 300px;
      }
      /* 类选择器 */
      .al {
        width: 300px;
        height: 200px;
        background-color: gray;
      }
      /* ID选择器 */
      #myul {
        width: 300px;
        height: 200px;
        border: 10px red solid;
        background-color: yellow;
      }
      #div {
        border: 10px red solid;
        width: 500px;
        height: 300px;
      }
      /* 通配符选择器 */
      * {
        font-size: 30px;
      }

全部小练习为

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Second</title>
    <!-- <link href="secondCSS.css" type="text/css" rel="stylesheet" /> -->

    <style type="text/css">
      /* 标签选择器 */
      span {
        border: 1px blue solid;
        width: 300px;
        height: 300px;
      }
      /* 类选择器 */
      .al {
        width: 300px;
        height: 200px;
        background-color: gray;
      }
      /* ID选择器 */
      #myul {
        width: 300px;
        height: 200px;
        border: 10px red solid;
        background-color: yellow;
      }
      #div {
        border: 10px red solid;
        width: 500px;
        height: 300px;
      }
      /* 通配符选择器 */
      * {
        font-size: 30px;
      }
    </style>
  </head>

  <body>
    <span>CSS测试</span>
    <hr />
    <div id="div">
      CSS样式
    </div>
    <hr />
    <div id="div2">
      css写的页面
    </div>
    <hr />
    <div class="al">
      <ul>
        <li>今天是周二</li>
        <li>今天是周二</li>
        <li>今天是周二</li>
      </ul>
    </div>
    <hr />
    <div id="myul">
      <ul>
        <li>今天是周二</li>
        <li>今天是周二</li>
        <li>今天是周二</li>
      </ul>
    </div>
  </body>
</html>