欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS笔记1-入门/选择器/CSS引入方式

程序员文章站 2022-03-27 20:21:33
CSShtml：内容css：样式css优势：1、内容与样式相分离2、cs样式更加丰富3、提高浏览器的加载速度，节约网络带宽，减少代码量4、利于SEO（搜索引擎）优化基本语法css在head标签中选选择器{样式名：样式值/ * css中注释* /样式名：样式值样式名：样式值…}颜色：支持英文单词或十六进制（三位或六位#112233）三种选择器的选择器名;标签选择器：标签类选择器：.类名id选择器：#id名<...

CSS
html：内容
css：样式

css优势：
1、内容与样式相分离
2、cs样式更加丰富
3、提高浏览器的加载速度，节约网络带宽，减少代码量
4、利于SEO（搜索引擎）优化

基本语法
css在head标签中选
选择器
{
样式名：样式值/ * css中注释* /
样式名：样式值
样式名：样式值
…
}
颜色：支持英文单词或十六进制（三位或六位#112233）

三种选择器的选择器名;
标签选择器：标签
类选择器：.类名
id选择器：#id名

<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	/*标签选择器*/
	h1
	{
		color:#aabbcc;
		font-size:40px;
	}
	p
	{
		color:#aaaaaa;
		font-size:20px
	}
	/*类选择器，可以用于多个元素*/
	.mystyle{
		background-color:lightgrey;
	}
	
	/*id选择器，只能用于一个元素，虽然HTML容错性强，不报错，但是语法是错误的*/
	#my3{
		font-size:60px;
	}
</style>
</head>
<body>
	<h1>h1标签</h1>
	<p><b>这里分段</b></p>
	<h1 class="mystyle">h2标签</h1>
	<h1 class="mystyle">h3标签</h1>
	<h1 id="my3">h4标签</h1>
	
</body>
</html>

CSS引入方式

建议：在开发时使用内部样式，编写完毕后改造成外部，不推荐行内样式

  • 行内样式
  • 一次只作用于一行
 	<h4 style="color:red;background-color:pink";>行内样式</h4>
  • 内部样式
    在head标签里写
<style type="text/css">
.........
</style>
  • 外部样式
    将css语句独立移动到css文件，在html头标签中用下面语句来引用：
    a、链接式link
<link href="css文件名" type="text/css" rel="stylesheet"/>

b、导入式@import

@import url<"css文件名">

推荐link不推荐import

css文件单独封装：

@charset "UTF-8";
	/*标签选择器*/
	h1
	{
		color:#aabbcc;
		font-size:40px;
	}
	p
	{
		color:#aaaaaa;
		font-size:20px
	}
	/*类选择器，可以用于多个元素*/
	.mystyle{
		background-color:lightgrey;
	}
	
	/*id选择器，只能用于一个元素，虽然HTML容错性强，不报错，但是语法是错误的*/
	#my3{
		font-size:60px;
	}

优先原则：行内>外部>内部
选择器优先级：id>类>标签

本文地址：https://blog.csdn.net/PIUYIXIU/article/details/109234859

上一篇： 明神宗朱翊钧是怎么加速明朝的灭亡的？真相是什么

下一篇： 创业不易！收好店宝宝电商的三个锦囊

推荐阅读