Web基础03

最新推荐文章于 2024-01-20 14:07:35 发布

小马的爸爸

最新推荐文章于 2024-01-20 14:07:35 发布

阅读量97

点赞数

本文链接：https://blog.csdn.net/qq_45598885/article/details/100543373

版权

一、CSS引入方式
1.行内样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
     <p style="font-size: 500px; color: goldenrod; font-style: italic;">今天也是充满希望的一天</p>
	</body>
</html>

2.内嵌样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			p{
				font-size: 100px;
				color: rosybrown;
				font-style: oblique;
                font-weight: bold;
			}
		</style>
		<p> 你有《时间简史》吗</p>
	</body>
</html>

3.链接样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="css/style.css"  rel="stylesheet" type="text/css" />
	</head>
	<body>
		<p> 我捡那玩意干嘛！</p>
	</body>
</html>

4.导入样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	        <style type=”text/css”>
				@import url("../css/style.css");
	        </style>
	</head>
	<body>
		<p>你的名字</p>
	</body>
</html>
二、选择器
Css选择器

css选择器，也称为选择符，用于选择需要添加样式的元素
css的基本语法:
选择器{
属性:属性值; （样式规则：键值对）
…}

全局选择器通配符通用权重 0
全局选择器：设置所有标签使用同一样式，用表示
全局选择器语法:{}

显示效果：

html代码：
<h1>我是标题红色</h1>
<p>我是段落红色</p>

css代码：
*{ color:red;} ！结构和样式分离：分工明确，操作简单
组合选择器：
H1,h2,h3,h4,h5,p{
}
h.special,special,#one{
text-decoration:underline;//下划线
}
后代选择器：

<style id="my">
			/*查找p元素的后代span元素  空格就是后代*/
			p span{
				color: green;
			}
			i span{
				color: red;
			}
			.pcolor #my{
				color: lightskyblue;
				font-size: 50px;
			}
		</style>
<p id="my" class="pcolor">段落1</p>
		<p class="pcolor"><span id="my">后代元素</span></p>
		<p>段落2</p>
		<p>开心<span>y<i>u<span>yang</i></span></span>快乐</p>

子元素选择器：
语法：
选择器1>选择器2>…{
//样式规则
}

<style type="text/css">
			p>i{
				color: red;
			}
		</style>
<p>lalal</p>
		<p>不<i>爱你</i></p>

嵌套选择器：
选择器1 选择器2{….}
P b{
Color:bule;
}

标签选择器元素选择器权重 1
标签选择器：用于声明标记采用的样式。
例如，p选择器用于声明所有p标签的样式，同样也可用h1选择器来声明页面中所有h1标签的样式。
标签选择器的语法：
E Selector{
{ property:value1;
property:value1;
样式规则
}
特点：选择的面比较广，不是最灵活。可以对多个标签同事进行组合声明 }
p{}直接给标签设置样式的就是标签选择器

显示效果：
例1
html代码：

我是标题红色

我是段落红色

css代码： p{ color:red;} p,h1{color:red;}

类选择器样式名选择器权重 10
类选择器：class 用来为一系列标签定义相同的样式。
例如：当声明了p标签为红色时，页面中的所有p标签都显示为红色，如果希望其中的几个不是红色，就需要使用类别选择器。
类选择器的语法: E.类名{样式规则}

显示效果：
执行步骤
在网页中书写css代码:
.red{ color:red;}
给h1标签和第三个p标签引入类别选择器red， html代码：

我是标题红色

我是段落红色

特点：一个元素可以使用多个类选择器，不同的规则可叠加，可穿两个样式，相同的功能看优先级：p.color范围比.color范围小，所以冲突使用p.color。比较灵活。

<style type="text/css">
			.pcolor{
				color: chartreuse;
			}
			p.pcolor{
				color: blue;
			}
			.show{
				font-size: 40px;
			}
div.two{
				background-color: yellow;font-size: 25px;
			}
			div.one{
				background-color: greenyellow;font-size: 5px;
			}
		</style>
<p>Y</p>
		<p class="pcolor show">Y</p>
		<p>Y</p>
		<h1 class="pcolor">Y</h1>
		<p>Y</p>
<div class="two">块内容2</div>
		  <div class="one">块内容1</div>

ID选择器权重 100
行内样式权重 1000
ID选择器和类选择器类似，但要注意同一id名在同一个页面中只能出现一次。(具有唯一性)
ID选择器的语法: #id名{}

显示效果:
执行步骤
在网页中书写css代码：
【E】#con{ color:red;}
给h1标记添加id选择器con。

<h1 id="con">我是标题红色</h1>
<p>我是段落红色</p>
<p>我是段落红色</p>
<p>我是段落红色</p>

伪类选择器
a:link（未被访问过,访问之前的状态）

a:hover （鼠标滑过） a:hover{text-decoration: underline;}; 鼠标放上去后有下划线
a:active（鼠标按下）
a:visited(访问过后)
伪类选择器: 用伪类定义的样式并不是作用在标记上，而是作用在标记的状态上。
课后作业：
做一个简单布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#body{
				width:100%;
				height:100px;
				background-color:antiquewhite ;
			}
			#body #top{
				background-color:brown ;
				height: 80px;
			}
			#body #nav{
				height: 40px;
				margin-top:10px ;
				background-color: aquamarine;
			}
			#body #banner{
				height: 150px;
				margin-top: 10px;
				background-color: lightseagreen;
			}
			#body #GG{
				margin-top:10px ;
				height: 300px;
				
			}
			#body #GG #left{
				height: 300px;
				width: 700px;
				background: darkolivegreen;
				background-image: url(img/图片.png);
				float: left;
			}
			#body #GG #right{
				height: 300px;
				width: 1200px;
				margin-left:5px ;
				background:  aquamarine;
				float: right;
			}
			#body #foot{
				height: 300px;
				margin-top: 10px;
				background-image: url(img/Chrysanthemum.jpg);
				box-shadow: 10px 10px 2px cadetblue;/* 阴影     右   下   阴影大小  阴影颜色*/
			}
		</style>
	</head>
	<body id="body">
	
			<div id="top">
				header
			</div>
			<div id="nav">
				nav
			</div>
			<div id="banner">
				banner
			</div>
			<div id="GG">
				<div id="left">
					left
				</div>
				<div id="right">
					right
				</div>
				
			</div>
      <div id="foot">
      	foot
      </div>

	</body>
</html>

效果图在这里插入图片描述