CSS入门指南：语法与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_54241717/article/details/126871984

文章目录

css
css语法

css

什么是css,有什么作用？
css(cascading Style sheet):层叠样式表语言。
css的作用是：修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
css好比是HTML的化妆品一样。

css语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 导入外部样式表 -->
			<link href="css/index.css" rel="stylesheet"/>
		<!-- 	<style>
				/* css注释 此标签内写的都i是css语法 */
				/* .a1{color: #55ff7f;font-size: 20px;} */
			
			</style> -->
	</head>
	<body>
		<!--
			HTML是网页的骨架 用HTML修饰网页非常麻烦，需要用到大量的标签
			后来诞生css语言，专门用作修饰网页内容
			.css是Cascading Style Sheets《级联样式表》
			样式表 修饰网页外观 是一种样式表语言，用来为HTML控制外观
			用来修饰外观的css语法写在一个css文件中或者html的某一个部分
			
			css 语法：
				1.行级样式表  在标签行内修饰<a href="" style=""></a>练习时使用，优先级最高时使用
				2.内嵌样式表
				3.外部样式表
		 -->
		 <!-- 
		 color：字体颜色 
		 ● font-size：字体大小 
		 ● font-family：字体 
		 ● text-align：文本对齐 
		 ● text-decoration:line-through：定义穿过文本下的一条线 
		 ● text-decoration:underline：定义文本下的一条线 
		 ● text-decoration:none：定义标准的文本 
		 ● font-style: italic;斜体文本 
		 ● font-weight:字体粗细 
		 ● line-height:设置行高 
		 ● letter-spacing可以指定字符间距 
		 ● text-indent用来设置首行缩进-->
		 
		 <a href="http://www.baidu.com"  class="a1">百度</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			p{
				color: #000;
			}
			.TWO{
				color:red
			}
			.a1{
				color: hotpink;
			}
			#p0{
				color: blue;
			}
				
			*{
				color: aquamarine;
				font-size: 40px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 因为样式和标签是分离的，需要将样式表和标签表联系起来
		 
		 优先级从高到低
		 id>类>标签>通配选择器
		 
		 1.标签选择器
		    标签名{样式表}
		 2.类选择器 类名匹配 最多使用
			当一个标签被多个选择器选中时，会显示优先级高的样式
		3.id选择器
		    #id属性值{} 
		 4通配选择器 选择网页中所有的标签
		 *{}
		 -->
		<p>春晓</p>
		<p class="TWO" id="p0">穿棉不觉晓</p>
		<p class="a1">处处闻啼鸟</p>
		<p class="TWO">也来风格于</p>
		<p class="a1">花落知多少</p>
		
		<h2>标题</h2>
	</body>
</html>

web-css

文章目录

css

css语法