前端学习之CSS基础

news2025/11/1 6:12:59

前言

html标签就不说了，这次学习CSS样式，就是美化html标签。

快速了解什么是css

普通标签：
在这里插入图片描述
加了css样式：

<img src="https://static.runoob.com/images/icon/mobile-icon.png" style="height:100px" />

<div style="color:red;">中国联通</div>

在这里插入图片描述

应用方式

1、写在标签里
直接在标签内写style就行

<div style="color:red;">中国联通</div>

2、写在head标签
在head里写style标签，并在body里调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>

<h1 class='c1'>用户登录</h1>

</body>
</html>

在这里插入图片描述
3、写到css文件里
新建一个.css文件将样式写到文件里，如：

.c1{
    height:100px;
}

.c2{
    color:red;
}

然后在前端代码里进行引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>

<h1 class='c1'>用户登录</h1>
<h1 class='c2'>用户登录</h1>

</body>
</html>

常用选择器

1、类选择器

.c1{
样式
}
<div clss='c1'></div>

2、id选择器

#c1{
样式
}
<div id='c1'></div>

3、标签选择器

div{
样式
}
<div>xxx</div>

4、后代选择器

.yy li{
    color: pink;
}
.yy  a{
    color: dodgerblue;
}

看下效果：

<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

在这里插入图片描述

常用样式

1、高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

在这里插入图片描述
支持百分比：

.c1{
    height: 70%;
	width: 50%;
}

注意：
行内标签：默认无效，如span标签
块级标签：默认有效，如div标签

2、块级和行内标签
display：inline-block 行内块元素
inline-block可以说是结合了inline和block的部分属性，最大的特点便是可以使元素在一行上显示 ，又能够改变元素的height，width的值。

.c1{
            display: inline-block;
            height: 100px;
            width: 300px;    
        }
<span class="c1">中国</span>

在这里插入图片描述
display：inline 内联元素
这是display的默认属性，一个行内元素可以在段落中包裹一些文字而不会打乱段落的布局。即可以与其他行内元素共享一行，不会独占一行。不能更改元素的height，width的值，大小由内容撑开. 可以使用padding，margin来撑开元素，但设置top以及bottom对他无效。
在这里插入图片描述
display：block 块级元素
可以作为块级元素来使用，使元素独占一行,能更改元素的height，width的值。

3、字体设置
依次为颜色（百度css 颜色大全）、大小、加粗、字体（百度css 字体font-family大全）

.c1{
            color: #00FF7F;
            font-size: 58px;
            font-weight: 600;
            font-family: Microsoft Yahei;
        }

在这里插入图片描述
4、文字对齐方式与border边框

.c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;/* 边框大小、颜色*/

            text-align: center; /* 水平方向居中 */
            line-height: 100px; /* 垂直方向调整 */
        }

在这里插入图片描述
5、float与background背景色
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

.c1{
            float: left;
            width: 180px;
            height: 170px;
            border: 1px solid red;
        }

在这里插入图片描述
在这里插入图片描述
css中clear:both属性的作用是清除浮动，设置了浮动就会破坏文档流结构，影响后边的布局，此时在设置清除浮动便可解决这一问题，可以认为，设置了clear:both的当前元素会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{width:500px;background:pink;border:1px solid #F00;padding:5px;}/* background为背景色、padding为内边距下面提到*/        
        .left{ float:left;background:#008000;width:200px;height:150px;}
        .right{ float:right;background:#008000;width:200px;height:150px;}
    </style>
</head>
<body>
<div class="box"> 
      <div class="left">左浮动left</div> 
      <div class="right">右浮动right</div> 
	  
</div>
    
</body>
</html>

大的div没有被撑开，文档流被浮动破坏
在这里插入图片描述
加上clear.both属性

<div class="box"> 
      <div class="left">左浮动left</div> 
      <div class="right">右浮动right</div> 
	  <div style="clear: both;"></div>
</div>

正常撑开了
在这里插入图片描述
6、内边距
Css：

.c1{
		   border: 1px solid red;
            height: 200px;
            width: 200px;          
            padding: 40px;
		}

Html：

<div class="c1">
	<div style="background-color: gold;">中国</div>
</div>

在这里插入图片描述
也可以指定上下左右
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
或者：
padding: 5px 5px 5px 5px;
默认上右下左

7、外边距
就是和别人的距离：

<div style="height: 200px;background-color: dodgerblue;"></div>
<div style="background-color: red;height: 100px;margin-top: 30px;"></div>

在这里插入图片描述
margin同样拥有4个方向,比如设置盒子水平居中：

<div style="background-color: red;height: 100px;width: 100px;margin-left:auto;margin-right:auto;margin-top:30px;margin-bottom:40px;"></div>

在这里插入图片描述
margin-left:auto;margin-right:auto;也可以写为margin:0 auto;

8、hover属性
当鼠标指针放到指定位置拥有指定属性：

.c2:hover {
            color: red;
        }
<div class="c2">中国</div>

当鼠标放到中国时字体变为红色
9、after
after是CSS的一种伪元素选择器,用于在被选元素的内容后面插入内容,通常会配合使用content属性来指定要插入的内容
在这里插入图片描述
插入图片：

.c1:after{
            content: url(https://static.runoob.com/images/icon/mobile-icon.png);
            display: block;
            clear: both;
        }

10、position
position: fixed;固定在窗口某个位置，固定定位就是将元素相对于浏览器窗口进行定位，使用固定定位的元素不会因为浏览器窗口的滚动而移动，就像是固定在了页面上一样，我们经常在网页上看到的返回顶部按钮就是使用固定定位实现的。
css:

.c1{
            position: fixed;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            right: 10px;
            bottom: 50px;
        }

html:

<div style="height: 1000px;background-color: #5f5750"></div>
<div class="c1"></div>

可以看到第二个div固定在了指定位置
在这里插入图片描述
相对定位：relative
相对定位就是元素相对于自己默认的位置来进行位置上的调整，可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量。
绝对定位：absolute
绝对定位就是元素相对于第一个非静态定位（static）的父级元素进行定位，如果找不到符合条件的父级元素则会相对与浏览器窗口来进行定位。您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。

.c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            top: 40px;
            left: 30px;
            position: relative;
        }
        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color: #00FF7F;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }

<div class="c1">

        <div class="c2"></div>

</div>

在这里插入图片描述
以上只是css在实际开发中常用的样式，更多样式可以去自学：
菜鸟：https://www.runoob.com/css/css-tutorial.html
W3school：https://www.w3school.com.cn/css/index.asp
7个有趣的CSS在线学习网站：https://zhuanlan.zhihu.com/p/578257736

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/146008.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

No module named ‘pycocotools’

No module named ‘pycocotools’

网上搜了之后 按照网上的去做 全都无果 开始自己探索 原本我pycharm里选的环境是 python3.8 (pytorch)winR输入cmd进去后 输入 python –V返回的是本地python版本2.7 所以我当前系统python版本和我pycharm里选的不一样 然而pycocotools这个包本质上应该是安装在我pycharm里…
阅读更多...
Referer；盗链；防盗链的工作原理

Referer；盗链；防盗链的工作原理

目录 Referrer-policy 如何设置referer 盗链 防盗链的工作原理 绕过图片防盗链 设置meta 设置referrerpolicy"no-referrer" 客户端在请求时修改header头部 利用https网站盗链http资源网站&#xff0c;refer不会发送 常见防盗链方法 利用nginx 服务器端判…
阅读更多...
python基础语法一

python基础语法一

一、变量 1.1、变量定义 变量就是可变的量&#xff0c;对于一些有可能会经常变化的数据&#xff0c;我们需要使用一个符号&#xff0c;这样才能计算中使 用它&#xff0c;就像我们在小学时学过的一元方程中的"x"一样。比如说&#xff0c;我们在控制台内输入&#xf…
阅读更多...
Java 集合List接口介绍和使用

Java 集合List接口介绍和使用

List接口的基本介绍 1.List接口是Collection的子接口 2.List中的元素都是有序的除了LinkedList。 一些实用的方法 1.add()添加元素 2.get()得到指定位置的元素 3.addAll&#xff08;&#xff09;追加一个List 4.indexOf&#xff08;&#xff09;返回元素的位置 5.remove…
阅读更多...
人工智能 -多任务编程、进程、线程介绍

人工智能 -多任务编程、进程、线程介绍

目录1&#xff0c; 多任务的概念2&#xff0c;进程2.1进程的介绍2.2多进程完成多任务2.3进程执行带有参数的任务2.4获取进程编号2.5进程间不共享全局变量2.6主进程和子进程的结束顺序3、线程3.1多线程完成多任务3.2线程执行带有参数的任务3.3主线程和子线程的结束顺序3.4线程中…
阅读更多...
连续子数组的最大和(从暴力理解到DP)

连续子数组的最大和(从暴力理解到DP)

连续子数组的最大和题目思路暴力解题思路画出矩阵进行分析确定转移方程DP代码题目 思路 从leetcode上看到的题解&#xff0c;突然恍然大悟&#xff0c;之前不容易理解转移方程终于理解了&#xff0c;这个思路真的对新手很友好&#xff0c;现在出一个C版本&#xff0c;而且&…
阅读更多...
谷歌出品，数据集搜索引擎上线了！

谷歌出品，数据集搜索引擎上线了！

文 | 小戏记得在刚入门 ML 时&#xff0c;希望找到一个关于特定领域下的数据集&#xff0c;涉世未深的我在中文互联网不断搜索&#xff0c;可每每点进链接出来的都是某 SDN 下载的高价勒索。用惯了直接从老师同学那里讨来的数据集的我第一次感受到了“寻找数据集”这样一个简单…
阅读更多...
【并查集】实现思路及例题

【并查集】实现思路及例题

一、应用场景 用于处理不相交集合的合并和查询问题 示例&#xff1a; n 个元素&#xff08;分属不同的的 n 个集合&#xff09;&#xff0c;进行两种操作&#xff1a; 并 —— 给出两个元素的关系&#xff0c;合并两个集合查 —— 查询两个元素是否在同一个集合 二、并查集…
阅读更多...
「数据密集型系统搭建」原理篇｜用什么方式存储数据最合适

「数据密集型系统搭建」原理篇｜用什么方式存储数据最合适

本篇来聊聊数据存储的内容&#xff0c;看看程序世界里数据是以什么形式存在的&#xff1f;为了描述数据并把它们和这个现实世界关联起来我们一般都是如何去进行表达的&#xff1f;最后通过我们习惯的表达方式再结合数据结构是如何存储下来的&#xff1f; 在进行技术方案设计的时…
阅读更多...
分享102个PHP源码，总有一款适合您

分享102个PHP源码，总有一款适合您

PHP源码 分享117个PHP源码&#xff0c;总有一款适合您 PHP源码下载链接&#xff1a;https://pan.baidu.com/s/1Ike0x99BcMfZPy6tFSpM9w?pwdzqem 提取码&#xff1a;zqem import os from time import sleepimport requests from bs4 import BeautifulSoup from docx import D…
阅读更多...
Linux 系统Bash的常用功能

Linux 系统Bash的常用功能

了解了基本的Linux文件文件系统的概念后,我们将更深入的了解一下Linux的其他方面的内容,那就是我们所使用的用户接口,也就是大家常听到的 Shell ,是一种Linux的命令接口,在 Linux 的世界中,默认使用的是 GNU 开发出来的 shell ,称为 BASH Shell,简单来说,我们之前使用的几个命令…
阅读更多...
10.JS笔记-对象

10.JS笔记-对象

1、什么是对象 对象是一个具体的事物&#xff0c;在js中&#xff0c;对象是一组无序的属性和方法的集合 属性&#xff1a;事物的特征 方法&#xff1a;事物的行为 2、创建对象 利用字面量创建对象利用new Object创建对象利用构造函数创建对象 2.1 变量、属性和方法、函数的…
阅读更多...
人工智能的核心技术是什么？

人工智能的核心技术是什么？

&#xff08;本文阅读时间&#xff1a;5分钟&#xff09;人工智能的核心技术是它的算法被广泛认可的「算法」专业定义是&#xff1a;算法是模型分析的一组可行的&#xff0c;确定的&#xff0c;有穷的规则。基于规则的人工智能上个世纪六七十年代出现的早期人工智能系统都是基于…
阅读更多...
VueJs中如何自定义hooks(组合式)函数

VueJs中如何自定义hooks(组合式)函数

前言在Vue当中,一个非常重要的功能就是组件的复用,编写Vue组件,更多的也是在拼装组件,将页面的各个功能进行模块化便于维护和管理,而在项目里,有些页面中的组件的逻辑功能是一样的,如果没有进行功能逻辑的复用,那么每个页面都需要重复的写一遍在Vue当中各个组件是保持独立的,如…
阅读更多...
一份职业游戏3D建模师日常工作流程列表，看完不信还有人说建模门槛低

一份职业游戏3D建模师日常工作流程列表，看完不信还有人说建模门槛低

随着游戏行业的发展&#xff0c;越来越多的人开始对这个行业感兴趣&#xff0c;因此有很多的小伙伴梦想成为一个游戏模型师&#xff0c;成为游戏行业里的一员。但是很多人都对这个工作具体是做什么的并不是很了解&#xff0c;下面&#xff0c;我们就来说说游戏模型师的主要工作…
阅读更多...
Word处理控件Aspose.Words功能演示：使用 C# 将 DOCX 转换为 HTML

Word处理控件Aspose.Words功能演示：使用 C# 将 DOCX 转换为 HTML

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。此外&#xff0c; Aspose API支持流行文件格式处…
阅读更多...
Javascript：Class构造函数

Javascript：Class构造函数

为什么需要class 在其他语言中class已经是一个早就被实现的功能&#xff0c;在JavaScript中一直到ES6被实现。在class没有实现之前我们是这样写的&#xff08;如下代码&#xff09; function Person(name,sex){this.name this.sex } Person.prototype.sayfunction(){alert(h…
阅读更多...
金融类的APP该如何进行ASA推广

金融类的APP该如何进行ASA推广

移动理财成为新金融的主流&#xff0c;在如今&#xff0c;金融机构都在争相推出自己的移动理财产品&#xff0c;那今天柚鸥ASO就来给大家讲一下&#xff0c;金融类的APP在进行ASA前的一些注意事项。 APP进行ASA前的开户有两种&#xff1a; 自主开户&#xff08;1&#xff0c;…
阅读更多...
检测物理内存容量

检测物理内存容量

文章目录前言前置知识BIOS 中断 0x15 子功能 0xe820 获取内存代码说明实验操作前言 本博客记录《操作系统真象还原》第五章实验操作~ 实验环境&#xff1a;ubuntu18.04VMware &#xff0c; Bochs下载安装 实验内容&#xff1a;三种检测内存的方法。 实验原理&#xff1a; …
阅读更多...
volaile关键字详解！

volaile关键字详解！

文章目录什么是volatile &#xff1f;volatile三大特性volatile如何使用volatile保证可见性volatile不保证原子性volatile禁止指令重排volatile总结什么是volatile &#xff1f; volatile是一个Java关键字volatile是Java虚拟机提供的轻量级的同步机制 volatile三大特性 保证…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023