CSS文字样式

最新推荐文章于 2024-03-18 11:28:08 发布

weixin_44340137

最新推荐文章于 2024-03-18 11:28:08 发布

阅读量203

点赞数

本文链接：https://blog.csdn.net/weixin_44340137/article/details/102672884

版权

1.初识CSS

<!DOCTYPE HTML>
<html>
<head>
	<title>初识CSS</title>
	<meta charset="UTF-8">
	<!--设置的是文本内容的大小 30px之间不能有空格否则无效 设置字体之间的大小使用冒号而不是分好 所有的符号都必须在英文的状态下进行输入而非中文-->
	<link href="css.css" rel="stylesheet" type="text/css"/>
	<!--link是一个标签，herf告诉你css在那个路径，type说明类型是样式表-->
	
	</head>
	<body>
		<h1 style="color:red;font-size:20px;">CSS的使用方法</h1>
		<h2>CSS的使用方法</h2>
		<p>行内样式</p>
		<p>嵌入样式</p>
		<p>外部样式</p>
		<p>倒入样式</p>
	</head>
	</body>
</html>

在这里插入图片描述 2.css的第一个编程练习

<!DOCTYPE HTML>
<html>
<head>
	<title>CSS的第一个编程练习</title>
	<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
	<style type="text/css">
		h1,h2{color:blue; font-size:30px;}
		p{color:red;font-size:20px;}

	</style>
	</head>
<body>
	<h1>我是标题2，字体颜色是蓝色</h1>
    <p>我是div标签里面的文字，我的字体大小是20px,字体颜色是红色</p>
	<h2>我是标题3，字体颜色是蓝色</h2>
	<p>我是p标签里面的文字，我的字体大小是20px,字体颜色是红色</p>
</body>

在这里插入图片描述 3.css使用方法的优先级

<!DOCTYPE HTML>
<html>
<head>
	<title>选择器</title>
	<meta charset="UTF-8">
	<style>
		p{
			color:red;
			font-size:30px;
		}
		.special{
			color:blue;
		}
		p.special{
			font-size:50px;/*只对p标签进行了设置而没有对别的标签进行设置的项目*/
		}
       .one{
       	text-decoration:underline;/*下划线的意思为文本设置下划线*/
       }
	</style>
	</head>
	<body>
         <h1 class="special">CSS是什么</h1>
         <p><em>CSS</em>层叠样式</p>
         <p class="special one" >用于定义HTML内容在浏览器中的显示样式</p><!--类选择器是通过special来实现的只要使用了class就会实现相应的的样式结构 -->
         <p><em>CSS</em>样式由选择器和声明组成</p>
         <div>
         	<h1>css使用方法</h1>
         	<ul>
         		<li>行内样式</li>
         		<li>内部样式</li>
         		<li>外部样式</li>
         		<li>导入式</li>
         		</ul>
         		<h1>css选择器</h1>
         		<ul>
         			<li>类型选择器</li>
         			<li>ID选择器</li>
         			<li>class选择器</li>
         			<li>后代选择器</li>
         		</ul>
         </div>
	</body>

</html>

在这里插入图片描述 4.css的第二个编程练习

<!DOCTYPE HTML>
<html>
<head>
	<title>css的类的编程练习</title>
	<meta charset="UTF-8">
	<style type="text/css">
		h1{color:red;}
		.special{text-decoration:underline;}
		.one{color:red; }
	</style>
	</head>
	<body>
		<h1>我是标题3里面的文字</h1>
		<div>
			<ul>
				<p class="special one">我是div1里面的文字</p>
				<p>我是div2里面的文字</p><!--li标签就是起到一个给程序加下划线的一个作用-->
			</ul>
		</div>
		<p class=" one">我是p里面的文字</p>
	</body>
</html>

在这里插入图片描述

weixin_44340137

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS文字样式

1.初识CSS<!DOCTYPE HTML><html><head> <title>初识CSS</title> <meta charset="UTF-8"> <!--设置的是文本内容的大小 30px之间不能有空格否则无效设置字体之间的大小使用冒号而不是分好所有的符号都必须在英文的状态下进行输入而非中文--...
复制链接

扫一扫