2.css

一.定义位置和方式

代码：

base.css

h3{
    color: blue;
}

css1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="base.css" type="text/css" rel="stylesheet">
    <style>
        h2{
            color: aqua;
        }
    </style>
</head>
<body>
      <!-- css 行内样式 -->
      <h1 STYLE="color: red">这是H1</h1>
      <!-- css 内联样式 -->
      <h2>这是H2</h2>
      <!-- css 外联样式 -->
       <h3>这是H3</h3>
</body>
</html>

　　

即可

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <link href="base.css" type="text/css" rel="stylesheet">
    <style>
        h2{
            color: aqua;
        }
        #y1{
            color: red;
        }
        .y2{
            color: greenyellow;
        }
    </style>
</head>
<body>
      <!-- css 行内样式 -->
      <h1 STYLE="color: red">这是H1</h1>
      <!-- css 内联样式 -->
      <h2>这是H2</h2>
      <!-- css 外联样式 -->
       <h3>这是H3</h3>


      <h1 id="y1">这是id选择器</h1>
      <h1 class="y2">这是class选择器</h1>
</body>
</html>

　　

即可

 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css2</title>
    <style>
        .div1{
            color: red;
        }
        .div2{
            color: green;
        }
        .myclass{
            font-size: 28px;
        }
    </style>
</head>
<body>
<div class="div1">这是div1
    <div class="div2 myclass">这是div2</div>
    <div class="div3">这是div3</div>
</div>
</body>
</html>

　　效果

即可

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css2</title>
    <style>
        .div1{
            color: red;
        }
        .div2{
            color: green;
        }
        .myclass{
            font-size: 28px;
            color: blueviolet;
            text-align: center;
            text-decoration: line-through;
        }
        .div3 a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="div1">这是div1
    <div class="div2 myclass">这是div2</div>
    <div class="div3"><a href="http://www.baidu.com">这是div3</a></div>
</div>
</body>
</html>
text-decoration: none; 可以用作<a>标签去掉下划线

即可

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #myid{
            display: none;
        }
        .myc1{
            width: 400px;
            height: 200px;
            color: black;
            background-color: red;
        }
        .c2{
            color: greenyellow;
            border: 1px solid;
            margin: 20px ;
            padding: 20px ;
        }
        .c3{
            color: green;
            border: 1px solid;
        }
        .c4{
            background-color: aqua;
            border: dashed;
            height: 100px;
        }
        .c5{
            background-image: url("mei.jpeg");
            height: 150px;
        }
    </style>
</head>
<body>
<h1 id="myid">这是H1</h1>
<div class="myc1">
    这是盒子div
</div>
<div class="c2">
    这是盒子的margin和padding
</div>
<div class="c3">
    这是盒子的margin和padding的对比
</div>
<div class="c4">
    盒子边框和背景
</div>
<div class="c5">
    背景图片
</div>
</body>
</html>

　　效果

即可

posted @ 2021-08-15 19:21  从此重新定义啦  阅读(52)  评论(0)    收藏  举报