vito的Web前端学习 Day3（CSS）

最新推荐文章于 2024-07-25 08:14:42 发布

vitocool

最新推荐文章于 2024-07-25 08:14:42 发布

阅读量177

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/vitocool/article/details/122491300

版权

2022年1月15日，学习CSS基础选择器，CSS字体属性和文本属性以及CSS的三种引入方式。

今日主要学习内容：

1 基础选择器

1.1 标签选择器

<head>
	<style type="text/css">
		/* 选择器 {样式} */
		p {
			color: red;
			font-size: 25px;
		}
		div {
			color: green;
			font-size: 25px;
		}
	</style>
</head>
<body>
	<p>标签选择器是指用HTML标签名称作为选择器</p>
	<div>为某一类标签指定统一的CSS样式</div>
</body>

1.2 类选择器

1.2.1 单类名选择器

<head>
	<style type="text/css">
		/* 选择器 {样式} */
		.red {
			color: red;
		}

	</style>
</head>
<body>
	<ul>
		<li class="red">类选择器</li>
		<li class="red">可以单独选一个或者某几个标签</li>
	</ul>
</body>

1.2.2 多类名选择器

<head>   
    <style type="text/css">
		/* 选择器 {样式} */ 
       .red {
			color: red;
		}
		.green {
			color: green;
		}
        .font20 {
            font-size: 20px;
        }
		.font30 {
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div class="red font20">
		在class属性中写多个类名
	</div>
	<div class="green font30">
		多个类名中间必须用空格分开
	</div>
</body>

1.3 id选择器

<head>		
    <style>
        #pink {
			color: pink;
		}
	</style>
</head>
<body>
    <div id="pink">
		id属性只能在每个HTML文档中出现一次，别人切勿使用
	</div>
</body>

1.4 通配符选择器

<head>
    <style>
		* {
			color: darkred;
		}
	</style>
</head>
<body>
    <ul>
		<li>通配符选择器用*定义</li>
	</ul>
	<span>表示选取页面中所有元素</span>
</body>

2 CSS字体属性

2.1 font-family字体类型

<head>
    <style>
        .p1 {
			font-family: "Arial", "宋体";
		}
		.p2 {
			font-family: "微软雅黑";
		}
	</style>
</head>
<body>
    <p class="p1">font-family设置字体类型</p>
    <p class="p2">各个字体类型用逗号隔开</p>
</body>

2.2 font-size字体大小

<head>	
    <style>
        .p3 {
			font-size: 16px;
		}
	</style>
</head>
<body>
    <p class="p3">px像素是网页常用单位</p>
</body>

2.3 font-weight字体粗细

<body>
    <style>
        .p4 {
			font-weight: bold;
		}
		/*实际开发中，更提倡用数字，normal=400，bold=700*/
		.p5 {
			font-weight: 700;
		}
	</style>
</head>
<body>
    <p class="p4">字体加粗</p>
    <p class="p5">font-weight值后不加单位</p>
</body>

2.4 font-style字体样式

<head>
    <style>
        .p6 {
			font-style: italic;
		}
		.em1 {
			font-style: normal;
		}
	</style>
</head>
<body>
    <p class="p6">斜体</p>
    <em class="em1">通常使斜体标签 em i 不倾斜</em>
</body>

2.5 font字体复合

<head>
    <style>    
        .p7 {
			/*font: font-style font-weight font-size/line-height font-family;*/
			font: italic 700 16px "微软雅黑";
		}
	</style>
</head>
    <p class="p7">语法格式不能更换顺序，各个属性以空格隔开</p>
    <p class="p7">不需要设置的属性可以省略，但 font-size 和 font-family 必须设置</p>
</body>

3 CSS文本属性

3.1 color文本颜色

<head>
    <style>
        .p8 {
            color: red;
        }
        .p9 {
            color: #ff0000;
        }
        .p10 {
            color: rgb(200,0,0);
        }
    </style>
</head>
<body>
    <p class="p8">预定义的颜色值</p>
    <p class="p9">十六进制</p>
    <p class="p10">RGB代码</p>
</body>

3.2 text-align对齐文本

<head>
    <style>
        .div1 {
        	text-align: center;
        }
        .div2 {
        	text-align: left;
        }
        .div3 {
        	text-align: right;
        }
	</style>
</head>
<body>
    <div class="div1">水平居中</div>
    <div class="div2">左对齐</div>
    <div class="div3">右对齐</div>
</body>

3.3 text-decoration文本装饰

<head>
    <style>
        a1 {
        	text-decoration: none;/*重要*/
        }
        .div4 {
        	text-decoration: underline;/*重要*/
        }
        .div5 {
        	text-decoration: overline;
        }
        .div6 {
        	text-decoration: line-through;
        }
        div
	</style>
</head>
    <a href="#" class="a1">无装饰线</a>
    <div class="div4">下划线</div>
    <div class="div5">上划线</div>
    <div class="div6">删除线</div>
</body>

3.4 text-indent文本缩进

<head>
    <style>
        .div7 {
        	text-indent: 30px;
        }
        .div8 {
        	text-indent: 1em;/*em是相对于当前元素1个文字的大小*/
        }
	</style>
</head>
<body>
    <div class="div7">使文本的第一行缩进</div>
    <div>通常将段落的首行缩进</div>
    <div class="div8">em是相对于当前元素1个文字的大小</div>
</body>

3.5 line-height行间距

<head>
    <style>    
        .div9 {
        	line-height: 50px;
        }
	</style>
</head>
<body>
    <div>控制行与行之间的距离</div>
    <div class="div9">行间距包括上间距、文本高度、下间距</div>
    <div>line-height 只改变上下间距，不改变文本高度</div>
</body>

4 CSS引入方式

4.1 内部样式表（嵌入式）

/*把CSS代码放入<style>*/
<head>
	<style type="text/css">
		p {
			color: red;
		}
    </style>
</head>

4.2 行内样式表（行内式）

<p style="color: pink; font-size: 20px;">
在元素标签内部的style属性中设定CSS样式，只能修改当前标签的样式</p>

4.3 外部样式表（链接式）

把样式单独写在CSS文件中，再把CSS文件引入到HTML页面中。

/*CSS文件中只写样式*/
p {
	line-height: 16px;
}

/*引入CSS文件*/
<head>
    <link rel="stylesheet" href="01.css">
</head>

5 总结

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="01.css">
	<style type="text/css">
		/* 选择器 {样式} */
		/*标签选择器*/
		p {
			color: red;
			font-size: 25px;
		}
		div {
			color: green;
			font-size: 25px;
		}
		/*类名选择器*/
		.red {
			color: red;
		}
		.green {
			color: green;
		}
		.font20 {
			font-size: 20px;
		}
		.font30 {
			font-size: 30px;
		}
		/*id选择器*/
		#pink {
			color: pink;
		}
		/*通配符选择器*/
		* {
			color: darkred;
		}
		/*字体类型*/
		.p1 {
			font-family: "Arial", "宋体";
		}
		.p2 {
			font-family: "微软雅黑";
		}
		/*字体大小*/
		.p3 {
			font-size: 16px;
		}
		/*字体粗细*/
		.p4 {
			font-weight: bold;
		}
		/*实际开发中，更提倡用数字，normal=400，bold=700*/
		.p5 {
			font-weight: 700;
		}
		/*字体样式*/
		.p6 {
			font-style: italic;
		}
		.em1 {
			font-style: normal;
		}
		/*字体复合属性*/
		.p7 {
			/*font: font-style font-weight font-size/line-height font-family;*/
			font: italic 700 16px "微软雅黑";
		}
		/*文本颜色*/
        .p8 {
            color: red;
        }
        .p9 {
            color: #ff0000;
        }
        .p10 {
            color: rgb(200,0,0);
        }
        /*文本对齐*/
        .div1 {
        	text-align: center;
        }
        .div2 {
        	text-align: left;
        }
        .div3 {
        	text-align: right;
        }
        /*装饰文本*/
        .a1 {
        	text-decoration: none;/*重要*/
        }
        .div4 {
        	text-decoration: underline;/*重要*/
        }
        .div5 {
        	text-decoration: overline;
        }
        .div6 {
        	text-decoration: line-through;
        }
        /*文本缩进*/
        .div7 {
        	text-indent: 30px;
        }
        .div8 {
        	text-indent: 1em;/*em是相对于当前元素1个文字的大小*/
        }
        /*行间距*/
        .div9 {
        	line-height: 50px;
        }
	</style>
</head>
<body>
	<!-- 标签选择器 -->
	<p>标签选择器是指用HTML标签名称作为选择器</p>
	<div>为某一类标签指定统一的CSS样式</div>

    <!-- 单类名选择器 -->
	<ul>
		<li class="red">类选择器</li>
		<li class="red">可以单独选一个或者某几个标签</li>
	</ul>

	<!-- 多类名选择器 -->
	<div class="red font20">
		在class属性中写多个类名
	</div>
	<div class="green font30">
		多个类名中间必须用空格分开
	</div>

	<!-- id选择器 -->
	<div id="pink">
		id属性只能在每个HTML文档中出现一次，别人切勿使用
	</div>

	<!-- 通配符选择器 -->
	<ul>
		<li>通配符选择器用*定义</li>
	</ul>
	<span>表示选取页面中所有元素</span>
 
    <!-- 字体类型 -->
    <p class="p1">font-family设置字体类型</p>
    <p class="p2">各个字体类型用逗号隔开</p>

    <!-- 字体大小 -->
    <p class="p3">px像素是网页常用单位</p>

    <!-- 字体粗细 -->
    <p class="p4">字体加粗</p>
    <p class="p5">font-weight值后不加单位</p>

    <!-- 字体样式 -->
    <p class="p6">斜体</p>
    <em class="em1">通常使斜体标签 em i 不倾斜</em>

    <!-- 字体符合属性 -->
    <p class="p7">语法格式不能更换顺序，各个属性以空格隔开</p>
    <p class="p7">不需要设置的属性可以省略，但 font-size 和 font-family 必须设置</p>

    <!-- 文本颜色 -->
    <p class="p8">预定义的颜色值</p>
    <p class="p9">十六进制</p>
    <p class="p10">RGB代码</p>

    <!-- 文本对齐 -->
    <div class="div1">水平居中</div>
    <div class="div2">左对齐</div>
    <div class="div3">右对齐</div>

    <!-- 装饰文本 -->
    <a href="#" class="a1">无装饰线</a>
    <div class="div4">下划线</div>
    <div class="div5">上划线</div>
    <div class="div6">删除线</div>

    <!-- 文本缩进 -->
    <div class="div7">使文本的第一行缩进</div>
    <div>通常将段落的首行缩进</div>
    <div class="div8">em是相对于当前元素1个文字的大小</div>

    <!-- 行间距 -->
    <div>控制行与行之间的距离</div>
    <div class="div9">行间距包括上间距、文本高度、下间距</div>
    <div>line-height 只改变上下间距，不改变文本高度</div>

    <p style="color: pink; font-size: 20px;">在元素标签内部的style属性中设定CSS样式，只能修改当前标签的样式</p>
</body>
</html>