Web--CSS

已于 2022-04-15 16:55:54 修改
阅读量316 收藏
点赞数
分类专栏： CSS 文章标签： css
于 2022-03-24 01:06:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46818691/article/details/123700433
版权

目录

CSS摘要

1、HTML中嵌入CSS样式的第一种方式：内联定义

2、HTML中嵌入CSS样式的第二种方式：定义内部样式块对象

3、HTML中嵌入CSS样式的第三种方式：链入外部样式表文件

4、隐藏样式

5、文本装饰样式

6、设置鼠标悬停效果

7、内边距和外边距(补丁)

8、float浮动效果

9、定位样式position及光标

CSS摘要

1、什么是CSS？
    Cascading Style Sheet
    层叠样式表语言（不是编程语言，属于样式表语言，没有变量、数据类型、控制语句...）
    CSS其实是专门用来修饰HTML的，让HTML更好看。
    CSS是HTML的化妆品。

2、CSS是为HTML服务的，所以HTML还是主体，CSS是依附在HTML上的，
所以进行CSS的开发，我们还是需要新建html/htm文件。

3、在HTML中怎么嵌入CSS样式呢？三种方式
    第一种方式：内联定义
    第二种方式：定义内部样式块对象
    第三种方式：链入外部样式表文件（这种方式最常用！）

4、关于选择器的优先级：

    标签选择器优先级最低。
    其次是类选择器。
    最高优先级是id选择器。

    还有什么疑问的，可以自行测试以下！

5、常见的CSS样式

1、HTML中嵌入CSS样式的第一种方式：内联定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS样式的第一种方式：内联定义</title>
	</head>
	<body>
		
		<!-- 
			内联定义语法格式？
				<标签 style="样式名 : 样式值; 
							样式名 : 样式值; 
							样式名 : 样式值;"></标签>
				
				style：风格，样式。
				任何一个HTML标签都可以指定style属性。
		 -->
		<div id="div1" style="background-color : #CCCC33; 
							width : 300px; 
							height: 300px;
							position : absolute;
							top: 100px;
							left: 100px;
							border-style : solid;
							border-color : red;
							border-width : 1px;">
			
		</div>
		
	</body>
</html>

2、HTML中嵌入CSS样式的第二种方式：定义内部样式块对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS样式的第二种方式：定义内部样式块对象</title>
		
		<!-- head标签中使用style标签，定义样式块对象 -->
		<style type="text/css">
			/*
				这是CSS的注释！！！！！！
				在CSS的地盘中，和java的注释相同！！！！
			*/
		   /* 
		   这里应该怎么写样式，语法是什么？
				选择器 {
					样式名 : 样式值;
					样式名 : 样式值;
					样式名 : 样式值;
					样式名 : 样式值;
					样式名 : 样式值;
					....
				}
				
				CSS中常见的选择器包括：最常用的三种选择器。
					标签选择器
					id选择器
					class选择器
		   */
		  /* 
		  标签选择器，很简单：
			标签名 {}
		  */
			div{ /* 作用于所有的div元素*/
				background-color: aqua;
				width: 100px;
				height: 100px;
				border-color: red;
				border-style: solid;
				border-width: 10px;
			}
			/* ID选择器
				#id{} 只作用于id这个元素
			 */
			#username {
				width: 400px;
				height: 30px;
				border-color: black;
				border-style: solid;
				border-width: 1px;
			}
			
			/* 类选择器
				.class {} 样式作用于当前网页中某一类的标签
			 */
			.student {
				font-size: 12px;
				color: #FF0000;
			}
		 
		</style>
		
	</head>
	<body>
		
		<div>
			
		</div>
		
		<div>
			
		</div>
		
		<div>
			
		</div>
		
		<br>
		<br>
		<br>
		
		<!-- 怎么才能让样式作用于某1个标签，可以使用id选择器 -->
		<input type="text" id="username" />
		
		<hr>
		
		<!-- class属性，任何一个标签都有，class相同的，可以看做是同一类标签。 -->
		<span class="student">文本内容span</span>
		
		<p class="student">文本内容：段落p标签</p>
		
		<br><br><br><br><br><br><br><br><br><br><br>
		
	</body>
</html>

 3、HTML中嵌入CSS样式的第三种方式：链入外部样式表文件

 外部样式表文件

#div1 {
	background-color: #FF0000;
	width: 100px;
	height: 100px;
}

/* 标签选择器 */
input {
	/* border-style: solid;
	border-color: red;
	border-width: 1px; */
	
	border : solid 1px red;
}

/* 类选择器也可以使用 */
.myinput {
	border : solid 2px blue;
}

#username {
	border : double 3px black;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入CSS样式的第三种方式:链入外部样式表文件</title>
		
		<!-- 引入外部独立的CSS样式表文件 -->
		<!-- 在web前端开发中，这种方式是最常用的！ -->
		<link rel="stylesheet" type="text/css" href="css/1.css"/>
		
	</head>
	<body>
		<div id="div1">
			
		</div>
		<!--标签选择器优先级，id>class>标签-->
		<input type="text" class="myinput" />
		<input type="text" class="myinput"/>
		<input type="text" id="username" class="myinput"/>
		
		
	</body>
</html>

 4、隐藏样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>隐藏样式</title>
		<style type="text/css">
			#citysOfChina {
				display: none; /* 隐藏*/
			}
			
			input {
				display: block; /* 显示*/
			}
			
			ul {
				/* list-style-type: circle; */
				list-style-type: none;
			}
			
			ol {
				/* list-style-type: none; */
				list-style-type : upper-roman;
			}
		</style>
	</head>
	<body>
		
		<ol>
			<li>水果</li>
			<li>蔬菜</li>
			<li>茶</li>
		</ol>
		
		<ul>
			<li>中国
				<ul id="citysOfChina">
					<li>北京</li>
					<li>天津</li>
				</ul>
			</li>
			<li>美国</li>
			<li>日本</li>
		</ul>
		
		<input type="text" />
		
	</body>
</html>

5、文本装饰样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本装饰样式</title>
		<style type="text/css">
			#baidu {
				text-decoration : underline;
				/* text-decoration : overline; */
				/* text-decoration : line-through; */
				/* text-decoration : blink; */
			}
			
			#baidu2 {
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		
		<div id="baidu">百度</div>
		
		<a id="baidu2" href="http://www.baidu.com">百度</a>
		
		
	</body>
</html>

6、设置鼠标悬停效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置鼠标的悬停效果</title>
		
		<style type="text/css">
			/* :hover 是专门用来设置鼠标悬停效果的(是内容效果，而不是光标效果) */
			span:hover {
				color: red;
				font-size: 20px;
			}
			
			/* 注意：:hover在使用的时候，这个冒号两边都是不允许有空格的。 */
			input:hover {
				border-color: black;
			}
		</style>
		
	</head>
	<body>
		
		<span>我是一个段落</span>		
		<span>我是一个段落</span>
		
		<input type="text" />
		
	</body>
</html>

 7、内边距和外边距(补丁)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内边距和外边距</title>
		<style type="text/css">
			#div1 {
				width: 300px;
				height: 300px;
				background-color: #00FFFF;
				border: solid 1px red;
                /*在div1这个节点内部左侧打补丁/
				/* padding:内补丁 */
				padding-left: 20px;
			}
			#div2 {
				width: 100px;
				height: 100px;
				background-color: black;
				border: solid 1px red;
				/* 在div2这个节点顶部top打一个补丁，这个补丁离top 10px */
				/* margin:外补丁 */
				margin-top : 10px;
			}
		</style>
	</head>
	<body>
		
		<!-- 盒子套盒子 -->
		<!-- 如果盒子套盒子，需要定位的话，可以使用外补丁和内补丁。 -->
		<div id="div1">
			<div id="div2">
				
			</div>
		</div>
		
	</body>
</html>

8、float浮动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>float浮动效果</title>
		<style type="text/css">
			img {
				float: right;
			}
		</style>
	</head>
	<body>
		<p>
			<img src="img/lmt.gif" />
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
			《黛玉葬花》是文学名著《红楼梦》中的经典片段。林黛玉最怜惜花，觉得花落以后埋在土里最干净，
			说明她对美有独特的见解。她写了葬花词，以花比喻自己，在《红楼梦》中是最美丽的诗歌之一。
			贾宝玉和林黛玉在葬花的时候有一段对话，成为《红楼梦》中一场情人之间解除误会的绝唱。
		</p>
	</body>
</html>

9、定位样式position及光标

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位样式position</title>
		<style type="text/css">
			#div1 {
				background-color: red;
				border: solid 1px black;
				width: 100px;
				height: 100px;

				/* 定位 */				
				position: absolute;
				top: 100px;
				left: 100px;
			}
			
			#baidu:hover {
				/* cursor为设置光标；pointer为变成小手 ;
上面的hover是为了设置color：blue才写的与cursor无关*/
				cursor: pointer ; /* 尽量不要使用hand，有浏览器兼容问题！*/
				text-decoration: underline;
				color: blue;
			}
		</style>
	</head>
	<body>
		
		<div id="div1">
			<span id="baidu">百度</span>
		</div>
		
	</body>
</html>

iiiis310
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WEB自动化_鼠标事件(悬停、单击、右击、双击、拖动)
lkr
06-28 940
WEB自动化_鼠标事件(悬停、单击、右击、双击、拖动)
CSS常用样式
qq_43389202的博客
07-14 509
css概述：表现 Cascading Style Sheets 层叠式样式表 1.html与css的结合方式： ① 行内式：html中的标签属性 style ：适用于单纯只有一个标签需要设置时的特 殊样式。如果多个标签需要应用同一个样式，建议采用内嵌式。 格式： 样式名称：样式值; 样式名称：样式值; 样式名称：样式值; ② 内嵌式：建议在head中使用，使用标签 style.适用于当前页面多个标签使用同 一个样式。 <style type="text/css"> p{ fo
CSS 总结
Yt612的博客
10-02 2163
css 总结
＜style type=“text/css“＞详解
Protinx的博客
11-15 8700
type="text/css"是指定MIME类型，其中： text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件中应用CSS样式，最常用的有三种方法： 1.内部引用 所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。 2.外部引用 外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果，可将CSS做成单独文件。不过使.
[Web开发]自学笔记5：style标签
weixin_46285081的博客
03-01 743
1.定义 <style> 标签用于为 HTML 文档定义样式信息。 style 元素可以出现在 HTML 文档中的各个部分，一个文档可以包含多个 style 元素。 2 .属性 3 .实例 <!DOCTYPE html> <html> <head> <title>第一个程序</title> <sty...
web-3d球体-html css js
11-10
使用纯html、css、js代码实现一个3d旋转球体 包含星空背景图、jquery文件、以及html文件
workshop-web-css
05-23
Workshop-Web-CSS[CSS选择器]（ ）[ADOBE COLORS]（ ）[box-sizing]（ ）
Responsive-Web-Design-CSS
03-14
响应式Web设计CSS响应式Web设计CSS
WEB--css课件
05-18
Css课件，交你轻松掌握CSS入门知识， 在此基础上可以进一步提高
Web知识-CSS 参考手册
最新发布
02-27
Web知识-CSS 参考手册
3.网页前端入门之style属性
d3582077的专栏
01-09 1796
相对于标签原有的属性，有些都可以用样式来代替，比如font标签的元素，它的color，size属性，我也可以用style来代替。可以看到pre元素的边框宽度是依据浏览的宽度来的，而a元素的边框是依据文本的宽度来的，可以用width属性显式指定元素的宽度。而样式就可以描述这些元素的属性，比如元素里面的文本颜色，字体大小，背景图片，有无边框，以及它的位置,相对于包含它的元素，而标签属性是这样指定的属性加等号，然后是属性值，属性值有引号，以空格分开每一个属性color="green"。
web学习笔记（2）——style样式使用的一些小案例
ck3207的博客
05-28 3232
没有样式的H5是没有灵魂的。style样式有三个属性：media，scope，type。type目前是统一的值“text/css”，用来指定样式。scoped 属性是布尔属性。如果使用该属性，则样式仅仅应用到 style 元素的父元素及其子元素，该功能并不是所有浏览器支持，据我所知，firefox支持该功能。media是用来指定样式适用的媒体，其值有：screen、tty、tv、projectio...
零基础学Web 04（style标签）
ruoruoruo666的博客
04-15 1749
零基础学Web 04 style元素 定义 <style>标签用于为HTML文档定义样式信息。 属性 实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>style样式</title> <style type="text/css"> h1 {color: yellow}
Web笔记（二）---CSS基础
上班哪有不疯的i(╯‵□′)╯︵┻━┻
04-09 1171
引入CSS样式 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义 <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} </style> </head> 语法中，style标签一般位于head标签中title标签...
CSS(七) css列表样式（ul）
青柠晶晶的博客
01-25 5314
CSS列表属性作用如下： 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 1.列表 在HTML中，有两种类型的html列表： 无序列表-列表项标记用特殊图形（如：小黑点、小方框等） 有序列表-列表项的标记有数字或字母 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 2.不同的列表项标记 list-style-type属性指定属性列表...
基本的web页面样式（就是一开始把所有的基础样式都规定好）
less_cold的博客
09-05 1429
body, html, div, h1, h2, h3, h4, h5, h6, p, ul, li, ol, dl, dt, dd, table, button, tr, td, form, input, textarea, button, th, td, img, b, a, span {/*上面所有标签都设置没有边界，没有填充，即内外
html style属性行距,WEB基础之HTML的各个标签的默认样式
weixin_34125314的博客
06-05 344
在HTML中，了解各个标签的默认样式，有助于理解代码的表现，也有利于精简代码。(๑•́ ₃ •̀๑)head{ display: none }body{ margin: 8px;line-height: 1.12 }button, textarea,input, object,select { display:inline-block;}ol, ul, dir,menu, dd{ margin-...
Web前端开发 CSS样式表引入方式
m0_52841254的博客
06-06 1119
一、行内样式 使用标签的style属性进行设置样式 <p style="font-size:30px;color:red;">在标签内用style属性来添加css样式<br>style="font-size:30px;color:red;"</p> 二、内嵌样式 在head标签中使用style标签，在style标签中使用选择器进行样式设置 <!DOCTYPE html> <html lang="en"> <head>
style是什么意思
lin123_00的博客
04-27 5240
我们在学习前端知识的时候经常会用到一个style属性，那么style究竟是什么意思呢？本篇文章我们就来给大家介绍一下关于style的意思，下面我们来看具体内容。 <style> 标签用于为 HTML 文档定义样式信息，在 style 中，您可以规定在浏览器中如何呈现 HTML 文档。 type属性是必需的，定义style元素的内容。唯一可能的值是 "text/css"，style ...
web-print源码
12-30
Web-print源码是一个用于实现网页打印功能的程序源代码。通过这段代码，我们可以在网页中添加一个打印按钮，用户点击该按钮后可以将网页的内容以适合打印的格式输出到打印机进行打印。 Web-print源码通常会包含以下...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值