前端第三次培训

最新推荐文章于 2024-09-02 12:54:06 发布

xy儿

最新推荐文章于 2024-09-02 12:54:06 发布

阅读量134

点赞数

文章标签：前端 linq css

本文链接：https://blog.csdn.net/qq_65874997/article/details/122801785

版权

一，css的使用

<!--
           一，css的定义
               选择器名{
                   属性名：属性值；
                   属性名：属性值；
                   ...
               }
               注意点：
                   1.声明用{}括起来，每个声明以分号结尾
                   2.一行建议一个声明
                   3.如果样式的属性值由多个单词组成，则用引号引起来
           二，css的注释
               /*注释内容*/

           三，css的三种使用方式：
               1.行内使用
                   直接写在标签上的样式，在标签上通过style属性定义的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>Hello world</h2>
		<h2 style="color: aquamarine;font-family:楷体;">Hello world</h2>
		<h2>Hello world</h2>
	</body>
</html>

2.内部样式
定义在style标签中的样式，style标签一般设置在head标签中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*设置所有的h2标签的文本为红色*/
				h2{
					color: red;
					font-family: "arial black";
				}
		</style>
	</head>
	<body>
		<h1>Hello world</h2>
		<h2>Hello world</h2>
		<h2>Hello world</h2>
	</body>
</html>

3.外部样式
<link rel="stylesheet" type="text/css" href="css的文件路径"/>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/p.css"/>
	</head>
	<body>
		<h1>Hello world</h2>
		<h2>Hello world</h2>
		<h2>Hello world</h2>
	</body>
</html>

注：当出现多重样式时，越精准越优先
-->

二，css基本选择器（放在head里）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*通用选择器*/
				*{
					color: blueviolet;
				}
			/*元素选择器*/
				div{
					font-size: 15px;
				}
			/*ID选择器*/
				#p1{
					background-color: aquamarine;
				}
			/*类选择器*/
				.cls1{
					font-family: 楷体;);
				}
			/*分组选择器*/
				#p1,.cls1,font{
					text-decoration: line-through;
				}
		</style>
	</head>
	<body>
		<div class="cls1">这是一个div1</div>
		<div>这是一个div2</div>
		<p id="p1">这是一个p</p>
		<span class="cls1">这是一个span</span><br>
		<font>这是一个font</font>
	</body>
</html>

三，css的组合选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/*组合选择器*/
				.food li{
					border: orangered solid 1px;
				}
			/*子代选择器*/
				.food2 > li{
					border: red dotted 1px;
				}
			/*相邻兄弟选择器*/
				#mydiv + div{
					background-color: #7FFFD4;
				}
			/*普通兄弟选择器*/
				#mydiv2 ~ div{
					background-color: antiquewhite;
				}
		</style>
	</head>
	<body>
		<ul class="food">
			<li>水果
				<ul>
					<li>香蕉</li>
					<li>苹果</li>
					<li>梨</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>白菜</li>
					<li>胡萝卜</li>
					<li>西红柿</li>
				</ul>
			</li>		
		</ul>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨</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>
		<hr>
		<div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>
		<div>相邻兄弟选择器5</div>
		<hr >
		<div>普通兄弟选择器1</div>
		<div id="mydiv2">普通兄弟选择器2</div>
		<div>普通兄弟选择器3</div>
		<div>普通兄弟选择器4</div>
		<div>普通兄弟选择器5</div>
	</body>
</html>