HTML5基础（day4）

最新推荐文章于 2024-09-21 23:59:03 发布

澈如冬雪^

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量70

点赞数 1

文章标签： html5 css html

本文链接：https://blog.csdn.net/m0_52372037/article/details/128509256

版权

一、学会查阅文档

在这里插入图片描述

二、css层叠样式表

1.

（1）HTML的局限性

在这里插入图片描述

（2）css-网页的美容师

在这里插入图片描述

2.css语法规范

在这里插入图片描述

3.css代码风格

在这里插入图片描述

示例

 <title>体验css语法规范</title>
    <style>
        /* 选择器 {样式} */
        /* 给谁改样式  {改什么样式} */
        p {
            color: pink;
            /* 修改了文字大小为12像素 */
            font-size: 12px;
        }

    </style>
</head>
<body>
    <p>有点意思</p>
</body>

4.css选择器的作用

在这里插入图片描述

5.选择器分类

在这里插入图片描述

6.css基础选择器

（1）标签选择器

在这里插入图片描述

示例

<title>基础选择器之标签选择器</title>
     <!-- 标签选择器 : 写上标签名 -->
     <style>
        p {
            color: green;
        }
        div {
            color: pink;
        }

     </style>
     
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div> 
</body>

（2）类选择器

（a）

在这里插入图片描述

示例

 <title>基础选择器之类选择器</title>
<style>
    /* 类选择器口诀: 样式点定义 结构类(class)调用 一个或多个 开发最常用 */
    .pink {
        color: pink;
    }
</style>
</head>
<body>
    <ul>
        <li class="pink">玫瑰</li>
        <li>月季</li>
        <li>山茶</li>
        <li>梅花</li>
        <li class="pink">桔梗</li>
    </ul>
    <div class="pink">真诚与炽热</div>
</body>

（b）类选择器-多类名

在这里插入图片描述

示例

 <title>多类名的使用方式</title>
     <style>
        .pink {
            color: pink;
        }
        .font66 {
            font-size: 66px;
        }
     </style>
</head>
<body>
    <div class="pink font66">滑雪</div>
</body>

三个盒子

在这里插入图片描述

示例

<title>利用类选择器画三个盒子</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            font-size: 30px;
        }
        .lavender {
            
            /* 背景颜色 */
            background-color: lavender; 
        }
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="lavender box">浅紫色</div>
    <div class="pink box">粉色</div>
    <div class="lavender box">浅紫色</div>
</body>

（3）id选择器

在这里插入图片描述
在这里插入图片啊啊描述

示例

 <title>基础选择器之id选择器</title>
    <style>
        /* id选择器的口诀:样式#定义 结构id调用，只能调用一次，别人切勿使用 */
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">雪花</div>  
</body>

（4）通配符选择器

在这里插入图片描述

示例

<title>基础选择器之通配符选择器</title>
    <style>
        * {
            color: tomato;
        }
        /* * 这里把 html span div li body 等等的标签都改为了番茄红 */
    </style>
</head>
<body>
    <div>晴天</div>
    <span>阴天</span>
    <ul>
        <li>多云</li>
    </ul>
</body>