Java的开篇入门------------------CSS（一）

最新推荐文章于 2024-07-23 14:51:29 发布

码农(学习版)

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量134

点赞数 5

分类专栏： HTMl+CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Lebly/article/details/134238273

版权

HTMl+CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

什么是CSS？CSS是用来干什么？我们之前学的HTML是否能用得到？

什么是CSS？CSS是用来干什么？我们之前学的HTML是否能用得到？

所谓CSS（Cascading Style Sheet），中文名称叫做层叠样式表，它不是一门编程语言，而是一门样式表语言。它呢，说白了就是专门为HTMl而生的，自它出生以来，一心一意的修饰HTML,可以说CSS就是HTML的化妆品。

那么们问之前学的HTML是否能用的到？是否就明白了呢？

那么，在CSS中应该怎么去实现？

3.1 嵌入式样式

第一种方式：内联方式
第二种方式：定义内部样式块
第三种方式：链接外部样式表文件（常用）

3.2 标签选择器

标签选择器{

属性：属性值

...

}

<!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>
        div {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </Style>
</head>
<body>
    <div>
        <h1>我是标题1</h1>
    </div>
</body>
</html>

作用：标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。

3.3 类选择器

.类名 {

        属性1: 属性值1;

        ...

}

<!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>
        .box {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </Style>
</head>
<body>
    <div>
        <h1 class="box">我是标题1</h1>
    </div>
</body>
</html>

3.4 id选择器

#id名 {

属性1: 属性值1;

...

}

<!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>
        #box {
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </Style>
</head>
<body>
    <div>
        <h1 id="box">我是标题1</h1>
    </div>
</body>
</html>

属性只能在每个 HTML 文档中出现一次（id选择器一般与JavaScript搭配使用）

3.5 属性选择器

1. [属性]{ }

2. [属性=属性值]{ }

3. [属性$=属性值]

3.6 常用布局

常用的布局分为以下5点，分别是：

1.盒子模型

2.浮动（float）

3.定位（position）

4.弹性布局（flex）

5.过渡与动画

接下来就一一讲解

3.6.1 盒子模型

首先，是盒子的组成。一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。content是html中的。

盒子的大小

盒子的大小指的是盒子的宽度和高度。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

另一种情况下可以控制盒子大小

box-sizing属性值
content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Title</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>
（可以去浏览器的F12查看样式，其中就会发现下边有盒子模型样式图）
</body>
</html>

3.6.2 浮动（float）

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

选择器 { float: 属性值;}

属性	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素像右浮动

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>什么是浮动</title>
    <style>
        .left,
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="left">左青龙</div>
    <div class="right">右白虎</div>
</body>

</html>

浮动的特性（重难点）

加了浮动之后的元素，会具有很多特性。

浮动元素会脱离标准流（脱标）
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性

3.6.3 定位

position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）。

一、position: static

HTML 元素默认情况下的定位方式为 static（静态）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position定位</title>
    </head>
    <style>
        div {
            position: static;
            border: 3px solid #73AD21;
            text-align: center;
        }
    </style>
    <body>
        <div>
            <h2>《游子吟》</h2>
            <p>慈母手中线，游子身上衣。</p>
            <p>临行密密缝，意恐迟迟归。</p>
            <p>谁言寸草心，报得三春晖。</p>
        </div>
    </body>
</html>

二、position: relative

position: relative; 的元素相对于其正常位置进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position定位</title>
    </head>
    <style>
        div {
            position: relative;
            left: 30px;
            border: 3px solid #73AD21;
            text-align: center;
        }
    </style>
    <body>
        <div>
            <h2>《游子吟》</h2>
            <p>慈母手中线，游子身上衣。</p>
            <p>临行密密缝，意恐迟迟归。</p>
            <p>谁言寸草心，报得三春晖。</p>
        </div>
    </body>
</html>

三、position: fixed

position: fixed; 的元素是相对于视口定位的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position定位</title>
    </head>
    <style>
        div {
            text-align: center;
        }
 
        span {
            position: fixed;
            bottom: 0;
            right: 0;
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            border: 3px solid #73AD21;
        }
    </style>
    <body>
        <div>
            <h2>《游子吟》</h2>
            <p>慈母手中线，游子身上衣。</p>
            <p>临行密密缝，意恐迟迟归。</p>
            <p>谁言寸草心，报得三春晖。</p>
        </div>
    </body>
</html>

四、position: absolute

position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位</title>
    </head>
    <style>
        div.relative {
            position: relative;
            width: 400px;
            height: 200px;
            border: 3px solid #8faaa2;
        }
 
        span.absolute {
            position: absolute;
            top: 30px;
            right: 10px;
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            border: 3px solid #55aa7f;
        }
    </style>
    <body>
        <div class="relative">
            <h2>《游子吟》</h2>
            <p>慈母手中线，游子身上衣。</p>
            <p>临行密密缝，意恐迟迟归。</p>
            <p>谁言寸草心，报得三春晖。</p>
            <span class="absolute">点赞!</span>
        </div>
    </body>
</html>

五、position: sticky

position: sticky; 的元素根据用户的滚动位置进行定位。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position定位</title>
    </head>
    <style>
        div.sticky {
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            padding: 5px;
            background-color: #cae8ca;
            border: 2px solid #4CAF50;
        }
    </style>
    <body>
        <p>请试着在这个框架内<b>滚动</b>页面，以理解粘性定位的原理。</p>
 
        <div class="sticky">我是有粘性的！</div>
 
        <div style="padding-bottom:2000px">
            <p>在此例中，当您到达元素的滚动位置时，粘性元素将停留在页面顶部（top: 0）。</p>
            <p>向上滚动以消除粘性。</p>
            <p>一些启用滚动的文本.. Lssorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
                altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
                repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
            <p>一些启用滚动的文本.. Lssorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum,
                altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
                repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
        </div>
 
    </body>
</html>

码农(学习版)

关注

5
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java的开篇入门------------------CSS（一）

所谓CSS（），中文名称叫做层叠样式表，它不是一门编程语言，而是一门样式表语言。它呢，说白了就是专门为HTMl而生的，自它出生以来，一心一意的修饰HTML,可以说CSS就是HTML的化妆品。那么们问之前学的HTML是否能用的到？是否就明白了呢？
复制链接

扫一扫