css入门

🕗 发布于 2024-10-19 23:09 css 前端笔记

css入门

- css入门笔记

css入门笔记

尚硅谷2023javaweb css学习笔记

1.是什么

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

2.CSS引入方式

1、行内式：通过元素开始标签的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样式代码仅对当前元素有效，代码重复量高，复用度低； -->

缺点:
html代码和css样式代码交织在一起，增加阅读难度和维护成本；
css样式代码仅对当前元素有效，代码重复量高，复用度低；
2、内嵌式：在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文件中；
内嵌样式仅仅能作用于当前文件，代码复用度还是不够，不利于网站风格统一
3、连接式/外部样式表：将CSS代码单独放入css样式文件，在head标签中通过link标签引入外部样式表：
可以在项目单独创建css样式文件，专门用于存放CSS样式代码。
在head标签中，通过link标签引入外部CSS样式即可。

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

CSS样式代码从html文件中剥离，利于代码的维护。
CSS样式文件可以被多个不同的html引入，利于网站风格统一

3. CSS选择器

1、元素选择器：

<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>

语法为：元素名 {}；
样式只能作用到同名标签上，其他标签不可用；
相同的标签未必需要相同的样式，会造成样式的作用范围太大；
2、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属性值不够灵活，所以使用该选择器的情况较少
3、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中，使用该选择器的情况较多；

4. 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>

在这里插入图片描述

5. CSS定位

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

值	描述
absolute	生成绝对定位的元素，相对于 static 走位以外的第一个父元素进行走位,元素的位置通过"left"，"top”，"right”以及 "bottom”属性进行规定
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left"，“top”，"right"以及"bottom"属性进行规走
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，""left:20"会向元素的 LEFT 位霅添加 20 像素,默认值
static	没有定位，元素出现在正常的流中(忽略 top,bottom,left,right 或者 z-index 声明)

<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>

静态定位static，不设置的时候的默认值就是static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列。
在这里插入图片描述
绝对定位 absolute

<!DOCTYPE html>
<html lang="en">
    <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>
</html>

在这里插入图片描述
相对定位relative ，相对于自己原来的位置进行地位，定位后保留原来的站位，其他元素不会移动到该位置：

<!DOCTYPE html>
<html lang="en">
    <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>
</html>

在这里插入图片描述
固定定位fixed，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让
出原来的位置,其他元素可以占用：

6 CSS盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。
在这里插入图片描述
Margin(外边距 ) - 清除边框外的区域，外边距是透明的；
Border(边框) - 围绕在内边距和内容外的边框；
Padding(内边距 ) - 清除内容周围的区域，内边距是透明的；
Content(内容 ) - 盒子的内容，显示文本和图像；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    .outerDiv {
      width: 800px;
      height: 300px;
      border: 1px solid green;
      background-color: rgb(230, 224, 224);
      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: greenyellow;
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */
      padding: 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>
</html>

在这里插入图片描述

原文地址：https://blog.csdn.net/qq_41008110/article/details/143083312

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MyBatis 中updateByPrimaryKey和updateByPrimaryKeySelective区别
下一篇：C++类域访问方式（public，protected，private）对象访问，通过成员函数访问，通过友元函数访问

leetcode289:生命游戏
根据，简称为，是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含m × n个格子的面板，每一个格子都可以看成是一个细胞。每个细胞都具有一个初始状态：1即为（live），或0即为
阅读更多2024-10-20
MongoDB数据恢复
注意：两个MongoDB的版本要一致，本文使用的是mongo:4.2.24。先把K8S上面的MongoDB 容器停止（可以把副本改成0）。1、将容器挂载MongoDB的数据目录备份到本地。经常是数据文
阅读更多2024-10-20
C#中实现事务
C#中实现事务
阅读更多2024-10-20
【LeetCode每日一题】——560.和为 K 的子数组
给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列。
阅读更多2024-10-20
「漏洞复现」满客宝智慧食堂系统 selectUserByOrgId 未授权访问漏洞
请勿利用文章内的相关技术从事非法测试，由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失，均由使用者本人负责，作者不为此承担任何责任。工具来自网络，安全性自测，如有侵权请联系删除。本次
阅读更多2024-10-20
React面试题目（从基本到高级）
React前端面试常见题目涵盖了React的基础概念、组件、状态管理、生命周期、性能优化等多个方面。
阅读更多2024-10-20
12.个人博客系统（Java项目基于spring和vue）
1 在校学习的学生，可用于日常学习使用或是毕业设计使用 2 毕业一到两年的开发人员，用于锻炼自己的独立功能模块设计能力，增强代码编写能力。 3 亦可以部署为商化项目使用。 4 需要完整资料及源码
阅读更多2024-10-20
YoloV8改进策略：注意力改进|DeBiFormer，可变形双级路由注意力|引入DeBiLevelRoutingAttention注意力模块（全网首发）
本次改进的核心在于将DeBiLevelRoutingAttention模块嵌入到YoloV8的主干网络中，具体位置是在SPPF（Spatial Pyramid Pooling Fast）模块之后。这一
阅读更多2024-10-20
word取消自动单词首字母大写
情况说明：在word输入单词后首字母会自动变成大写取消单词首字母大写步骤：（1）点击菜单栏文件（2）点击“更多”——>“选项”（3）点击“校对”——>“自动更正选项”（4）取消“句首字母大
阅读更多2024-10-20
web前端网页用户注册页面
【代码】web前端网页用户注册页面。
阅读更多2024-10-20

css入门

css入门

css入门笔记

1.是什么

2.CSS引入方式

3. CSS选择器

4. CSS浮动

5. CSS定位

6 CSS盒子模型

相关文章