Css学习

最新推荐文章于 2024-09-15 19:00:01 发布

gplili

最新推荐文章于 2024-09-15 19:00:01 发布

阅读量150

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/gplili/article/details/113793555

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

CSS

概念

Cascading Style Sheets 层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效

使用方法

css和html结合方式：
在这里插入图片描述

Css的语法

在这里插入图片描述

选择器

选择具有相似特征的元素。一般分为基础选择器和扩展选择器。
基础选择器的示例代码：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
    <style>
        /*id选择器*/
        #div1 {
            color: blue;
        }

        /*元素选择器 id选择器优先级高于元素选择器*/
        div {
            color: gold;
        }

        /*类选择器*/
        .cls1 {
            color: aqua;
            font-size: 40px;
        }
    </style>

</head>
<body>
<div id="div1">来来来</div>
<div>一起恰饭</div>

<p class="cls1">
    想成为黑马程序员,在这上面下赌注,自己本身就很喜欢
</p>
</body>
</html>

在这里插入图片描述

扩展选择器的示例代码:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        div p {
            color: gold;
        }

        /*此处是让div有边框*/
        div > p {
            border: aqua solid;
        }

        input[type='text'] {
            border: 6px solid;
        }

        /*超链接，伪类选择器*/
        a:link {
            color: gold;
        }

        a:visited {
            color: darkorange;
        }

        a:hover {
            color: green;
        }

        a:active {
            color: antiquewhite;
        }

    </style>
</head>
<body>
<div>
    <p>
        来来来,准备吃饭了
    </p>
</div>
<!--要有p标签才会被子选择器和父选择器选中-->

<div>这么快,肚子确实有点饿了</div>

<!--属性选择器一般选择的是input标签-->
<input type="text">
<input type="password">
<br>

<a href="#">
    黑马程序员
</a>

</body>
</html>

在这里插入图片描述

属性

在这里插入图片描述

字体属性

<!DOCTYPE html>
<html lang="en">
<!--遇到问题：div边框出现两次，只定义过一次。-->
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p {
            color: red;
            font-size: 30px;
            text-align: center;
            line-height: 300px;

            /**
            border：边框
             */
            border: 1px solid red;
        }

        .div2 {
            border: 1px solid red;
            /**
            尺寸
             */
            height: 200px;
            width: 200px;
            /**
            背景
             */
            background: url("../image/banner_1.jpg") no-repeat;
        }
    </style>
</head>

<body>


<div class="div1"><p>小鹏到此一游
</p></div>

<div class="div2"></div>
</body>

</html>

在这里插入图片描述

⭐盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div {
            border: 1px solid red;
            width: 200px;
        }

        .div1 {
            width: 100px;
            height: 100px;
            /*margin: 50px;*/
        }

        .div2 {
            width: 200px;
            height: 200px;
            padding: 50px;
            /**
            盒子的大小不会随着padding的变化而变化
             */
            box-sizing: border-box;
        }

        .div3 {
            float: left;
        }

        .div4 {
            float: left;
        }

        .div5 {
            float: left;
        }
    </style>
</head>

<body>
<div class="div2">
    <div class="div1">

    </div>
</div>
<div class="div3">aaaaaa</div>
<div class="div4">bbbbbb</div>
<div class="div5">cccccc</div>
</body>

</html>