A27-张韶中网页前端3

最新推荐文章于 2024-11-10 22:45:39 发布

zhangshaozhong__

最新推荐文章于 2024-11-10 22:45:39 发布

阅读量113

点赞数

分类专栏：前端文章标签：前端 html linq

本文链接：https://blog.csdn.net/zhangshaozhong__/article/details/122801334

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括定义样式、应用样式（行内、内部、外部）以及选择器的使用。内容涵盖通用选择器、元素选择器、ID选择器、类选择器和分组选择器，并通过实例展示了后代选择器、子元素选择器、相邻兄弟选择器和普通兄弟选择器的用法。此外，还强调了样式优先级的概念，帮助理解样式的覆盖规则。

摘要由CSDN通过智能技术生成

1.css定义

选择器名{
                   属性名：属性值：
                   属性名：属性值：
                   属性名：属性值：
               }
注意点：
1，声明需要使用花括号括起来，每个声明以分号结尾
2 建议一行一个声明
3 如果样式的属性值由多个单词组成，则用引号引起来

2.基本应用

1.行内样式：
直接写在标签上的样式：在标签上通过style属性定义的样式
<h1 style="color: blue;font-family: 楷体;">hello world</h1>
2.内部样式：
定义在style标签中的样式，设置在head标签中
<head>
<style>
		/* 设置所有h2标签的文本为棕色 */
		h2{
			color: brown;
			font-family: "curlz mt";	
		}
		</style>
</head>
3.外部样式：
定义在外部的css文件中，通过link引入
<link rel="stylesheet" type="text/css" href="css文件的路径" />
当有多重样式时，越精准越优先，即就近原则，即行内大于内部大于外部
h2{
	font-size: 100px;
}

3.css选择器

三，css选择器
               1,通用选择器 *
               *{
                   属性名：属性值；
               }

*{
			color: #A52A2A;
		}

               2，元素选择器（这里元素选择为div）
                   元素名/标签名{
                   属性名：属性值；
               }

div{
			font-size: 30px;
		}

               3,id选择器#
               #id属性值{
                   属性名：属性值；
               }

#p1{
			background-color: aquamarine;
		}

               4 类选择器.
                   .class属性值{
                   属性名：属性值；
               }

.cls1{
			font-family: 楷体;
		}

               5 分组选择器
                   选择器1，选择器2，选择器3....{
                       属性名：属性值；
                   }

#p1,.cls1,font{
			text-decoration: underline;	
		}

优先级：元素选择器1 类选择器10 id选择器100 内联样式1000

四.组合选择器

                1.后代选择器
                   选择指定元素的所有指定后代元素，以空格隔开
                   选择器指定元素{
                       属性名：属性值；
                   }
               2.子元素选择器
                   选择指定元素的第一代子元素，以>隔开
                   选择器>指定元素{
                       属性名：属性值；
                   }
               3.相邻兄弟选择器
                   选择指定元素的下一个指定元素(只有一个)，两者有相同的父元素，以加号隔开
                   选择器+指定元素{
                       属性名：属性值；
                   }
               4.普通兄弟选择器
                   选择指定元素后面的所有指定元素，以波浪号隔开
                   选择器~指定元素{
                       属性名：属性值；
                   }

<head>
<style type="text/css">

		/* 后代选择器 */
		.food li{
			border: -webkit-activelink solid 1px;
		}
		/* 子代选择器 */
		.food2>li{
			border: palegoldenrod dotted 1px;
		}
		/* 相邻兄弟选择器 */
		#mydiv+div{
			background-color: #A52A2A;
		}
		/* 普通兄弟选择器 */
		#mydiv2~div{
			background-color: aqua;
		}
		</style>
</head>
<body>
		 <!-- 获取class属性值时food的元素的所有对应li列表项 -->
		 <ul class="food">
			 <!-- 列表嵌套 -->
			 <li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			 </li>
			 <li>蔬菜
				 <ul>
					 <li>白菜</li>
					 <li>青菜</li>
					 <li>卷心菜</li>
				 </ul>
			 </li>
		 </ul>
		 <hr />
		 <ul class="food2">
		 		<!-- 列表嵌套 -->
		 		<li>水果
		 			<ul>
		 				<li>香蕉</li>
		 				<li>苹果</li>
		 				<li>梨</li>
		 			</ul>
		 		</li>
		 		<li>蔬菜
		 			<ul>
		 				<li>白菜</li>
		 				<li>青菜</li>
		 				<li>卷心菜</li>
		 			</ul>
		 		</li>
		 </ul>
		 <div>相邻兄弟选择器1</div>
		 <div id="mydiv">相邻兄弟选择器2</div>
		 <div>相邻兄弟选择器3</div>
		 <div>相邻兄弟选择器4</div>
		 
		 <div>普通兄弟选择器1</div>
		 <div id="mydiv2">相邻兄弟选择器2</div>
		 <div>普通兄弟选择器3</div>
		 <div>普通兄弟选择器4</div>
</body>