自学前端——CSS篇

小刘要奋斗.

已于 2024-06-18 16:33:04 修改

阅读量919

点赞数 6

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

于 2024-06-18 16:30:48 首次发布

本文链接：https://blog.csdn.net/weixin_72534943/article/details/139755494

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS简介

什么是CSS？

CSS全名是'Cascading Style Sheets'，中文名‘层叠样式表’。

用于定义网页样式和布局的样式语言。

通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。

CSS与HTML的关系

举个例子，形象的描述他俩的关系。

CSS与HTML的关系就好比建筑与装修，HTML就相当于是我们这个房子的骨架，也就是框架。定义了房子的基本结构，包括墙壁，门框、承重墙，窗户、楼梯的位置。CSS样式就相当于房子的装修，就比如墙壁想设计的什么颜色，吊灯想设计什么样子，门的样式，窗户的形状，家具的摆放等等。

CSS语法

CSS通常由选择器、属性和属性值组成，多个规则可以组合在一起，以便同时应用多个样式。

选择器{  
         属性1：属性值1;   
         属性2：属性值2;
}

1.选择器声明中可以写无数条属性

2.声明的每一行属性，都需要以英文分号结尾;

3.声明中的所有属性和值都是以键值对的这种形式出现的;

示例：

/*这是一个p标签选择器 */
p{
	color: blue;//改变p标签中的字体颜色
	font-size: 16px; //改变p标签中的字体大小
}

CSS三这种导入方式

下面是三种常见的css导入方式:

1.内联样式（Inline Styless）：把CSS样式直接放在HTML元素的标签中，可以直接在style属性中直接定义样式

2.内部样式表（Internal Stylesheet）：在HTML 这个文档的head标签中定义

3.外部样式表（External Stylesheet）：把CSS样式单独放在一个CSS文件中，在head标签中使用另一个标签把它链接到这个HTML文档中，可以在多个页面上重复使用相同的样式。

三种导入方式的优先级：内联样式>内部样式表>外部样式表

优先级高的会覆盖优先级低的样式

以下是上述CSS语法的代码区块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css 导入方式</title>
    <link rel="stylesheet" href="CSS\style.css">/导入h3外部文件的相对路径
    
    <style>
        p{
            color: blue;
            font-size: 16px;
        }
        h2{
            color: green;
        }
    </style>

</head>
<body>
   <p>这是一个应用了css样式的文本</p>
   <h1 style="color: red;">这是一个一级标题标签,使用内联样式</h1>
   <h2>这是一个二级标题，应用内联样式</h2>
   <h3>这是一个三级标题，应用外部样式</h3>/需要建立一个外部文件定义h3的字体颜色，然后导入


</body>
</html>

选择器

选择器是CSS中的关键部分，它允许你针对特定元素或一组元素定义样式

元素选择器：选择特定的元素

类选择器：根据类名选择

ID选择器：根据ID选择

通用选择器：对所有的元素进行选择

子元素选择器：选择直接位于父元素内部的子元素。（嵌套，用大标签嵌套小标签）

后代选择器（包含选择器）：

并集选择器（兄弟选择器）：选择同一级别下的元素中的紧跟在咱们这个选中元素它之后的这第一个p标签

伪类选择器：选择这个HTML文档的元素的特定状态或者位置，不仅仅是元素本身的属性，伪类选择器以冒号开头，通常呢就是给用户交互文档结构或者其他条件下的元素应用样式

伪元素选择器：用于创建一个虚拟元素并且样式化他们，而不是选择实际存在的元素，以双冒号开头

CSS中常见的选择器种类代码示例如下：

<style>
        /* 元素选择器 */
        h2{
            color: aqua;
        }
        /* 类选择器 */
        .highlight{
            background-color:yellow;
        }     
        /* ID选择器 */
        #header{
            font-size: 35px;
        }
        /* 通用选择器 */
        * {
            font-family: 'kaiti';
            font-weight: bolder;
        }
        /* 子元素选择器 */
        .father > .son {
            color: greenyellow;
        }
        /* 后代选择器 */
        .father p{
            color: brown;
            font-size: large;
        }
        /* 相邻元素选择器 */
        h3 + p {
            background-color: red;
        }
        /* 伪类选择器 */
        #element:hover{
            background-color: blueviolet;
        }
        /* 
        选中第一个子元素 :first-child
        选中第n个子元素  :nth-child()
        链接的一个状态   :active
        */
        /* 伪元素选择器
          ::after
          ::before
          在选择元素之后，插入相应的内容
        */

    </style>
</head>
<body>
    <h1>不同类型的 css 选择器</h1>

    <h2>这是一个元素选择器示例</h2>

    <h3 class="highlight">这是一个类选择器示例</h3>
    <h3>这是另一个类选择器示例</h3>
    
    <h4 id="header">这是一个id选择器示例</h4>

    <div class="father">
        <p class="son">这是一个子元素选择器示例</p>
        <div>
            <p class="grandson">这是一个后代选择器示例</p>
        </div>
    </div>
    <p>这是一个普通的p标签</p>
    <h3>这是一个相邻兄弟选择器示例</h3>
    <p>这是另一个p标签</p>

    <h3 id="element">这是一个伪类选择器示例</h3>
</body>
</html>

CSS常用的属性

line-helight属性：调节行于行之间的距离。

以下为块元素、行内元素、行内块元素的代码示例：

  <style>
        /* 块元素 */
        .block{
            background-color: aqua;
            width: 200px;
            height: 100px;
        }
        /*行内元素不能添加高度和宽度，因为行内元素的高度和宽度是由它包含的内容所决定的  */
        .inline{
            background-color: brown;

        }
        /*行内块元素  */
        .inline-block{
            width: 500px;
            height: 300px;
        }
        /* 将div标签转换为行内元素 */
        .div-inline{
            display: inline;
            background-color: aquamarine;
        }
        /* 将span标签转换为行内块元素 */
        /* .span-inline-block{
            display: inline-block;
            background-color: blueviolet;
            width: 300px;
        } */
        /* 将span标签转换为块级元素 */
        .span-inline-block{
            display: block;
            background-color: blueviolet;
            /* width: 300px; */
        }
    </style>

</head>
<body>
    <h1 style="font: bolder 50px 'kaiti';">这是一个 font 复合属性示例</h1>
    <p style="line-height: 40px;">这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本</p>
	(style="line-height: 40px;//调整行间距)
    <div class="block">这是一个块级元素</div>
    <span class="inline">这是一个行内元素</span>
    <img src="logo.jpg" alt="" class="inline-block">
    <img src="logo.jpg" alt="" class="inline-block">
    <!-- 块元素、行内元素、行内块元素这三者是可以转化的，用到display这个元素 -->
    <h2>display</h2>
    <div class="div-inline">这是一个转换成行内元素的 div 标签</div>
    <span class="span-inline-block">这是一个转换成行内块元素的 span 标签</span>

</body>




</html>

盒子模型

常用于基本布局的基本概念，它就描述了文档中的每个元素都可以被看成一个矩形的盒子，这个盒子包含了内容（content）、内边距（padding）、文本边框（border）、外边距（margin）。

盒子模型的相关属性

属性名说明

内容（content）盒子包含的实际内容，比如文本、图片等。

内边距（padding）围绕在内容的内部，是内容与边框之间的空间。可以使用'padding'属性来设置

文本边框（border）围绕在内边距的外部，是盒子的边界。可以使用'border'属性来设置

外边距（margin）围绕在边距的外部，是盒子与其他元素之间的空间。可以使用'margin'属性来设置

以下是盒子模型代码示例：

<style>
        .boder-dome{
            background-color: yellow;
            width: 300px;
            height: 200px;
            border-style: solid;
            /* 添加边框 */
            border-width: 10px ;
            /* 设置宽度 ，宽度设置遵循上右下左的顺序*/
            border-color: blueviolet;
            /* 边框颜色 */
            /* border-left 可以之间利用这个符合属性直接设置边框，宽度，颜色 */
            padding: 10px;
            margin: 40px;
        }
        .dome{
            background-color: aqua;
            display: inline-block;
            border: 5px solid yellowgreen;
            /* 内边距 */
            padding: 50px;
            /* 外边距 */
            margin: 40px;          
        }    
    </style>
</head>
<body>
<div class="dome">B站搜索小刘</div>
<div class="boder-dome">这是一个边框的示例</div>  
</body>

浮动

传统的网页布局方式

网页布局方式有以下五种：

标准流（普通流、文档流）：网页按照元素的书写顺序依次排列

浮动

定位

'Flexbox'和'Grid'（自适应布局）

'标准流'是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素。

浮动

元素脱离文档流，根据开发者的意向漂浮到网页的任意方向。

'浮动'属性用于创建浮动边框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框边缘，这样即可使得元素进行浮动。

语法：

选择器{
	float: left/right/none;
}

注意：浮动是相对于父元素浮动，只会在父元素的内部移动。

浮动的三大特性

脱标：脱离标准流。

一行显示，顶部对齐

具备行内块元素特性

代码示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动</title>
    <style>
        .father{
            background-color: aquamarine;
            height: 150px;
            border:3px solid brown;
            /* 清除浮动 */
            /* overflow: hidden; */            
        }
        /* 伪元素清除法 */
        .father::after{
            content: "";
            display: table;
            clear: both;
        }
        .left-son{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            float: left;
        }
        .right-son{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left-son">左浮动</div>
        <div class="right-son">右浮动</div>
    </div>
    
</body>
</html>

定位

定位布局可以精确定位，但缺乏灵活性

定位方式：

'相对定位'：相当于元素在文档流中的正常位置进行定位。

'绝对定位'：相当于其最近的已定位祖先元素进行定位，不占据文档流。

'固定定位'：相当于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而移动。

通常相对定位用于微调元素的位置，而绝对定位和固定定位用于创建更复杂的布局

代码示例：

<title>定位</title>
    <style>
        /* 添加样式 */
        .box1{
            height: 350px;
            background-color: aqua;
        }
        .box-normal{
            width: 100px;
            height: 100px;
            background-color: purple;
        }
        .box-relativ{
            width: 100px;
            height: 100px;
            background-color: pink;
            /* 将这个元素改为相对定位 ，虽然改为相对定位，但还没有改变他的位置，而且相对定位的元素，
            并不会脱离我们正常的文档流*/
            position: relative;
            /* 改变位置使用left、right、top、bottom */
            /* 偏离左，向右移动 */
            left: 120px;
            /* 向下移 */
            top: 40px;
        }
        .box2{
            height: 350px;
            background-color: yellow;
            /* 添加外边距 */
            margin-bottom: 300px;
        }
        .box-absolute{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            /* 修改为绝对定位 */
            position: absolute;
            left: 120px;
        }
        .box-fixed{
            width: 100px;
            height: 100px;
            background-color: brown;
            position: fixed;
            right: 0;
            top: 300px;
        }
    </style>
</head>
<body>  
<h1>相对定位</h1>
<div class="box1">
    <!-- 普通元素 -->
    <div class="box-normal"></div>
    <!-- 相对定位 -->
    <div class="box-relativ"></div>
    <div class="box-normal"></div>
</div>
<h2>绝对定位</h2>
<div class="box2">
     <!-- 普通元素 -->
     <div class="box-normal"></div>
     <!-- 相对定位 -->
     <div class="box-absolute"></div>
     <div class="box-normal"></div>
</div>
<!-- 固定定位与绝对定位相同的是,固定定位脱离正常文档流,但不同的地方就是绝对定位相对于元素最近
已经定位的父级元素进行定位的,如果没有已经定位的父级元素,它就相当于我们这个html标签定位,而固定定位
相当于浏览器窗口进行定位的,即使我们这个页面滚动,元素依然会保持在这个窗口的相同位置. -->
<h3>固定定位</h3>
<div class="box-fixed"></div>
</body>
</html>

注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。

小刘要奋斗.

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
自学前端——CSS篇

什么是CSS？CSS全名是'Cascading Style Sheets'，中文名‘层叠样式表’。用于定义网页样式和布局的样式语言。通过CSS，你可以指定页面中各个元素的颜色、字体、大小、间距、边框、背景等样式，从而实现更精确的页面设计。CSS与HTML的关系举个例子，形象的描述他俩的关系。CSS与HTML的关系就好比建筑与装修，HTML就相当于是我们这个房子的骨架，也就是框架。定义了房子的基本结构，包括墙壁，门框、承重墙，窗户、楼梯的位置。
复制链接

扫一扫