CSS的使用

于 2024-07-27 11:55:55 发布
阅读量426 收藏 8
点赞数 4
分类专栏： Javaweb 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79890350/article/details/140731702
版权

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

CSS引入方式

行内式

  • 通过元素的style属性引入样式
  • 语法：style="样式名:样式值;样式名:样式值;......"
  • 缺点:
  1. 代码复用度低，不利于维护
  2. css样式代码和html结构代码交织在一起，影响阅读，影响文件大小，影响性能
  • 代码
<body>
	<input 
		type="button" 
		value="按钮"
    	style="
        	width: 60px;
        	height: 40px;
        	background-color: rgb(166,232,66);
        	color: white;
        	font-size: 20px;
        	font-family: '隶书';
        	border:2px solid green;
        	border-radius: 5px;
	"/>
</body>
  • 效果

在这里插入图片描述

内嵌式

  • 通过在head标签中的style标签定义本页面的公共样式
  • 通过选择器确定样式的作用元素
  • 代码
<head>
	<style>
        /* 元素选择器，通过标签名确定样式的作用元素 */
        input{
            width: 60px;
            height: 40px;
            background-color: rgb(166,232,66);
            color: white;
            font-size: 20px;
            font-family: '隶书';
            border:2px solid green;
            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文件中，哪个html需要这些代码就在head中通过link标签引入
  • <link href="css/btn.css" rel="stylesheet">
  • 代码

在这里插入图片描述

<head>
	<link href="css/btn.css" rel="stylesheet">
</head>

<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
</body>
  • 效果
    在这里插入图片描述

CSS选择器

元素选择器

  • 根据标签的名字确定样式的作用元素
  • 语法：标签名{}
  • 缺点：

某些同名的元素不希望使用某些样式，某些不同名的元素也使用该样式,都无法协调

  • 代码
<head>
	<style>
	input{
            width: 80px;
            height: 40px;
           	background-color: chartreuse;
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            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"/> 
    <button>按钮5</button>
</body>
  • 效果
    在这里插入图片描述

id选择器

  • 根据标签的id值确定样式的作用元素
  • 一般每个元素都有id属性，但是在一个页面中，id的值不应该相同，id具有唯一性
  • 语法：#id值{}
  • 缺点：

id值有唯一性，样式只能作用到一个元素上

  • 代码
<head>
	<style>
	#btn1 {
            width: 80px;
            height: 40px;
            background-color: chartreuse;
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            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>
  • 效果
    +

class选择器

  • 根据元素的class属性值确定样式的作用元素
  • 元素的的class属性值可以重复，而且一个元素的class属性可以有多个值
  • 语法：.class属性值{}
  • 代码
<head>
   <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>
  • 效果
    在这里插入图片描述

CSS浮动

  • CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止
  • 浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷

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

浮动原理

  • 当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
    在这里插入图片描述
  • 当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。
    在这里插入图片描述
  • 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”

在这里插入图片描述

浮动的样式名：float

在这里插入图片描述

  • 代码
<head>
	<style>
        /* display: inline;宽高设置可能生效    block块（块元素）  inline（行内元素） */
      
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid rgb(112, 136, 112);
            background-color: beige;
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue; 
            float: left;      
        }

        .d1{
            background-color: greenyellow;
        }
        .d2{
            background-color: rgb(210, 119, 119);
        }
        .d3{
            background-color: rgb(142, 236, 229);

        }

    </style>
</head>

<body>
    <div class="outerDiv">
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div2</div>
        <div class="innerDiv d3">div3</div>
    </div>
</body>
  • 效果
    在这里插入图片描述

CSS定位

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

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

  • 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。
    在这里插入图片描述

静态定位 static

  • 不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列
  • 代码
  • 代码
<head>
    <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

  • absolute ,通过 top left right bottom 指定元素在页面上的固定位置
  • 定位后元素会让出原来位置,其他元素可以占用
  • 代码
<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

  • 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

  • fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动
  • 元素定位后会让出原来的位置,其他元素可以占用
  • 代码
<head>
    <meta charset="UTF-8">
    <style>
        .innerDiv{
                width: 100px;
                height: 100px;
        }
        .d1{
            background-color: rgb(166, 247, 46);
            position: fixed;
            right: 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>
        br*100+tab
</body>
  • 效果
    在这里插入图片描述

CSS盒子模型

  • 所有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;
            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>
  • 效果
    在这里插入图片描述

说明

  • 在浏览器上，可通过F12工具查看盒子模型状态
    在这里插入图片描述
  • padding 规律与 margin 相同
/* margin: 10px; 外边距 上下左右都为10px */
/* margin: 10px 20px; 外边距 上下为10px 左右为20px */
/* margin: 10px 20px 30px; 外边距 上为10px 左右为20px 下为30px */
/* margin: 10px 20px 30px 40px; 外边距 顺时针 上为10px 右为20px 下为30px 左为40px */
SHtop11
关注
专栏目录
github-markdown-css使用说明
Learn-anything.cn
11-20 4394
简介及使用步骤 将markdown字符串转换成html后，可以用此插件来改变页面样式，使得页面呈现为 github样式 ，样式效果看这里。 1、安装插件： $ npm install github-markdown-css 2、新建github-markdown.css文件，内容如下： .markdown-body { box-sizing: border-box; min-width: 200px; max-width: 980px; margin: 0 auto; padding
javaweb留言板css
10-10
javaweb 留言板css代码，学习时候上课时候，是需要用到的必要代码
CSS浮动
最新发布
weixin_44201223的博客
05-15 262
CSS浮动介绍
【JAVAWEB】CSS
m0_57248752的博客
05-30 1329
层叠样式表(Cascading Style Sheets).作用：CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化效果，能够做到页面的样式和结构分离。
前端CSS
weixin_30267697的博客
09-11 193
目录 1.CSS介绍 2.CSS的引入方式 2.1行内样式 2.2内接样式 2.3外接样式-链接式 2.4外接样式-导入式 3.css选择器 3.1基本选择器： 3.2标签选择器(标签名) ...
javaWeb CSS
weixin_65637841的博客
07-18 977
CSS 是「层叠样式表单」。是用于 (增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 语法 CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} ...
LESSCSS让CSS使用起来更加灵活成就CSS动态化
01-19
他可以让CSS使用起来更加灵活，使用方式形如JavaScript中的一些变量，函数等。LESSCSS可以在多种语言和环境中使用，比如服务端、浏览器端。 说了那么多LESSCSS的各种好处，下面介绍一下LESSCSS简单使用方法。 1、...
DIV+CSS使用技巧
02-13
介绍DIV和CSS的使用方法和常用技巧。DIV+CSS页面布局基础知识，适用于技术与平台中心无css基础研发人员
超棒的跨浏览器纯CSS动画实现 Animate.css使用方法
12-13
通常情况下如果需要生成web动画效果的话，我们肯定会考虑使用一些类库或者jQuery的animate方法，那么有什么方便的方法来快速实现动画效果呢？ 在今天的这篇文章中，我们将介绍一个超棒的CSS动画实现方式 – Animate...
推荐一本关于css使用技巧的好书——《css揭秘》-附件资源
03-02
推荐一本关于css使用技巧的好书——《css揭秘》-附件资源
JAVAweb基础CSS
叶之印的博客
08-22 320
CSS概念： 层叠样式表 CSS的作用 1.实现了样式和html的代码分离。 2.弥补html对属性的的控制不足。 3.精确的控制页面的布局。 4.可以提高页面的执行效率。 5.css还有特殊的功能。 CSS的特性： 1.继承性 2.层叠性 CSS的基本语法 < style type=“text/css”> 选择器{ 属性1:属性值； 属性2：属性值 。。。。。。 } < /st...
Java Web 之CSS
晴晴晴的博客
08-24 988
【胡思乱想】很久很久以前，盘古开天辟地的时候，世界是一团糟，乱七八糟的东西，东倒西歪，胡乱堆在一起，分不清楚这个是什么那个是什么，这个时候，CSS出现了，先给没有名字难以区分的东西归类，写好名字，然后再根据名字规定他们是什么，该做什么，怎么做。于是乎，世界就和平了，软软的白云飘浮在蓝天上，清澈的小溪流淌在山间里，快乐的鱼儿在海里游。【CSS简介】CSS，层叠样式表，对html进行样式修饰语言。层叠就
java web css_JavaWeb之CSS详解
weixin_32371243的博客
02-16 314
CSS的简介1、CSS概述及作用CSS：Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的显示效果功能。作用：CSS将网页内容和显示样式进行分离，提高了显示功能。2、 CSS和HTML的结合(*****)(四种)CSS与HTML的结合方式1.style属性方式：利用标签中style属性...
JavaWeb——CSS_总结
RamProg的博客
09-11 460
CSS知识总结
JAVAWEB CSS 使用方法
chengqingshihuishui的博客
08-26 755
方法一： 直接给HTML标签 加 style属性 比如 我是一个<span style=" ">大天才</span>樱木花道 " " 里面的就是按照css语法规则的键值对 属性：值 ; 属性:值 只要是这个标签支持的css属性，随便整。 方法二： 在HTML的head标签下定义CSS，CSS写法和CSS语法规则一致 <head> <style type="text/css"> idea里面不写type也没得事 选择器 { 样式属性...
JavaWeb - css
sunqianLOL的博客
09-15 255
JavaWeb - css 1-css.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 需求1: 分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：
JavaWeb-CSS
Ego_Ekko的博客
01-02 719
CSS是层叠样式表单，用于增强控制网页样式并允许样式信息与网页内容分离的一种标记性语言。CSS 是一种描述 HTML 文档样式的语言，描述应该如何显示 HTML 元素。 选择器：用于“查找”（或选取）要设置样式的 HTML 元素。浏览器根据"选择器"决定受CSS样式影响的HTML元素（标签）
JavaWeb - CSS
qq_46120393的博客
05-25 1118
1. 什么是CSS 2. CSS的基本语法规范 3. CSS的引入方式 4. 常用选择器     标签选择器     类选择器     id选择器     通配符选择器     后代选择器     子选择器     并集选择器     伪类选择器 5. 字体属性     字体样式     字体大小     字体粗细     字体倾斜 6. 文本属性     文本颜色     文本对齐     文本装饰     文本缩进     行高 7. 背景属性     背景颜色     背景图片     背景平铺   
JavaWeb--CSS
qq_45806995的博客
07-26 166
一、CSS技术介绍 CSS（Cascading Style Sheet）是层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 二、语法规则 选择器 { 属性:值; } 选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。 属性是你要改变的样式名，并且每个属性都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的声明（declaration）。 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。一般每行只描述一个属性。
前端开发必备：CSS使用技巧与规则概览
掌握CSS的使用规则对于前端开发者至关重要，它能让网页设计更加高效且易于维护。本文将详细介绍两个关键主题：CSS的缩写规则和引入CSS样式的四种方法。 1. **CSS缩写规则** - **边距（Margin）**：CSS允许通过省略...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值