首页 前端知识 CSS:样式

CSS:样式

2024-04-08 11:04:25 前端知识 前端哥 821 843 我要收藏

1. 引入方式

<!--

        方式一:行内式

            通过元素的style属性引入样式

            语法:style="样式1:值; 样式2:值; ... "

            缺点:1.代码复用率低,不利于维护。比如:定义多个相同的按钮要重复书写

                  2.css和html的代码交织一起,不利于阅读,影响文件大小,影响性能

    -->

<input type="button" value="按钮" style="width: 200px;
        height: 100px;
        background-color: aqua;
        font-size: 50px;
        font-family: 宋体;
        border: 2px solid greenyellow;" />

 <!--

        方式二:内嵌式

            通过在head标签中的style标签定义本页面的共用元素的样式

            通过选择器选择作用的元素(即在哪些元素有效)

    -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--在head标签中定义-->
    <style>
        /*元素选择器,通过标签名确定在哪些元素上生效*/
        input{
            width: 100px;
            height: 100px;
            font-size: 500;
            font-family: 微软雅黑;
            border: 5px solid red;
            background-color: rgb(0, 255, 179);
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <input type="button" value="小按钮" />
    <input type="button" value="小按钮" />
    <input type="button" value="小按钮" />
    <input type="button" value="小按钮" />
</body>

<!--

        方式三:外部引入

            将css代码放到一个文件中,哪个html文件需要用到就在头标签中使用link引用

                href:从哪个资源文件中引入

                rel: 相关参数(如:stylesheet)

    -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--在当前页面引入其他文件的css代码,href哪个资源 rel=引入style的代码需要stylesheet-->
    <link href="css/引入方式.css" rel="stylesheet"> 
</head>

 2. 选择器

<!--

            选择器一:标签名定义选择器

                语法:标签名{}

                缺点:某个按钮不想要里面的某个功能却不能修改,只能重新定义,代码冗余

    -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        input{
            /*字体、颜色、大小*/
            font-size: 30px;
            font-family: '宋体';
            color: rgb(18, 222, 100);
            background-color: aqua;
            border: 2px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <input type="button" value="按钮" />
    <input type="button" value="按钮" />
</body>

<!--

        选择器二:根据标签的id名定义选择器

            语法:#id名

            缺点:id一般唯一,根据id定义只能有一个元素符合

    -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        #niubi{
            /*字体、颜色、大小*/
            font-size: 30px;
            font-family: '宋体';
            color: blueviolet;
            background-color: blanchedalmond;
            border: 3px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <input type="button" id="niubi" value="方式二" />
</body>

<!--

        选择器三:根据元素的属性值确定class的样式

                一个元素可以有多个class值, 一个class样式可以被多个元素使用

            语法:.class{}

    -->

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
        .fontClass{
            font-size: 50px;
            font-family: '楷书';
        }
        .colorClass{
            color: black;
            background-color: blue;
        }
        .sizeClass{
            width: 300px;
            height: 200px;
        }
    </style>

</head>
<body>
        <input type="button" id="but1" class="fontClass colorClass sizeClass" value="方式三" />

</body>

3. 浮动、定位

 <!--

        浮动:float(浮动直接移动到框边界最左、右、上、下侧,无法精确定位)

        定位:

        position

            static   默认

            absolute 绝对:相对于浏览器界面进行位置定位

            relative 相对:相对于元素原本的位置进行定位

            fixed    相对:相对于浏览器窗口进行位置定位

                (如:position: fixed;

                     top:30px; left:30px;

                此时滑动浏览器界面但是该区域块仍保持在当前界面离顶部30,左边30像素的位置)

        left

        right

        top

        bottom

    -->

<head>
    <style>
        .but1{
            border: 3px solid rebeccapurple;
            background-color: aqua;
            //定位方式为:fixed
            position: fixed;
            //距离浏览器窗口顶部的边界30个像素
            top: 30px;
            //距离浏览器窗口最左侧的边界30个像素
            left: 30px;
        }
    </style>
</head>

 4. 盒子模型

<!--设置一个界面,里面包含三个小界面-->

    <!--

        设置外边距:margin

        设置内边距:padding

        边距的设置不会影响盒子的空间大小。如:设置一个盒子的外边距为10px,则盒子界限外的10个像素的空间

        内外边距的距离会以盒子的边界为线向内或者向外扩张

    -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
        .outDiv {
            width: 500px;
            height: 500px;
            background-color: antiquewhite;
        }
        .inDiv {
            float: left;
        }
        .font {
            font-size: 30px;
            font-family: '宋体';
        }
        .size {
            width: 100px;
            height: 100px;
        }
        .d1 {
            border: 2px solid;
            background-color: aqua;
            /*设置外边距的距离*/
            margin-right: 10px;
            margin-left: 20px;
            margin-top: 30px;
            padding-left: 10px;
            padding-top: 40px;
        }
        .d2 {
            border: 2px solid green;
            background-color: rgb(205, 123, 23);
            /*设置外边距的距离*/
            margin-left: 10px;
        }
        .d3 {
            border: 2px solid blue;
            background-color: blueviolet;
            /*若不指定方向则默认上下左右边距为10个像素*/
            margin: 10px;
        }
    </style>
</head>
<body>
    
    <div class="outDiv">
        <div class="inDiv font size d1">div1</div>
        <div class="inDiv font size d2">div2</div>
        <div class="inDiv font size d3">div3</div>
    </div>
</body>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4572.html
标签
评论
发布的文章

PostgreSQL 操作json/jsonb

2024-04-20 17:04:16

Excel转json的两种办法

2024-04-20 17:04:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!