Css 学习笔记第一章

最新推荐文章于 2024-05-30 14:20:37 发布

nicepainkiller

最新推荐文章于 2024-05-30 14:20:37 发布

阅读量298

点赞数

分类专栏： CSS 学习笔记文章标签： Css 学习笔记第一章

本文链接：https://blog.csdn.net/nicepainkiller/article/details/87893712

版权

CSS 学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

序

第一节：CSS 引入方式

第二节：CSS 选择器

第三节：CSS 选择器（特殊标签）

第四节：选择器权重

第一节：CSS 引入方式

如果把 html 比作房子 css 就像对于是给房子做装修

css : 叠层样式表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="indexcss.css" type="text/css" rel="stylesheet">
		<!-- 内嵌方式 -->
		<style type="text/css">
			p2 {
				color: aquamarine;
			}
		</style>
         
		<!-- 导入式 --> 
		<style>
			@import url("indexcss.css");
		</style>
	</head>

	<body>

		<p style="color:red;background: blue; ">1. 行内使用方式</p> <!-- 行内 -->
		<p />
		<p2>2. 内嵌式使用方式</p2>
		<p />
		<p3>3. 外联式使用方式</p3>
		<p />
		<p4>4. 导入式使用方式 (当 html 加载完毕 才去加载css，  当html 内容较多时 显示完毕 再去加载css 会发生页面显示样式的延迟)</p4>
		<p />


	</body>
</html>

css:

p3{
	color: green;
}
p4{
	color:blueviolet;
}

介绍了 CSS 的四种导入方式

行内使用方式
内嵌式使用方式
外联式使用方式
导入式使用方式

第二节：CSS 选择器

CSS 选择器：

标签选择器：<p></p> 这个页面中所有使用该标签都是一个样式
Class选择器：Class 可以在页面中重复使用 ID不可以） class 选择器要比标签选择器权限高
ID 选择器：ID 选择器比 Class 选择器权限高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="indexcss.css" type="text/css" rel="stylesheet">
 
	</head>

	<body>

        <p>你好  标签选择器（这个页面中所有使用 该标签 都是一个样式）</>
	<p class="c1  c2">Class选择器 （Class 可以在页面中重复使用 ID不可以）         class 选择器 要比 标签选择器权限高</p>
	<p class="c1" id="d1">ID 选择器     ID 选择器比 Class 选择器 权限高</p>

	</body>
</html>

CSS

p{
	color: red;
}
 
 .c1
 {
	color: blue;
 }
 .c2
 {
 	color: blue;
	font-size: 33px;
 }
 #d1{
	 color: brown;
 }
 
 body .c1{ //空格表示 下一个层级的C1
	 
 }
 
 c1,c2{ //c1和c2
	 
 }

第三节：CSS 选择器（特殊标签）

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="indexcss.css" type="text/css" rel="stylesheet">

	</head>

	<body>
		<p>pppppp</p>
		<div>divdiv</div>
		<h1>h1h1h1<h1>

				<div>
					<p>pppppppppppp</p>
					<p class="c1">你好</p>
					<p>pppppppppppp</p>
					<div>
						<p>111111111111</p>
						<p>222222222222</p>
					</div>
					<p class="c2">AAAAAAAAA</p>
					<p>gggggggg</p>
					<p>pppppppppppp</p>
				</div>
				<p>pppppppppppp</p>
				<a href="http://www.baidu.com">www.baidu.com</a>
				<p/>
				<a href="http://www.google.com" title="google">www.google.com</a>
				<p/>
				<a href="https://912cc.com" title="912cc.com">912cc.com</a>



	</body>
</html>

css

/* 适用于页面所有（(默认)）标签 */
/* * 
{
	color:red
}
p */
{
	color: aqua;
}
/* 作用范围是 C1 后面（不包括自己）(同级元素)这一个元素 */
.c1+p
{
	color:red
}
/* 作用范围是 C2 后面所有（不包括自己）(同级元素) 元素 */
.c2~p
{
	color:blue
}
/* 作用范围 所有 div 标签下面的 p 标签(默认效果都会修改) */
 div>p
 {
	 color: brown;
 }
/* C1 下面所以 P 标签 */
 C1 p
 {
 	 color: brown;
 }
 
 a[title]
 {
	 background: yellowgreen;
 }
 
/* a[href^='http'] 以http开头 */
/* a[href$='com'] 以结尾 com*/
/* a[href*='com'] 包含 com*/
 a[href="https://912cc.com"]
 {
 	 color:red
 }

第四节：选择器权重

CSS 标签 class 是具有继承性质的，比如父节点 class 标签属性会影响子元素属性

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="indexcss.css" type="text/css" rel="stylesheet">

	</head>

	<body>
		<div class="c1"> 
			<h3  class="c2" id ="d2" style="color: #FFFF00;">你好</h3>
		</div>
	</body>
</html>

css

 h3{
	 color: red; /* D */
 }
 
 .c2{
	 color: green; /* C */
 }
 
 .c1 .h3{
	 color: blue; /* cd */
 }
 
 .c1 .c2{
	 color:yellow;  /* cc */
 }
 
 #d2{
	 color: black; /* b */
 }
 
 .c1 #d2{
	 color: bisque;/* bc */
 }