HTML 笔记（1）

最新推荐文章于 2024-08-08 10:33:11 发布

shubmedea

最新推荐文章于 2024-08-08 10:33:11 发布

阅读量49

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/shubmedea/article/details/127374355

版权

HTML 只关注内容的语义特点：丑

css 层叠样式表

css主要部分选择器以及一条或者多条声明

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        P {
            color: red;
            font-size: 12px;
        /*修改了文字大小为12像素*/
        }
    </STYLE>
</head>
<body>
 <p>有点意思</p>

</body>
</html>

css样式书写格式

1 紧凑格式

color:red ; font-size:20px;

2 展开格式选择之

color:red

font-size:20px;

样式大小写小写，空格规范属性值前面冒号后面，保留一个空格选择器和大括号中间保留空格

css选择器

基础选择器

标签选择器（标签名）

类选择器样式点定义结构类（class）调用一个或多个开发最常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        .red{
            width: 100px;
            height: 100px;
            /*背景颜色*/
            background-color: red;
        }
        .green {
            width: 100PX;
            height: 100px;
            background-color: green;
        }
        .font35 {
            font-size: 35px;
        }
    </STYLE>
</head>
<body>
   <div class="red" >   红色</div>
   <div class="green">  绿色</div>
   <div class="red font35" >   红色</div>
</body>
</html>

复合选择器

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        .red{
            width: 100px;
            height: 100px;
            /*背景颜色*/
            background-color: red;
        }
        .green {
            width: 100PX;
            height: 100px;
            background-color: green;
        }
    </STYLE>
</head>
<body>
   <div class="red" >   红色</div>
   <div class="green">  绿色</div>
   <div class="red" >   红色</div>
</body>
</html>

id选择器样式#定义，结构id调用，只能调用一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
        #red {
            color: red;
        }
    </STYLE>
</head>
<body>
   <div class="red" >   红色</div>
   <div class="green">  绿色</div>
   <div id="red">   红色</div>
</body>
</html>

通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <STYLE>
       * {
           color: green;
       }
    </STYLE>
</head>
<body>
   <div >   红色</div>
  <span>wowoowwoow</span>
<ul>
    <li>jdhasdkjasj</li>
</ul>
</body>
</html>