前端入门学习笔记十七

最新推荐文章于 2024-10-11 13:58:34 发布

物恰冰可乐

最新推荐文章于 2024-10-11 13:58:34 发布

阅读量81

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/m0_65384293/article/details/128061967

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>16进制RGB值</title>
		 <style type = "text/css">
			 #p1{color:#03FCA1;}
			 #p2{color:#048c02;}
			 #p3{color:#CE0592;}
		 </style>
	 </head>
	 <body>
	 	<p id = "p1">HTML</p>
		<p id = "p2">CSS</p>
		<p id = "p3">html</p>
	 </body>
 </html>

16进制RGB值：
单纯靠“关键字”，满足不了实际开发需求，因此我们还引入了“16进制RGB值”。
所谓的16进制RGB值，指的是类似#FBF9D0形式的值
对于16进制颜色值，有两个色值是需要我们记住的：#000000是黑色，#FFFFFF是白色

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>CSS注释</title>
		<style  type = "text/javascript">
			/* CSS注释 */
			div{color:skyblue;}
		</style>
	</head>
	<body>
		<!-- HTML注释 -->
		<p>HTML CSS html</p>
	</body>
</html>

CSS注释:
注释用于解释代码，以后在您编辑源代码时可能会有所帮助
浏览器会忽略注释
位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>CSS注释</title>
		<style>
			/* 使用元素选择器 定义所有div元素样式 */
			div{
				font-family:黑体;
				font-size:15px;
				font-weight:html;
				color:skyblue;
			}
			/* 使用id选择器 定义个别样式 */
			#div1{
				font-family:宋体;
				font-size:30px;
				font-weight:html;
				color:plum;
			}
		</style>
	</head>
	<body>
		<p id = "div">HTML</p>
		<p id = "div">html</p>
		<p id = "div">css</p>
		<p id = "div1">css</p>
		<P id = "div2">html</P>
		<p id = "div2">plum</p>
	</body>
</html>

CSS注释:
注释用于解释代码，以后在您编辑源代码时可能会有所帮助
浏览器会忽略注释
位于 <style> 元素内的 CSS 注释，以 /* 开始，以 */ 结束

<!DOCTYPE html>
 <html>
	 <head>
		 <meta charset = "UTF-8"/>
		 <title>text-indent</title>
		 <style type = "text/css">
			 p{
				 font-size:15px;
				 text-indent:30px;
			 }
		 </style>
	 </head>
	 <body>
	 	 <h1>赠汪伦</h1>
		 <p>李白乘舟将欲行，忽闻岸上踏歌声。
　　桃花潭水深千尺，不及汪伦送我情。</p>
		 <h1>望庐山瀑布</h1>
		 <p>日照香炉生紫烟，遥看瀑布挂前川。
　　飞流直下三千尺，疑是银河落九天。</p>
	 </body>
 </html>

text-indent:
用于定义块级元素中第一个内容行的缩进。这最常用于建立一个“标签页”效果。
允许指定负值，这会产生一种“悬挂缩进”的效果。
text-indent 属性规定文本块中首行文本的缩进
允许使用负值。如果使用负值，那么首行会被缩进到左边
在 CSS 2.1 之前，text-indent 总是继承计算值，而不是声明值
默认值：   not specified
继承性：   yes
版本：   CSS1
JavaScript 语法：   object.style.textIndent="50px"

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>text-align</title>
		<style>
			#p1{text-align:left;}
			#p2{text-align:center;}
			#p3{text-align:right;}
		</style>
	</head>
	<body>
		<p id = "p1"><strong>HTML</strong></p>
		<P id = "p2"><strong>html</strong></P>
		<P id = "p3"><strong>CSS</strong></P>
	</body>
</html>

text-align:
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。
通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
默认值：   如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
继承性：   yes
版本：   CSS1
JavaScript 语法：   object.style.textAlign="right"
left   把文本排列到左边。默认值：由浏览器决定。
right   把文本排列到右边。
center   把文本排列到中间。
justify   实现两端对齐文本效果。
inherit   规定应该从父元素继承 text-align 属性的值。