CSS层叠样式表

最新推荐文章于 2024-01-29 15:07:41 发布

森屿海岛

最新推荐文章于 2024-01-29 15:07:41 发布

阅读量813

点赞数 1

分类专栏： css 文章标签： CSS层叠样式表

本文链接：https://blog.csdn.net/qq_43551373/article/details/83662379

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前端的三大组成（三大模块）
HTML(超文本标记语言) 结构层
CSS（层叠样式表）表现层：用来美化html结构
JavaScript（脚本语言）行为层：提供用户和界面的交互
1.CSS的概念以及介绍
CSS（层叠样式表）
作用：美化html结构，重点（css可以很好的将结构和表现进行分离）

CSS的语法结构：选择器{属性：属性值；属性：属性值…}
1，CSS的三种表现形式
(1) 行内样式:通过style属性将样式写入标签中，它又叫内联样式。

 例：<div style="width: 300px; height: 50px; border-style: dashed; border-color: red; "/>

Div：没有具体的含义（主要用来页面的布局中，替代了原始的table和框架布局

(2) 内嵌样式：通过style标签将样式写入head中。
语法格式：选择器{属性：属性值；属性：属性值……}
注：选择器是用来筛选元素的一种方式，总共有7种。
例：<style type="text/css"> div{ width: 800px; height: 600px;margin:300px auto; border-style: dashed; background:url(img/1.png);background-size: 100% 100%; } </style>
(3) 外联样式/外部样式:通过link标签引入外部css文件夹***.CSS文件到head中。

2.CSS颜色的表现形式
（1）直接写颜色名称（如red，blue，green等）
（2）使用rgb来设置，其中rgba可设置图片的透明度（如background: rgb(76,60,40); background: rgba(76,60,40,0.8);
）
(3)使用16进制的方式表示颜色，是最常用的（如background：#000000）
3.选择器
（1）标签选择器（如table，a，div等）
常用属性：
text-decoration:none;设置去掉下划线
text-decoration:underline;设置添加下划线 text-decoration:overline;设置添加上划线
text-align：center;设置文本的对齐方式为居中
line-height;设置文本的垂直居中
font-family：楷体; 设置字体样式
font-size：20px ;设置字体大小
color：red ;设置字体颜色
background：url（img/img01.jpg）; 设置背景
background-size：100% 100%;设置宽和高100%填充，在style中加空格
background-size：100%,100%;设置宽和高100%填充，在body中设置背景图片加逗号
margin：10px auto;设置水平居中
border-collapse：collapse;设置表格的边框合并
list-style:none;去掉无序列表的点
（2）id选择器
格式：#id的值{属性：属性值}

例：<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
     div{
     	border: 2px solid;
     }
	#aa{
			background: red;
		}
		#bb{
			background: blue;
		}
		#dd{
			background: yellow;
		}
	</style>
	<body>
		<div id="aa"></div>
		<div id="bb" ></div>
		<div id="dd" ></div>
		
	</body>
</html>

（3）类选择器（class）
格式:.class的值{属性：属性值}
注意：必须以字母开头

例：<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
     div{
     	border: 2px solid;
     }
		.g01{
			width: 200px;height: 200px;
		}
		.g02{
			width: 300px;height: 300px;
		}
		#aa{
			background: red;
		}
		#bb{
			background: blue;
		}
		#dd{
			background: yellow;
		}
		#ee{
			background: fuchsia;
		}
	</style>
	
	<body>
		<div id="aa" class="g01"></div>
		<div id="bb" class="g01"></div>
		<div id="dd" class="g02"></div>
		<div id="dd" class="g02"></div>
		<div id="ee" class="g02"></div>
	</body>
</html>

（4）子代选择器：父级元素>子级元素

例：<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ul01>li{
				
				background: red;
			}
			#ul01>li>ul{
				
				background: blue;
			}
			#ul01>li>ul>li{
				background: pink;
			}
		</style>
	</head>
	<body>
		
		<ul id="ul01">
			<li><a href="#">京东</a></li>
			<li><a href="#">淘宝</a></li>
			<li><a href="#">苏宁易购</a></li>
			<p><a href="#">心之所向，梦之所往</a></p>
			<li>
				<a href="#">其他</a>
				<ul>
					<li><a href="#">火狐浏览器</a></li>
					<li><a href="#">谷歌浏览器</a></li>
					<li><a href="#">搜狗浏览器</a></li>
					<li><a href="#">360浏览器</a></li>
				</ul>
			</li>
		</ul>
		
	</body>
</html>

（5）父代选择器：父级元素后代元素

例：<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#ul01 li{
				list-style: none;
			}
			
			#ul01 li ul li{
				background: greenyellow;
			}
			#ul01>li ul a{
				color: red;
			}

		</style>
	</head>
	<body>
		
		<ul id="ul01">
			<li><a href="#">京东</a></li>
			<li><a href="#">淘宝</a></li>
			<li><a href="#">苏宁易购</a></li>
			<p><a href="#">心之所向，梦之所往</a></p>
			<li>
				<a href="#">其他</a>
				<ul>
					<li><a href="#">火狐浏览器</a></li>
					<li><a href="#">谷歌浏览器</a></li>
					<li><a href="#">搜狗浏览器</a></li>
					<li><a href="#">360浏览器</a></li>
				</ul>
			</li>
		</ul>
		
	</body>
</html>

森屿海岛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表

前端的三大组成（三大模块）HTML(超文本标记语言) 结构层CSS（层叠样式表）表现层：用来美化html结构JavaScript（脚本语言）行为层：提供用户和界面的交互1.CSS的概念以及介绍CSS（层叠样式表）作用：美化html结构，重点（css可以很好的将结构和表现进行分离）CSS的语法结构：选择器{属性：属性值；属性：属性值…}1，CSS的三种表现形式(1) ...
复制链接

扫一扫