• 前端基础之CSS

    目录

    前言

    1. CSS简介

    2. 代码示例

    3. 盒子模型

    4. CSS中的定位

    前言

    该专栏主要是为后面学javaweb做一些前端基本知识的科普了解，并不能用来专门学习前端。如果只是图一乐到可看看。

    1. CSS简介

    在网页中HTML主要提供网页的内容，而CSS用来负责处理网页的外观。CSS又叫层叠样式表，根据使用的位置分为

    1. 内部样式表：直接出现在HTML内部的样式表。
    2. 外部样式表：通过使用link标签引入的样式表。
    3. 嵌入式样式表：通过style属性出现在标签内部的样式表。

    根据使用的方式分为

    1. 标签样式表：直接修改某种标签的样式表。
    2. 类样式表：使用"."+"类名"来表示的样式表。（使用时通过使用class属性来表示使用的是哪个类样式表。）
    3. id样式表：使用"#"+"id名"来表示的样式表。（使用时通过使用id属性来表示使用的是哪个id样式表。）
    4. 组合样式表：使用div+上面三种样式表的样式表。（使用时在div内指定使用的是哪个样式表。）

    2. 代码示例

    接下来的代码将解释什么是内部样式表、外部样式表、嵌入式样式表、标签样式表、类样式表、id样式表和组合样式表。

    1. <html>
    2. 	<head>
    3. 		<title>样式表测试</title>
    4. 		<meta charset="utf_8">
    5. 		<!-- 这里面是内部样式表，使用css语句-->
    6. 		<style type="text/css">
    7. 			p{
    8. 				color:red;
    9. 			}
    10. 			.f12{
    11. 				font-size:20px;
    12. 			}
    13. 		</style>
    14. 		<!-- 这里是引入外部样式表-->
    15. 		<link rel="stylesheet" href="css/csscode1.css">
    16. 	</head>
    17. 	<body>
    18. 		<p>样式表测试一</p>
    19. 		<p class=f12>样式表测试二</p>
    20. 		<p id=p10>样式表测试三</p>
    21. 		<p style="font-size:60px;font-weight:bolder;color:yellow;">样式表测试四</p>
    22. 		<div>
    23. 			<p>组合样式表测试一</p>
    24. 			<span class="f10">组合样式表测试二</p>
    25. 			<p class="f10">组合样式表测试三</P>
    26. 		</div>
    27. 	</body>
    28. </html>
    1. #p10{
    2. 	background-color:pink;
    3. 	font-size:24px;
    4. 	font-weight:bolder;
    5. 	font-style:italic;
    6. 	font-family:"华文彩云";
    7. 	}
    8. 	
    9. div p{
    10. 	color:blue;
    11. 	}
    12. 	
    13. div .f10{
    14. 	font-size:32px;
    15. 	font-family:"黑体";
    16. 	}

    这里使用先直接在HTML文件中使用内部样式表来存放标签样式和类样式修改所有的p标签和指定class的标签。之后使用link来引用CSS文件csscode1，这便是外部样式表，通过将样式放在一个独立的css文件中，再通过link将外部样式表引用到HTML文件中。

    3. 盒子模型

    在网页设计中，经常会将网页设计成多个模块，再对每个模块分别进行设计。在分模块时，我们要使用样式表来将多个模块的位置进行划分。经常使用的三个样式分别为

    border：用来设计模块的边框

    margin：用来设计模块的外边距

    padding：用来设计模块的内填充

    代码示例

    1. <html>
    2. 	<head>
    3. 		<title>CSS盒子模型测试</title>
    4. 		<meta charset="utf-8">
    5. 		<style type="text/CSS">
    6. 			body{
    7. 			margin:0px;
    8. 			padding:0px;
    9. 			}
    10. 		</style>
    11. 		<link rel="stylesheet" href="css/csscode2.css">
    12. 	</head>
    13. 	<body>
    14. 		<div id="div1">
    15. 			<div id="div2">
    16. 				<div id="div3">nbsp;</div>
    17. 			</div>
    18. 		</div>
    19. 	</body>
    20. </html>
    1. #div1{
    2. 	width:400px;
    3. 	height:400px;
    4. 	background-color:greenyellow;
    5. 	/* 1. border 边框样式 */
    6. 	border-width:1px;
    7. 	border-style:solid;
    8. 	border-color:blue;
    9. }
    10. #div2{
    11. 	width:150px;
    12. 	height:150px;
    13. 	background-color:darkorange;
    14. 	
    15. 	margin-top:100px;
    16. 	margin-left:100px;
    17. 	
    18. 	padding-top:50px;
    19. 	padding-left:50px;
    20. }
    21. #div3{
    22. 	width:100px;
    23. 	height:100px;
    24. 	background-color:aquamarine;
    25. }

    运行结果如下

    4. CSS中的定位

    绝对定位：absolute，可以使用left和top来确定组件的位置

    相对定位：relative，需要配合float属性来使用（float有两个值，right：向右，left：向左） 

    代码示例

  • 相关阅读:
    来n遍剑指--04. 二维数组中的查找
    揭秘Spring面试：吃透八股文，轻松拿下Offer！
    在linux虚拟机上安装docker（我的实践）
    vue中将three.js导入的3D模型中原本带有的动画进行播放
    LeetCode 232.用栈实现队列
    手把手教你用Python操纵Word自动编写离职报告
    【Rust日报】2022-11-26 yew发布0.20
    电商平台API接口采集电商平台淘宝天猫京东拼多多数据获取产品详情信息，销量，价格，sku案例
    idea 插件 checkstyle 规则示例和说明
    文本生成图像工作简述--概念介绍和技术梳理
  • 原文地址：https://blog.csdn.net/m0_71987537/article/details/125406397