css选择器+字体排版+背景

最新推荐文章于 2024-10-02 15:35:50 发布

七野..

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量292

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_64719055/article/details/122333637

版权

这篇博客详细介绍了CSS的四种引入方式：行内式、嵌入式、外部式和外部式import，并通过实例展示了如何在HTML中应用CSS来美化页面。同时，文章还讲解了选择器的使用，包括元素选择器、ID选择器和类选择器。此外，还探讨了CSS的文本属性样式和背景设置，包括字体大小、颜色、下划线、文本对齐等。

摘要由CSDN通过智能技术生成

1.css：层叠式样式表

作用：美化HTML标签

问题：在已有的HTML页面中如何引入css样式代码

（1）行内式样式引入

style属性中调用css样式的语法

属性名：属性值；

属性名：属性值；属性名：属性值；属性名：属性值；
<body>
		<font size="7" color="red" style="background: yellow;">好好学习，天天向上</font>
	</body>
（2）嵌入式样式引入

必须在head标签中编写style标签，还要借助css选择器结合使用

css选择器：在标签通过特定的属性进行设置记号，将来通过嵌入式的

方式拿到记号即可设置指定标签的样式。

任何一个标签上自带一个记号（选择器）称为元素选择器||标签选择器
<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style type="text/css">
			h1{
				color: red;
			}
			
			
		</style>
		
	</head>
	<body>
		
		<h1>我是谁我在哪里奋斗</h1>
	
	</body>
（3）外部式link引入

必须在head标签内通过link标签引入外部式css文件进行设置样式
<head>
		<meta charset="utf-8" />
		<title></title>
		
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		
	</head>
<body>
		<p>我是p段落标签</p>
	</body>
（4）外部式import引入（很少用）

在head中必须编写style标签，通过import关键词引入

2.选择器的使用

在标签上做记号，可以在style标签中借助选择器设置标签的样式

选择器：

1.元素选择器其实就是标签本身名称

2. ID选择器在标签上设置一个ID属性 ID属性的值自定义

ID属性的值在一个页面上值允许出现一次，否则覆盖

覆盖：样式不会覆盖，但是通过js获取标签时会覆盖

必须在指定选择器的前面+#

3. 类选择器在标签上设置一个class属性， class属性自定义，可以相同

                 必须在指定选择器的前面+点(.)

语法：css引入方式一般是嵌入式或外部式引入

选择器名称{

属性名：属性值；

          属性名：属性值；

          属性名：属性值；

        }
<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
		/* 标签选择器 */
			div{
				width: 100px;
				height: 100px;
				/* 设置变宽线 */
				border: 1px solid red;
			}
			/* ID选择器设置css */
			#xpw{
				background-color: #FF0000;
			}
			/* 类选择器 */
			.zz{
				background-color: green;
			}
		</style>
		
		
	</head>
	<body>
		
		<div id="xpw"></div>
		<br>
		<div class="zz"></div>
		<br>
		<div class="zz"></div>
			
		
	</body>

3.css文本属性样式

<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			div{
				width: 100%;
				height: 30px;
				border: 1px solid red;
				background: palegoldenrod;
			}
			
			#odiv1{
				/* background-color: #FFFF00; */
				font-size: 1.25rem;
			}
			#odiv2{
				/* 字体颜色 */
			color: green;
			}
			#odiv3{
				/* 设置下划线 */
				text-decoration: underline;
			}
			a{
				/* 去除下划线 */
				text-decoration: none;
			}
			#odiv4{
				/* 设置字体加粗 */
				font-weight: bold;
			}
			#odiv5{
				/* 设置字体倾斜 */
				font-style: oblique;
			}
			#odiv6{
				/* 设置字体类型 */
				font-family:"华文彩云" ;
				/* 设置文字之间的间距 */
				letter-spacing: 10px;
				/* 设置文字的缩进（针对第一个） */
				/* text-indent: 40px; */
				/* 设置文本居中对齐 */
				text-align: center;
				/* 垂直居中 利用height和line-height行高 */
				height: 100px;
				line-height: 50px;
			}
		</style>
		
	</head>
	<body>
		<div id="odiv1">会打电话的</div>
		<br>
		<div id="odiv2">我用多久放假</div>
		<br>
		<div id="odiv3">等多久到家</div>
		<br>
		<div><a href="">百度一下</a></div>
		<br>
		<div id="odiv4">大家都减肥</div>
		<br>
		<div id="odiv5">打击打击</div>
		<br>
		<div id="odiv6">附近的姐姐</div>
		<br>
		<div></div>
		<br>
		<div></div>
	</body>

3.css背景

<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			body{
			/* 设置网页背景图片 */	
			background-image: url(img/1.jpeg);/*当图片过小时，会自动平铺 */
			/* 横向平铺 */	
			/* background-repeat: repeat-x; */
			/* 纵向平铺 */
			background-repeat: repeat-y;
			/* 不平铺 */
			background-repeat: no-repeat;
			}
		</style>
		
	</head>