CSS 样式

一. CSS

CSS 层叠样式表(Cascading Style Sheets)：能够对网页中元素的排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，简单来说，美化页面

二. CSS的引入方式

行内式：通过元素开始标签的 style 属性注入，语法为 style="样式名：样式值;样式名：样式值;"

<input
    type="button"
    value="按钮"
    style="
        display: block; width: 60px;
        height: 40px; background-color: rgb(140, 235, 100);
        color: white; border: 3px solid green;
        font-size: 22px; font-family: '隶书';
        line-height: 30px; border-radius: 5px;
"/>

缺点

html 代码和 css 样式代码交织在一起，增加阅读难度和维护成本

css 样式代码仅对当前元素有效，代码重复量高，复用度低

内嵌式：在 head 标签中通过 style 标签引入，这里要使用选择器确定样式的作用位置

<head>
    <meta charset="UTF-8">
    <style>
        /*选择器*/
        input {
             display: block; width: 80px;
            height: 40px; background-color: rgb(140, 235, 100);
             color: white; border: 3px solid green;
            font-size: 22px; font-family: '隶书';
            line-height: 30px; border-radius: 5px;
         }
    </style>
</head>
<body>
    <input type="button" value="按钮1"/>
    <input type="button" value="按钮2"/>
    <input type="button" value="按钮3"/>
    <input type="button" value="按钮4"/>
</body>

内嵌式样式需要在 head 标签中，通过一对 style 标签定义 CSS 样式

CSS 样式的作用范围控制要依赖选择器

CSS 的样式代码中注释方式为 /* */

缺点

内嵌式虽然对样式代码做了抽取，但是 CSS 代码仍然在 HTML 文件中

内嵌样式仅仅能作用于当前文件，代码复用度还是不够，不利于网站风格的统一

连接式 / 外部样式表：将 CSS 代码单独放入 css 样式文件，在 head 标签中通过 link 标签引入外部样式表

可以在项目中单独创建 css 样式文件，专门用来存放 css 样式代码

在 head 标签中，通过 link 标签引入外部 CSS 样式即可

<head>
    <meta charset="UTF-8">
    <link href="css样表/css1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <input type="button" value="按钮1"/>
    <input type="button" value="按钮2"/>
</body>

CSS 样式代码从 html 文件中剥离，有利于代码的维护

CSS 样式文件可以被多个不同的 html 引入，有利于网站风格的统一

三. CSS选择器

元素选择器

<head>
    <meta charset="UTF-8">
    <style>
    input {
            display: block; width: 80px;
            height: 40px; background-color: rgb(140, 235, 100);
            color: white; border: 3px solid green;
            font-size: 22px; font-family: '隶书';
            line-height: 30px; border-radius: 5px;
        }
     </style>
</head>
<body>
    <input type="button" value="按钮1"/>
     <button>按钮5</button>
</body>

根据标签名确定样式的作用范围

语法为：元素名{}

样式只能作用到同名标签上。其他标签不可用

相同的标签未必需要相同的样式，会造成样式的作用范围太大

id 选择器

<head>
    <meta charset="UTF-8">
    <style>
    #btn1 {
        display: block; width: 80px;
        height: 40px; background-color: rgb(140, 235, 100);
         color: white; border: 3px solid green;
        font-size: 22px; font-family: '隶书';
         line-height: 30px; border-radius: 5px;
    }
    </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮1"/>
    <input id="btn2" type="button" value="按钮2"/>
    <input id="btn3" type="button" value="按钮3"/>
     <input id="btn4" type="button" value="按钮4"/>
    <button id="btn5">按钮5</button>
</body>

根据元素 id 属性的值确定样式的作用范围

语法为： #id值 {}

id 属性的值在页面上具有唯一性，所有 id 选择器也只能影响一个元素的样式

因为 id 属性值不够灵活，所以使用该选择器的情况较少

class 选择器

<head>
     <meta charset="UTF-8">
     <style>
    .shapeClass {
         display: block;
        width: 80px;
        height: 40px;
        border-radius: 5px;
    }
    .colorClass{
        background-color: rgb(140, 235, 100);
         color: white;
        border: 3px solid green;
    }
     .fontClass {
        font-size: 22px;
         font-family: '隶书';
    line-height: 30px;
    }
     </style>
</head>
<body>
<input class ="shapeClass colorClass fontClass"type="button" value="按钮1"/>
<input class ="shapeClass colorClass" type="button" value="按钮2"/>
<input class ="colorClass fontClass" type="button" value="按钮3"/>
<input class ="fontClass" type="button" value="按钮4"/>
<button class="shapeClass colorClass fontClass" >按钮5</button>
</body>

根据元素 class 属性的值确定作用范围

语法为 .class值{}

class 属性值可以有一个，也可以有多个，多个不同的标签也可以是使用相同的 class 值

多个选择器的样式可以在同一个元素上进行叠加

因为 class 选择器非常灵活，所以在 css 中，使用该选择器的情况较多

四. CSS 浮动

CSS 的 Float（浮动）使元素脱离文档流，按照ܶ定的方向（左或右发ࣿ生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止

浮动设计的初衷为了解决文字环绕图片的问题，浮动后一定不会将文字挡住，这是设计初衷

文档流是文档中可显示对象在排列时所占用的位置 / 空间，而脱离文档流就是页面中不占位置了

浮动的演示 float 常见值

通过代码感受浮动的效果：

<head>
    <meta charset="UTF-8">
    <style>
     .outerDiv {
        width: 500px;
        height: 300px;
        border: 1px solid green;
        background-color: rgb(230, 224, 224);
    }
    .innerDiv{
        width: 100px;
         height: 100px;
        border: 1px solid blue;
         float: left;
    }
    .d1{
        background-color: greenyellow;
        /* float: right; */
    }
    .d2{
        background-color: rgb(79, 230, 124);
        /* float: right; */
    }
    .d3{
         background-color: rgb(26, 165, 208);
        /* float: right; */
    }
     </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
        <div class="innerDiv d3">框3</div>
    </div>
</body>

五. CSS 定位

position 属性指定了元素的定位类型

静态定位 static，不设置的时候默认值就是 static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列

<head>
     <meta charset="UTF-8">
    <style>
    .innerDiv{
         width: 100px;
         height: 100px;
    }
    .d1{
         background-color: rgb(166, 247, 46);
         position: static;
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
    </style>
</head>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
     <div class="innerDiv d3">框3</div>
</body>

绝对定位 absolute，通过 top left bottom right 指定元素在页面上的固定位置，定位后元素会让出原来位置，其他元素可以占用

<head>
     <meta charset="UTF-8">
    <style>
    .innerDiv{
         width: 100px;
         height: 100px;
    }
    .d1{
         background-color: rgb(166, 247, 46);
         position: absolute;
        left:300px
        top:100px
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
    </style>
</head>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
     <div class="innerDiv d3">框3</div>
</body>

相对定位 relative，相对于自己原来的位置进行定位，定位后保留原来的站位，其他元素不会移动到该位置

<head>
     <meta charset="UTF-8">
    <style>
    .innerDiv{
         width: 100px;
         height: 100px;
    }
    .d1{
         background-color: rgb(166, 247, 46);
         position: relative;
        left:30px
        top:30px
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
    </style>
</head>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
     <div class="innerDiv d3">框3</div>
</body>

固定定位 fixed ，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置，其他元素可以占用

<head>
     <meta charset="UTF-8">
    <style>
    .innerDiv{
         width: 100px;
         height: 100px;
    }
    .d1{
         background-color: rgb(166, 247, 46);
         position: fixed;
        left:30px
        top:30px
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
    </style>
</head>
<body>
    <div class="innerDiv d1">框1</div>
    <div class="innerDiv d2">框2</div>
     <div class="innerDiv d3">框3</div>
</body>

六. 盒子模型

所有 html 元素可以看作盒子，在 CSS 中，" box model " 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距（margin），边框（border），填充（padding）和实际内容（content）

Margin(外边距) - 清除边框外的区域，外边距是透明的

Border（边框）- 围绕在内边距和内容外的边框

Padding（内边距）- 清除内容周围的区域，内边距是透明的

Content（内容）- 盒子的内容，显示文本和图像

<head>
     <meta charset="UTF-8">
    <style>
    .outerDiv{
         width: 800px;
         height: 300px;
         border: 1px solid green;
         margin: 0px auto;
    }
    .innerDiv{
         width: 100px;
         height: 100px;
         border: 1px solid blue;
         float: left;
         /*margin-top: 10px;
         margin-right: 20px;
         margin-bottom: 30px;
         margin-left: 40px;*/
         margin: 10px 20px 30px 40px;
    }
    .d1{
         background-color: rgb(166, 247, 46);
         /*margin-top: 10px;
         margin-right: 20px;
         margin-bottom: 30px;
         margin-left: 40px;*/
         margin: 10px 20px 30px 40px;
    }
    .d2{
        background-color: rgb(79, 230, 124);
    }
    .d3{
        background-color: rgb(26, 165, 208);
    }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">框1</div>
        <div class="innerDiv d2">框2</div>
         <div class="innerDiv d3">框3</div>
    </div>
</body>

posted @ 2024-03-26 16:39 pine1203 阅读(13) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

pine1203

CSS 样式

公告