CSS基础部分学习

最新推荐文章于 2024-09-05 11:40:28 发布
最新推荐文章于 2024-09-05 11:40:28 发布
阅读量68 收藏
点赞数
文章标签： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaowenzheng/article/details/133843154
版权

一、CSS的引入

1、内嵌式

直接在<head></head>标签中加入<style></style>标签即可

2、外联式

在<head></head>标签中插入link标签，来引入.css文件以引入css

3、行内式

直接使用style属性标签，但通常配合js使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./外联引入.css">
    <!-- 外联式 多用于项目中 -->
    <style>
        /* 内嵌式 多用于小案例 */
        p1{
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是P标签</p>
    <div style="color: aqua; font-size: 20px;">div</div>
    <!-- 行内式 配合js使用 -->
    <p1>123</p1>
</body>
</html>

以下是通过外联式引入css使用的.css文件代码

p{
    color: chocolate;
}

二、选择器

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>
        /* 标签名{CSS属性名：属性值} */
        p { color: rebeccapurple; }
        /* 标签选择器会选中所有相同标签名都会生效CSS */
    </style>
</head>
<body>
    <p>这是一个P标签</p>
    <p>这是另一个P标签</p>
</body>
</html>

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>
        /* 先定义一个类名，再通过类名设置样式 */
        /* .类名 { css属性名: 属性值; } */
        .red { color: red ; }
        .size{ font-size: 30px; }
        /* 类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头 */
        
    </style>
</head>
<body>
    <!-- 通过class来选择并使用已经定义的类 -->
    <div class="red">只用一个class</div>
    <div>未使用class</div>
    <div class="red size">使用两个class</div> 
    <!-- 一个标签可以使用多个类名，类名之间用空格隔开 -->
</body>
</html>

3、id选择器

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

        /* id标签主要是为js服务的 */

        /* id属性在一个页面中是唯一的，不可重复 */
        #bule { color:blue ;}
        /* 一个id选择器只能选中一个标签 */
    </style>
</head>
<body>
    <!-- 所有标签都有id属性 -->
    <div id="blue">蓝色</div>
    <!-- 一个标签只能有一个id属性 -->
</body>
</html>

4、通配符选择器

<!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>
        /* 通配符是选择所有标签并进行CSS装饰 */
        * { color: coral; }
        /* 开发中使用极少，仅在特殊情况下会用到 */
        /* 可能会用于去除标签默认的margin和padding */
    </style>
</head>
<body>
    <h2>h2</h2>
    <h1>h1</h1>
    <p>p</p>
    <div>div</div>
</body>
</html>

三、字体和文本样式

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>
        .size{
            font-size: 30px;
        }
        /* 文字大小 */
        .wei{
            font-weight: 800;
        }
        /* 文字粗细 */
        /* 不是所有字体都提供了9种加粗，有的网站无法显示 */
        .ita{
            font-style: italic;
        }
        /* 文字样式（是否倾斜） */
    </style>
</head>
<body>
    <!-- 网页字体默认大小为16px -->
    <p class="size">段落文字</p>
    <!-- 默认正常大小取值为400 -->
    <div class="wei">字体加粗</div>
    <p class="ita">字体倾斜</p>
</body>
</html>

以下为字体粗细取值相关表

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{
            font-family: 宋体;
        }
        /* 字体可分为三类
        1.无衬线(sans-serif)
        2.衬线(serif)
        3.等宽(monospace) */

        /* 渲染规则：1. 从左往右按照顺序查找，如果电脑中未安装该字体,则显示下一个字体
                    2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 */

    </style>
</head>
<body>
    <div>字体样式</div>
</body>
</html>

以下为字体的分类

3、font复合属性

<!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>
        p{
            /* 按照 font : style weight size 字体样式; 这样的顺序填写，且前两个即style和weight可以省略*/
            /* 当style和weight省略时默认设置为默认值 */
            font: italic 600 66px 宋体;

            /* 一个属性冒号后面书写多个值的写法 --- 复合属性 */
        }
    </style>
</head>
<body>
    <p>演示文本</p>
</body>
</html>

 

4、文本缩进

<!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>
        p{
            text-indent: 2em;
        }
        /* px缩进像素 */
        /* em：一个字的大小 */
    </style>
</head>
<body>
    <p>最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接
        成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码
        为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许
        多科学家难以掌握。
        20世纪50年代，随着符号语言的发展，特别是由约翰巴克斯及其团队
        在加州圣何塞的IBM开发的"公式翻译"语言Fortran, 这种情况发生了变
        化。利用Fortran,用户可以用人类可读的指令来编程，例如x=3+5.然
        后由编译器将这些指令转换成快速、高效的机器代码。</p>

</body>
</html>

以上代码运行结果如下

注意

 

5、水平对齐方式

<!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>
        h1{
            text-align: center; 
            /* 水平居中，文本、span、a、input、img，但是需要给以上元素的父元素设置 */
            /* text-align:left;左对齐 */
            /* text-align:right;右对齐 */
        }
        body{
            text-align: center; 
        }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <img src="./微信图片_20230926210222.jpg" alt="图片" height="500px">
</body>
</html>

6、文本修饰线

<!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{
            text-decoration: underline;
            /* 下划线 */
        }
        p{
            text-decoration: line-through;
            /* 删除线 */
        }
        h3{
            text-decoration: overline;
            /* 上划线 */
        }
        a{
            text-decoration: none;
            /* 无修饰线，通常用来清除a标签的下划线 */
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>p</p>
    <h3>h3</h3>
    <a href="#">空链接</a>
</body>
</html>

 

7、行高

<!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>
        p{
            /* line-height: 2; */
            /* 取值：数字+px、倍数（当前font-size取值的倍数） */
            /* 如果同时设置了行高和font连写，注意覆盖问题
            font: style weight size/line-height family; .
             */
             font:italic 300 20px/2 宋体;
        }
    </style>
</head>
<body>
    <p>    在感知智能上，目前机器智能正在接近和逼近人类，已经做得很不错。比方说，现在已经被广泛应用
    的人脸识别，在火车站等公共场所中都已开始广泛应用;再有语音识别，这方面也做得非常好，可以把语
    音方便地转成文字;还有光学字符识别，对于报销单等，可以直接提取出-一个结构化的文档来。可以说，
    在感知智能这个层次上面，基于深度学习的一些技术在某种意义上已经能够跟人类媲美了。
    </p>
</body>
</html>

 

四、标签水平居中

<!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: 300px;
            height: 400px;
            background-color: aqua;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div ></div>
</body>
</html>

小正的学习日记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS基础学习视频 百度网盘下载
02-07
【CSS基础学习】 在网页设计领域，CSS（Cascading Style Sheets）是不可或缺的一部分，它用于控制网页的布局和外观。本视频教程是针对初学者设计的，旨在帮助新手快速掌握CSS的基本概念和实际应用。 一、CSS简介 ...
CSS基础学习胶片
10-27
【CSS基础学习胶片】 CSS，全称Cascading Style Sheets，中文译为层叠样式表，是网页设计中用于控制网页布局和样式的语言。它与HTML（超文本标记语言）相辅相成，让网页的设计更加丰富多彩，易于维护。本资料集面向...
css 入门基础教程
09-25
总的来说，CSS入门基础教程涵盖了基本语法、选择器、注释和不同类型的样式表，这些都是学习CSS的基础。掌握这些知识后，可以进一步学习更复杂的布局技巧、响应式设计、动画和过渡效果，以及CSS预处理器等进阶主题。
CSS基础学习资料
09-19
CSS基础知识是网页设计与开发的重要组成部分，它赋予网页视觉表现力，使得内容呈现更加美观且结构化。这份"CSS基础学习资料"针对初学者提供了丰富的学习资源，帮助他们快速掌握这一关键技能。 首先，我们需要理解...
css经典学习笔记.zip
11-01
一、CSS基础 CSS的基本结构包括选择器和声明块。选择器用于指定要应用样式的元素，如`p`代表所有的段落，`.class`代表具有特定类名的元素，`#id`则对应ID为特定值的元素。声明块由花括号包围，内含一组属性：值对，...
【学习笔记】卫星通信NTN 3GPP标准化进展分析（六）- 参考标准
u011376987的博客
09-01 1134
本文总结了NTN标准化进程以及后续的研究计划，是学习NTN协议的入门。本文来自3GPP Joern Krause, 3GPP MCC。
Datawhale X 李宏毅苹果书AI夏令营 学习笔记
m0_61049596的博客
08-31 1191
今天，我继续学习了深度学习中的优化算法，并且着重理解了如何利用。等高级优化器来提高模型训练的效率和效果。2024年8月30日。
iomuxc、pinctrl子系统、gpio子系统（学习总结）
weixin_61385844的博客
09-04 842
IOMUXC是SOC设计中实现引脚复用的关键组件，它通过动态切换引脚功能，提高了IO资源的利用率，满足了不同外设和功能的IO需求。在配置和使用IOMUXC时，需要参考芯片使用手册和设备树文档，确保引脚功能的正确设置。
学习项目1
m0_62803606的博客
09-03 1598
这篇文章主要记录你最近入手的无线串口模块的配置情况，这是个很好的习惯，尤其是在你以后需要重复操作或排查问题时，会非常有帮助。- **DL_20无线串口模块**：这是一个常见的无线串口通信模块，通常基于nRF24L01+等无线通信芯片，支持点对点或多点通信，适合短距离的无线数据传输。是的，如果你按照步骤成功配置了两个模块并将它们连接到单机和电脑，当你在上位机软件（如SSCOM）上能稳定地接收到从单片机发送的数据（例如每秒输出的T值），就说明两个无线模块之间的通信已经配置成功。
算法的学习笔记—把数字翻译成字符串
业精于勤，荒于嬉
08-31 955
通过动态规划的方法，我们可以高效地计算出一个数字字符串有多少种不同的翻译方法。这个问题不仅考察了我们对动态规划的理解，还让我们熟悉了如何处理字符串中的边界情况和状态转移。希望通过这个例子的讲解，能够帮助你更好地理解动态规划的应用。😁热门专栏推荐想学习vue的可以看看这个java基础合集数据库合集redis合集nginx合集linux合集手写机制微服务组件spring_尘觉springMVCmybit欢迎大家加入我的社区尘觉社区文章到这里就结束了，如果有什么疑问的地方请指出，诸佬们一起来评论区一起讨论
网络编程学习：TCP/IP协议
kkbbaaii的博客
09-01 1586
网络编程学习：TCP/IP协议
IP学习——Fiveday
最新发布
qq_52973916的博客
09-05 338
设备排错：注意黑洞路由
EmguCV学习笔记 C# 第10章 人脸识别
UruseiBest 的技术专栏
09-05 323
EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。10.1 人脸检测 CascadeClassifier类。10.2.2.1 EigenFaceRecgnizer类。10.2.1 LBPHFaceRecgnizer类。10.2 人脸识别 FaceRecgnizer类。教程配套文件及相关说明。
集成电路学习：什么是EEPROM电可擦除可编程只读存储器
limengshi138392的博客
09-01 538
集成电路学习：什么是EEPROM电可擦除可编程只读存储器
MySQL基础学习：MySQL主从复制如何实现
玉汝于成
08-31 565
这里写自定义目录标题一、为什么使用MySQL主从二、主从复制原理是什么 一、为什么使用MySQL主从 保证服务的高可用：当主机宕机的时候可以选择一个从节点作为主节点，保证了我们服务的高可用。 保证容灾备份：主库上的磁盘坏了，可以从从节点恢复。 二、主从复制原理是什么
Python标准库学习之platform模块
qq_46396470的博客
09-01 635
platform模块是Python标准库中的一个模块，用于获取底层平台的标识数据。它提供了一系列函数来访问操作系统、硬件和Python解释器的相关信息。这个模块在编写跨平台程序时特别有用，可以帮助开发者根据不同的运行环境调整程序的行为。
subprocess库学习之run(函数)
qq_46396470的博客
09-01 1048
是 Python 3.5 及以上版本中的一个函数，用于运行外部命令并等待其完成。该函数是subprocess模块中常用的工具之一，取代了早期的os.system等方法，提供了更强大的功能和更灵活的参数配置。
《数字信号处理》学习02-序列的能量及周期性
码到成龚的博客
09-01 790
周期序列和周期函数一样：如果序列x(n)移动N位（N可以为负数，当n>0时，表示序列向左移动）后，序列的值依旧还是那几个，既序列值不变，只改变离散时间变量n，则这个序列就是周期性序列，满足: x(n)=x(n+N)。3） ω0=1/4，N=2kΠ/ω0=2kΠ×4=8kΠ ，8Π是个无理数(8×3.1415926.......)，所以 k 没办法取到取到确切的正整数，使得 N 为正整数整数，因此该序列不具有周期性，是非周期序列。该序列最小周期N为8。周期性序列的流线图，该周期性序列的周期N=8。
读书学习笔记 # Datawhale X 李宏毅苹果书 AI夏令营
qq_23311271的博客
08-31 1036
随着要找的函数不同，机器学习有不同的类别。假设要找的函数的输出是一个数值，一个标量（scalar），这种机器学习的任务称为回归机器要找一个函数 f，其输入是可能是种种跟预测 PM2.5 有关的指数，包括今天的 PM2.5 的数值、平均温度、平均的臭氧浓度等等，输出是明天中午的 PM2.5的数值,找这个函数的任务称为回归（regression）机器要找一个函数f(x)，其输入是可能是与预测目标有关的数值x，输出是对于下一次的预测值f(x)，找这个函数的任务称为回归（regression）。
HTML与CSS基础学习指南
"HTML和CSS是构建网页的基础，本学习笔记主要涵盖了HTML的基本概念、结构、...随着技术的发展，前端开发不仅限于HTML和CSS，还涉及到JavaScript、Vue、React等框架，但对于初学者，扎实的HTML和CSS基础是必不可少的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值