CSS概念

什么是CSS

CSS是Cascading Style Sheet （级联样式表）的缩写，可以对字体、颜色、边距、高度、宽度、背景图片、网页定位等进行设定

CSS的优势

1.内容与样式分离

2.网页的表现统一，容易修改

3.丰富的样式，页面布局更加灵活

4.减少网页的代码量，增加网页的浏览速度，节省网络带宽

CSS在HTML中的引入方式

行内样式

<div style="color:blue">行内样式</div>

内部样式表

<head>
	<meta charset="utf-8">
	<title>CSS学习</title>
	<style type="text/css">
		h1{
			<!-- 设置h1标签的样式 -->
		}
	</style>
</head>

外部样式表（建议使用此方式）

<head>
	<meta charset="utf-8">
	<title>CSS学习</title>
	<!-- 引入外部css文件 -->
	<link href="../css/learnCSS.css" />
</head>

CSS样式优先级

就近原则：行内样式>内部样式>外部样式

为了方便展示，后面将以内部样式表的形式书写，实际开发中建议使用外部样式表。

CSS选择器

CSS—01.概念&选择器

基本选择器

ID选择器

根据id选择元素使用 #(井号)前缀，在同一个页面中id要唯一。

<html>
	<head>
		<meta charset="utf-8">
		<title>CSS学习</title>
		<style type="text/css">
			#id_selector {
			    <!-- 设置元素样式 -->
			}
		</style>
	</head>
	<body>
		<div id="id_selector">ID选择器</div>
	</body>
</html>

类选择器

根据class属性选择元素使用 .(点)前缀 ,Class在同一页面中可以有多个相同的值。

<html>
	<head>
		<meta charset="utf-8">
		<title>CSS学习</title>
		<style type="text/css">
			.class_selector {
				<!-- 设置元素样式 -->
			}
		</style>
	</head>
	<body>
	    <div class="class_selector">类选择器</div>	
	</body>
</html>

标签选择器

根据标签选择元素使用标签名，如有多个则全部选择。

<html>
	<head>
		<meta charset="utf-8">
		<title>CSS学习</title>
		<style type="text/css">
			p {
			    <!-- 设置元素样式 -->	
			}
		</style>
	</head>
	<body>
		<p id="p_selector">标签选择器</p>
	</body>
</html>

高级选择器

‘parent’、'child’指代ID选择器、类选择器及标签选择器中的一个，'element’指代标签元素。

层次选择器

书写形式	功能说明
parent child	后代元素选择器，选择父元素内所有的子元素。
parent>child	子元素选择器，选择父元素内所有的子元素，子元素内的子元素无法选择。
element1+element2	相邻元素选择器,选择与element1下面相邻的第一个元素element2，如果元素类型不匹配则无法选中。
element1~element2	通用元素选择器,选择与element1下面相邻的所有指定类型元素element2。

结构伪类选择器(过滤器)

书写形式	功能说明
parent :first-child	选择父元素的第一个子元素
parent :last-child	选择父元素的最后一个子元素
parent :nth-child(n)	选择父元素的第n个子元素
parent element:first-of-type	选择父元素中第一个类型为element的子元素
parent element:last-of-type	选择父元素中最后一个类型为element的子元素
parent element:nth-of-type(n)	选择父元素中第n个类型为element的子元素

属性选择器

书写形式	功能说明
element[attr]	选择具有attr属性名的element
element[id ^=“first”]	选择具有id属性且其值是以first开头的element
element[id $=“first”]	选择具有id属性且其值是以first结尾的element
element[id *=“first”]	选择具有id属性且其值包含first的element

CSS—01.概念&选择器

CSS概念

CSS选择器

相关推荐