【CSS教程】基础教程01

最新推荐文章于 2022-10-18 11:54:02 发布
最新推荐文章于 2022-10-18 11:54:02 发布
阅读量117 收藏
点赞数
分类专栏： Web框架 文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43797885/article/details/94400881
版权

一、基本语法和页面引用

  1. 基本语法
    1】给多个元素添加同一种样式：p,h,div{}
    2】样式的优先顺序：设计者设计的样式>浏览器用户自定义的样式>浏览器自设样式
    内联样式>内部样式(style)>外部样式
    3】设置边框：border:2px blue solid
    4】设置内边距：padding：16px
    5】注：样式优先顺序的本质是距离需要设置的内容越近则优先级越高；
    强制优先级：当我们为样式样式颜色的后面加上“空格+！important”时，该样式的优先级时最高的，可以为一个HTML文档引入多个css样式表

二、文本样式设置

#headers{
				color: green; # 设置文字的颜色
				font-size: 20px; # 设置文字的大小
				font-family: "微软雅黑"; # 设置文字的字体
				font-style: normal; # 设置文字的字形
				font-weight: 600; # 设置文字的粗细
				line-height: 40px; # 设置文字的行间距
				text-decoration:underline;
				text-indent: 24px;	# 设置文字首行缩进
				text-align: center; # 设置文字的对齐方式
			}

<div id="headers">
			欢迎进入图书管理系统<br />
			gfb
		</div>

三、颜色表示法

<style type="text/css">
			h2{
				font-size: 40px;
				color: red; # 颜色表示法
			}
			span{
				color: rgb(100,0,0); # 使用rgb表示颜色
			}
			p{
				color: #f00; # 使用16进制数值进行颜色表示
			}
		</style>

<body>
		<h2>欢迎进入王者荣耀1</h2>
		<span>张飞</span>
		<p>hello</p>
	</body>

四、选择器

			/*标签选择器*/
			div{
				color: green;
			}
			/*id选择器*/
			#d1{
				font-size: 30px;
			}
			/*类选择器*/
			.c1{
				font-family: "微软雅黑";
			}
			/*层级选择器*/
			#d1 .c2 #d4{
				font-size: 50px;
			}
			
			/*组选择器：如果有同样的样式设置就使用组选择器，比如我们要对id=d3和d4的div进行样式改变*/
			#d3,#d4{
				width: 50px;
				height: 50px;
				background-color: red;
				
			}	

<div id="d1" class="c1">
			<div id="d2" class="c2">
				<div id="d3" class="c3">
					hello world1
				</div>
				<div id="d4" class="c3">
					hello world2
				</div>
			</div>
		</div>

伪类选择器
link:访问前样式-只适用于a标签
visited：访问后样式-只适用于a标签
action：点击时样式-适用于所有标签
hover：移上去样式-适用于所有标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				background-color: red;
			}
		
			div:hover{
				background-color: blue;
			}
			div:active{
				background-color: yellow;
			}
			
		</style>
	</head>
	<body>
		<div id="d1">
			
		</div>
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			a{
				/*text-decoration: none;  /*祛除下划线*/*/
				font-size: 100px;	
			}
			a:link{color: pink;}
			a:visited{color: blue;}
			a:hover{color: green;}
			a:active{color: yellow;}
			
		</style>
	</head>
	<body>
		<a href="">百度</a>
	</body>
</html>

五、盒模型

  1. 基础语法
<style type="text/css">
			body{
				width: 100%;  /*设置div的宽度*/
				height: 100%;  /*设置div的高度*/
				background-color: pink;  /*设置背景颜色*/
				/*padding: 50px solid red;*/
				/*border: 50px solid orange;*/
				/*margin-top: 0px;*/
				
				
				/*border-top-width: 10px;
				border-top-color: orange;
				border-top-style:solid;
				border-color: red;
				border-style: dashed;
				border-width: 5px;*/
				/*border: 10px dashed green;
				padding-top：20px;      
				padding-left:30px;      
				padding-right:40px;      
				padding-bottom:50px;    */
				
			}
			
			
		</style>

<body>
		<div id="d1">
			
		</div>
	</body>

在这里插入图片描述

  1. 盒子模型的正式尺寸
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子的真实尺寸</title>
    <style type="text/css">
        .box01{width:50px;height:50px;background-color:gold;}
        .box02{width:50px;height:50px;background-color:gold;border:50px
         solid #000}
        .box03{width:50px;height:50px;background-color:gold;border:50px
         solid #000;padding: 50px;}
    </style>
</head>
<body>
    <div class="box01">1</div>
    <br />
    <div class="box02">2</div>
    <br />
    <div class="box03">3</div>
</body>
</html>

注意：一定要看上图，border是介于padding和margin之间的

  1. 盒子模型使用技巧

1】技巧一：自动选择水平居中

/*外边距,位置设置为自动选择位置*/
				margin:30px auto;

2】技巧二：div之间无缝连接

<style type="text/css">
			div{
				background-color: green;
				width: 50px;
				height: 50px;
				margin: 1px;
			}
		</style>

3】在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d2{
				width: 100px;
				height: 100px;
				background: pink;
				margin: 50px;
			}
			#d1{
				width: 300px;
				height: 300px;
				background: green;
				margin: 200px;
				overflow: hidden;
			}
		</style>
		
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				
			</div>
		</div>
	</body>
</html>

六、CSS元素溢出问题

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：
1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				width: 200px;
				height: 100px;
				background-color: red;
				overflow: hidden;
				
				
			}
			#d2{
				width: 100px;
				height: 200px;
				background-color: green;
				
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<div id="d2">
				
			</div>
		</div>
	</body>
</html>

七、块元素、内联元素和内联块元素

1】按元素类型分类
在这里插入图片描述
2】display元素：
display:block–表示按照块的特性显示
display:inline–表示按照内联的特性显示
display:inline-block–表示按照内联块的特性显示
display:none–表示不在页面中显示该标签

3】display:none和visibility:hidden
display:none—占用空间的隐藏
visibility:hidden–不占空间的隐藏

八、浮动

  1. 添加浮动
    在这里插入图片描述
  2. 清除浮动
    在这里插入图片描述
    在这里插入图片描述

九、定位

浮动主要是用来做左右叠加，而定位一般用来做上下的叠加
在这里插入图片描述

十、background属性

background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：

background-color 设置背景颜色
background-image 设置背景图片地址
background-repeat 设置背景图片如何重复平铺
background-position 设置背景图片的位置
background-attachment 设置背景图片是固定还是随着页面滚动条滚动

AI study
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础（新手入门教程）
m0_61225117的博客
10-26 3523
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。
css基础教程
content899的博客
09-17 1032
css基础教程 文章目录css基础教程一、css简介二、css语法三、css的引入方式1、内部样式表（内联式）2、外部样式表（外联式）3、内联样式表（内嵌式）四、css选择器1、元素选择器2、类选择器3、id选择器4、群组选择器5、包含选择器6、伪类选择器7、通配符五、浮动六、定位（position）1、相对定位（relative）2、绝对定位（absolute）3、固定定位（fixed）七、元素属性1、块级元素2、行内元素行内元素转为块级元素-------->display : block;块级元素
CSS 基础教程：CSS 语法
王建的博客
07-11 4090
CSS 语法 CSS 规则集（rule-set）由选择器和声明块组成： 选择器指向您需要设置样式的 HTML 元素。 声明块包含一条或多条用分号分隔的声明。 每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。 多条 CSS 声明用分号分隔，声明块用花括号括起来。 实例 在此例中，所有 元素都将居中对齐，并带有红色文本颜色： p { color: red; text-align: center; } 例子解释 p 是 CSS 中的选择器（它指向要设置样式的 HTML 元素：
HTML+CSS系列教程
Akgadis的博客
10-18 2001
两种编程语言，一般需要配合使用，是网站开发的基础语言。浏览器把代码解析后的样子就是我们看到的网站。< dl>:定义列表< dt>:定义专业术语或名词< dd>:对名词进行解释和描述（列表项需要添加标题和对标题进行描述的内容）eva。
CSS教程I
weixin_47250504的博客
06-26 196
CSS一、CSS 创建——插入样式表1、外部样式表2、内部样式表3、内联样式4、多重样式5、多重样式优先级6、多重样式优先级深入概念二、CSS背景1、如何设置固定的背景图像（图像不随页面其他部分滚动）2、CSS背景属性三、CSS文本格式1、文本颜色2、文本的对齐方式3、文本修饰4、文本转换 一、CSS 创建——插入样式表 1、外部样式表 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 < link> 标签链
css滤镜基础教程
10-30
CSS滤镜基础教程 在网页设计领域，CSS滤镜是一种强大的技术，允许开发者为HTML元素添加视觉特效，如模糊、渐变、颜色调整等。随着技术的不断发展，设计师们已经不再满足于静态的网页，他们希望通过动态效果提升用户...
css基础教程之CSS基础语法
09-25
在本教程中，我们将深入探讨CSS的基础语法，包括如何应用样式以及选择器的使用。 首先，我们需要了解CSS的核心目标是实现表现与结构的分离，即HTML负责内容的结构，而CSS负责内容的呈现方式。接下来，我们将介绍四...
CSS网页设计基础教程
07-22
资源名称：CSS 网页设计基础教程 教程内容：00-00-课程介绍01-01-html01-02-段落标签01-03-图片标签01-04-列表标签01-05-区块标签01-06-链接标签01-07-span标签02-01-css02-02-在网页中嵌入CSS02-03-选择器 控制...
CSS基础视频教程
07-22
内容包括css基础、css选择器上、css属性、背景、颜色、边框、字体文本文本装饰、列表、css元素分类等 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Div+Css基础入门教程
07-25
Div+Css基础入门教程
pi_heif-0.17.0-cp39-cp39-manylinux_2_31_armv7l.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ubuntu20.04-ssh9.8p1-ssl3.0.14-focal-deb-amd64升级加固脚本.zip
07-27
若有新版本请查看文章最后附件地址：https://blog.csdn.net/liuxin638507/article/details/132450367 特点： 1、同时升级openssh与openssl，采用deb包形式，一键快速升级版本，无需每台单独再次进行编译， 2、隐藏openssh-版本号(openssh9.8p1及之后隐藏版本号还未找到方法) 3、已默认安全加固（已有配置跳过） 安装： 执行 bash upgrade_ssl_ssh_ubuntu.sh 进行安装 注意，升级安装后，确保sshd服务正常，请新开终端进行验证测试 验证 openssl版本： openssl version OpenSSL 3.0.14 4 Jun 2024 (Library: OpenSSL 3.0.14 4 Jun 2024) openssh版本： ssh -V OpenSSH_9.8p1, OpenSSL 3.0.14 4 Jun 2024
avif-0.5.0-cp36-cp36m-manylinux1_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
教务管理系统-毕业设计.zip
07-27
教务管理系统-毕业设计.zip
pillow_jxl_plugin-1.2.5-cp39-none-win_amd64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-win_amd64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
[毕设]高效人事考勤管理系统.zip
07-27
[毕设]高效人事考勤管理系统
人力资源培训.HR如何与业务部门进行沟通.ppt
07-27
人力资源培训.HR如何与业务部门进行沟通.ppt
毕业设计：基于Springboot的健身俱乐部网站 PPT
07-27
随着社会发展，健身俱乐部的管理面临日益严峻的挑战。众多用户倾向于通过互联网获取信息，但健身相关信息繁杂且真伪难辨。为便于用户更有效地获取本健身俱乐部的管理信息，设计一个既安全又高效的官方网站显得尤为重要。 本文旨在打造一个安全、简洁的健身俱乐部网站，助力用户快速查找健身课程、健身器材、会员卡详情及新闻公告等信息，以解决当前健身俱乐部管理信息混乱、难以辨识的问题。该系统基于Spring Boot架构技术，运用Java编程语言与MySQL数据库进行开发设计。通过对健身俱乐部业务流程的深入分析，我们明确了其功能性和非功能性需求，并据此设计了包含个人用户、管理员和教练三大模块的健身俱乐部网站。 此系统不仅为用户提供了一个便捷实用的健身俱乐部在线平台，使他们能够迅速找到适合自己的健身俱乐部，还允许用户浏览健身课程和器材信息，并支持在线留言功能。同时，管理员可通过后台管理系统轻松管理用户和教练的信息，亦能发布在线留言，以便用户及时获取最新的健身课程信息。如此，用户便能安全、高效地获取健身俱乐部的管理信息。
CSS基础教程：DIV高度与高度控制
这份`DIV CSS基础教程全攻略`详细地阐述了如何利用CSS来控制元素的高度，包括基本的`height`属性、`max-height`、`min-height`，以及`line-height`和`overflow`属性的使用。通过学习这些内容，初学者可以更好地掌握...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值