CSS样式（下）

最新推荐文章于 2022-09-30 11:46:20 发布
最新推荐文章于 2022-09-30 11:46:20 发布
阅读量202 收藏
点赞数
分类专栏： HTML/CSS/JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygb_2739555482/article/details/112689003
版权

                        CSS样式（下）

   

     position

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title> 
	</head>
	<body>
		<!--fixed脱离文档流，相对于body进行定位-->
		<!--<div style="border: 1px solid black; width:300px; height:300px;">
			<div  style="width:100px; height:100px;background-color:red ;"></div>
			<div style="width:100px; height:100px;background-color:green;position: fixed;right: 15px;bottom: 15px;"></div>
			<div style="width:150px; height:150px;background-color: blue;"></div>
		</div>-->
		
		<!--relative不会脱离文档流，相对于自身进行定位-->
		<!--<div style="border: 1px solid black; width:300px; height:300px;">
			<div  style="width:100px; height:100px;background-color:red ;"></div>
			<div style="width:100px; height:100px;background-color:green;position: relative;right: 15px;bottom: 15px;"></div>
			<div style="width:150px; height:150px;background-color: blue;"></div>
		</div>-->
		
		<!--absolute脱离文档流，相对于position为非static的父标记进行定位-->
		<div style="border: 1px solid black; width:300px; height:300px;">
			<div  style="width:100px; height:100px;background-color:red ;"></div>
			<div style="width:100px; height:100px;background-color:green;position:absolute;right: 15px;bottom: 15px;"></div>
			<div style="width:150px; height:150px;background-color: blue;"></div>
		</div>
		
	</body>

    margin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				background-color: pink;
			}
			i{
				display: inline-block;
				background-color: yellow;
				/*margin用于设置当前标记距离其他标记的外间距*/
				margin-top: 10px;
				margin-bottom: 20px;
				margin-right: 10px;
				margin-left: 20px;
				/*margin: 50px;*/ /*上下左右都是50px*/
				/*margin:10px 20px;*/ /*上下  左右*/
				/*margin:10px 20px 5px;*/ /*上  左右 下*/
				/*margin:10px 10px 20px 20px;*/ /*上 下 左 右*/
				
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red;">河南省郑州市高新技术开发区</div>
		<span>大学</span><i>apple</i><span>大学</span>
		<div style="border: 1px solid red;">河南省郑州市高新技术开发区</div>
	</body>
</html>

    padding

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			span{
				background-color: pink;
			}
			i{
				display: inline-block;
				background-color: yellow;
				margin-top: 10px;
				/*padding用于设置当前标记距离其他标记的内间距*/
				/*padding-top: 10px;
				padding-bottom:20;
				padding-right: 10px;
				padding-left: 20px;*/
				/*padding: 20px;*/  /*上下左右都是20px*/
				/*padding:10px 20px;*/ /*上下  左右*/
				padding:10px 20px 5px; /*上  左右 下*/
				/*padding:10px 20px 30px 40px;*/ /*上 下 左 右*/
			}
		</style>
	</head>
	<body>
		<div style="border: 1px solid red;">河南省郑州市高新技术开发区</div>
		<span>大学</span><i>apple</i><span>大学</span>
		<div style="border: 1px solid red;">河南省郑州市高新技术开发区</div>
	</body>
</html>

    hover（伪类选择器）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				color: #333;
			}
	/*伪类选择器*/
			a:hover{ 
				text-decoration: underline;
				color: #f50;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
	</body>
</html>

易23
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
三、CSS基础样式（下）
拾荒人博客
09-17 82
1.CSSFloat(浮动) CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 浮动元素之后的其他元素将围绕当前浮动元素显示。 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 如果图像是右浮动，下面的文本流将环绕在它左边： 代码例???? <!DOCTYPE html> &l
css样式
qq_63285385的博客
10-22 130
1.解压文件，将文件夹复制到你的项目中 2.引入CSS文件 <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/> 3.添加图标 <i class="fa fa-home"></i> 3.ID选择器 重点 1.给元素添加ID属性，ID值是唯一，再一个页面不可以重复出现 <div id="div1"></div&gt.
css样式设置
y15518325965的博客
03-06 518
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;CSS的三种设置样式&lt;/title&gt; &lt;!-- 3.外部样式：在外部单独定义一个.css样式的文件，在.html中进行引入。 外部样式的优先级最低，一般有大量的css
css 样式 子选择器
wujian_csdn_csdn的博客
11-01 400
样式控制时，利用标签下包含子标签的方式，会导致只要父标签下的能找到的子标签的话，样式都会生效，可能是孙子或者重孙级别，怎样只控制只是儿子级别的样式控制呢？这时候就需要子选择器，标签之间用> 分割 举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
【HTML】使用style样式隐藏显示下级菜单的方法
口袋里的小龙的专栏
07-25 1575
使用style样式隐藏显示下级菜单的方法
CSS样式初始化commonInitialize.css
01-18
CSS样式初始化是开发过程中一个重要的步骤，它旨在消除浏览器之间的默认样式差异，确保网页在不同浏览器上的一致性表现。"commonInitialize.css"就是这样一个专门用于全局CSS样式初始化的文件。 首先，我们来理解...
CSS学习之一 CSS样式的引入
12-12
2、type，总是设置为“text/css”，描述了使用link加载的数据类型；3、href，值为样式表的URL，可以是相对的也可以是绝对的；4、media，默认值是“all”，说明样式表要运用于表现的媒体，还有其他取值：aural（用于...
course_css样式_
10-02
《CSS样式：构建网页美学的艺术》 在网页设计领域，CSS（Cascading Style Sheets）样式扮演着至关重要的角色，它是赋予网页结构与样式的语言，使得网页内容得以优雅地呈现。"course_css样式_"这一主题，正是围绕CSS...
DW在html中插入css样式方法
09-24
Dreamweaver（DW）是一款常用的网页设计工具，它提供了方便的CSS样式插入功能，帮助设计师高效地管理网页样式。下面我们将详细介绍如何在HTML中使用DW插入CSS样式。 首先，我们需要创建一个新的CSS文件。启动...
JS设置CSS样式的方式汇总
11-30
1. 直接设置style的属性 某些情况...2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height', 100); element.setAttribute('height', '100px'); 3. 设置style的属性 element.setA
CSS 选择所有子元素添加样式的方法
11-19
方法：
鼠标悬浮样式
m0_62094741的博客
11-13 1931
cursor 属性规定要显示的光标的类型（形状）。 1、default 默认光标(通常是一个箭头) 2、auto 默认。浏览器设置的光标。 3、crosshair光标呈现为十字线。 4、pointer 光标呈现为指示链接的指针(-只手) 5、move 此光标指示某对象可被移动。 6、e-resize 此光标指示矩形框的边缘可被向右(东)移动。 7、ne-resize此光标指示矩形框的边缘可被向 上及向右移动(北东)。 8、nw-resize此光标指示矩形框的边缘可被向 上及向左移动(北西)。
css设置子元素的样式
qq_60976312的博客
09-30 4730
css设置子元素的样式
html引用css的写法,html/css路径引用同级、下级、标准写法
weixin_32968239的博客
08-03 3298
在网页制作的过程中，少不了跟路径打交道，比如，包含一个文件，插入一个图片等，与路径都有关系，如果使用了错误的文件路径，就会导致引用失效(无法浏览链接文件，或无法显示插入的图片等)。作为初学者的我，有时会感到困惑「(°ヘ°)，这路径什么鬼Σ (ﾟДﾟ;)，怎么写的啊(⊙_⊙)?，下面我就介绍一下了解到的相对路径与绝对路径。根相对路径(也称相对跟目录)的路径以“/”开头，路径是从当前站点的根目录开始...
CSS属性继承
风海生
06-19 6402
CSS 继承 MDN 的教程：https://developer.mozilla.org/zh-CN/docs/Web/CSS/inheritance 什么是继承呢？ 一个子元素可以从祖先元素继承“可继承属性”的计算值。 可以对比Java的继承来理解，子类的实例调用某方法show()时，如果子类中不存在，则会调用父类中的show()方法，如果父类中也没有，则调用父类的父类中的show()方法，...
CSS设置二级菜单样式
weixin_38891150的博客
04-04 2597
效果如下：代码如下：&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html
css中父级与子级样式设置
u010865136的专栏
12-02 4724
如下图 一、li和.open-resume间无空格 .import-choose.more-choose ul li.open-resume 等同于 .import-choose.more-choose ul .open-resume 影响的是.import-choose.more-choose ul下class='open_resume'的li标签的样式 二、li和.open-resume间有空格 .import-choose.more-choose ul li .open-re
CSS 选择所有子元素添加样式
热门推荐
Kuroko's Development Notes
09-26 4万+
方法：&gt; * 以实际项目中less为例： .lk-toolbar { .el-input { width: 169px; margin-right: 10px; } &gt; * { margin-bottom: 20px; } } 上面代码成功实现了 .lk-toolbar 下一切子元素的 margin...
css设置上标样式、下标样式
Yetian_2000的博客
09-22 4098
使用css属性：vertical-align的值设置text-top（上标）、text-bottom(下标)，另外主要的是要设置上标和下标的元素的字体大小比主体字体小，才有效果。 css样式：<style> div{ font-size: 20px; } div .bottom{ color:red; background-color: gray; vertical-align:text-bottom; font-size: 12px; } div .up{ color: blue; backg
如何在子标签css样式下设置其父标签的css
最新发布
06-03
在 CSS 中，我们可以使用子元素选择器（>）或者后代选择器（空格）来选中父元素。这样，我们就可以在子标签的 CSS 样式下设置其父标签的 CSS 样式。 例如，假设我们有以下 HTML 代码： ``` <div class="parent"> <h1>Title</h1> <p>Some text here.</p> </div> ``` 要在子标签的 CSS 样式下设置其父标签的 CSS 样式，我们可以使用以下代码： ``` .parent > h1 { font-size: 24px; } .parent > p { font-size: 16px; color: #333; } ``` 这里，我们使用了子元素选择器（>）来选中父元素 .parent 下的 h1 和 p 标签。然后，我们可以为 h1 和 p 标签设置不同的 CSS 样式，包括修改其父元素 .parent 的样式。在本例中，我们通过修改 h1 和 p 标签的字体大小和颜色，间接地修改了其父元素 .parent 的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值