CSS

最新推荐文章于 2024-07-19 15:32:49 发布

weixin_49474155

最新推荐文章于 2024-07-19 15:32:49 发布

阅读量177

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_49474155/article/details/107620658

版权

1.内联样式

在body标签内用style属性指定css代码

<div style="color:red;">hello css</div>

2.内部样式

在head标签中定义style标签，体标签内容就是css代码

<head>
	<meta charset="utf-8">
		<title></title>
		<style>
			div{
				color:red;
			}
		</style>
</head>
<body>
	<div>hello css</div>
	<div>hello css</div>
</body>

3.外部样式

定义css资源文件，在head标签内，定义link标签，引入外部的资源文件

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/a.css"/>
</head>
<body>
	 <div>hello css</div>
	 <div>hello css</div>
	 <p>呵呵呵</p>
</body>

一.选择器

1.id选择器：选择具体的id属性值的元素.建议在一个html 页面中id值唯一

语法：#id属性值{}

2.元素选择器：选择具有相同标签名称的元素

语法：标签名称{} 注意：id选择器优先级高于元素选择器**

3.类选择器：选择具有相同的class属性值的元素。

语法：.class属性值{}

注意：类选择器选择器优先级高于元素选择器

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		#div2{
			color:red;
			}
		font{
			color:blue;
			}
		.abcd{
			color:green;
			}
	</style>
</head>
<body>
	<div id="div2">css</div>
	<font>asd</font>
	<div class="abcd">asdf</div>
</body>

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/a.css">
	</head>
	<body>
		<h1>
			花千骨
		</h1><br/>
			《花千骨》是由
			<a href="">
				慈文传媒集团
			</a> 制作并发行，
			 <span class="csl1">林玉芬、高林豹、梁胜权联合执导，
			 霍建华、赵丽颖</span>领衔主演，<P><span class="csl2">蒋欣、杨烁</span>特别出演，<span class="csl3">张丹峰、李纯、马可、鲍天琦、安悦溪、徐海乔</span>等主演的古装玄幻仙侠剧。</P>
			 该剧改编自fresh果果同名小说，讲述少女花千骨与长留上仙白子画之间关于责任、成长、取舍的纯爱虐恋[1] 。<p>
			 该剧于2014年5月6日开机，9月15日杀青，8月12日发布中文及英文版的预告片[2] 。</p>
			 该剧于2015年6月9日起每周二、周三晚10点在 <span class="csl4">湖南卫视</span>的钻石独播剧场播出。<p>
			 [3] 2015年7月5日起，该剧播放时间已经改为每周日、周一晚10点。当天零点在爱奇艺同步更新。
			 [4]</p>
		<img id="img1" src="img/1.jpg">
		<h1>
			主要演员
		</h1>
		<p>
		<img id="img2" src="img/2.jpg"><img id="img3" src="img/3.jpg">
		</p>
	</body>
</html>

引入外部资源（a.css）代码

a{
	color:red;
	
}
h1{
	color:darkblue;
}
#img1{
	height:220px;
	width:170px;
}
#img2{
	height:200px;
	width:260px;
}
#img3{
	height:200px;
	width:260px;
}
.csl1{
	color:royalblue
}
.csl2{
	color:burlywood
}
.csl3{
	color:green
}
.csl4{
	color:burlywood
}

二.扩展选择器

1.选择所有元素：

*语法：*{}

2.并集选择器：

*语法：选择器1,选择器2{}

3.子选择器：筛选选择器1元素下的选择器2元素

*语法：选择器1 选择器2{}

4.父选择器：筛选选择器2的父元素选择器1

*语法：选择器1 > 选择器2{}

5.属性选择器：选择元素名称，属性名=属性值的元素

*语法：元素名称[属性名="属性值"]{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 选择元素：优先级最低 */
			/* *{
				color:blue;
			} */
			/* 并集选择器 */
			/* div,p{
				color:darkgreen
			} */
			/* 子选择器 */
			/* div p{
				color:red;
			} */
			/* 父选择器 */
			/* div>p{
				color:violet;
			} */
			/* 属性选择器 */
			/* input[type="submit"]{
				color: #4169E1;
			} */
			/* 相邻选择器 */
			/* #div1+p{
				color:red;
			} */
			/* 兄弟选择器 */
			.csl1 p{
				color:brown;
			}
		</style>
	</head>
	<body>
		<!-- <input type="submit" name="" id="" value="登录" /> -->
		<div class="csl1">
			<p>
				123
			</p>
			<p>
				1234
			</p>
		</div>
		<div id="div1">
			<p>
				12345
			</p>
		</div>
		<p>123456</p>
		<p>1234567</p>
	</body>
</html>

weixin_49474155

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

1.内联样式在body标签内用style属性指定css代码<div style="color:red;">hello css</div>2.内部样式在head标签中定义style标签，体标签内容就是css代码<head> <meta charset="utf-8"> <title></title> <style> div{ color:red; } </styl
复制链接

扫一扫

CSS

“相关推荐”对你有帮助么？