总结了一下css的部分基础知识点。---css学习笔记01

一. css基础

1. 什么是css

层叠样式表：层叠

2. css的三种使用方式

style 属性 --》

<div style="css属性值"></div>

style 属性 --》写在head标签里

<head>
	<style> 
		...
	</style>
</head>

link 外都引入单独的css文件 --》

<link rel="stylesheet" href="style.css">

3. css 三种基础选择器

  • html标签选择器

    1. 通过标签名当选择器来使用。
    2. 无论藏的多深都可以被选中。
    3. 选择的是所有的标签，通常通过标签选择器设置共性问题。

  • id选择器 #id名

    1. id的名字是唯一的。
    2. 任何的标签都可以具有id属性（id是全局属性）。大小写敏感，给元素设置id时（设置class时也一样），可以使用驼峰命名法。

  • class选择器 .class名

    1. class属性名可以重复使用。
    2. 任何标签都可以有class属性（全局属性）
    3. class的值可以有多个。<h1 class="t1 t2"></h1>

  • 通配符 *

    • 选择所有的标签，能少用就少用。

二. 综合选择器

    1. 后代选择器 div p

div p 选中的是div 里面的p标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div p {
			color: red;
	}
	</style>
</head>
<body>
	<div>
		<p>p1</p>
	</div>
	<p>p2</p>
</body>
</html>
    1. 交集选择器 div.d1

div.d1 选择div与class="d1"的交集

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
	div.d1 {
		color: red;
	}
</style>
</head>
<body>
<div class="d1">
	div1
</div>
<div class="d2">
	div2
</div>
</body>
</html>
    1. 并集选择器 div,p

div，p 选择所有的div和p标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div.d1,p.p1 {
		color: red;
	}
</style>
</head>
<body>
	<div class="d1">div1</div>
	<div class="d2">div2</div>
	<p class="p1">p1</p>
	<p class="p2">p2</p>
</body>
</html>
    1. 子元素选择器 div>p --css3出现的

div>p 选择div标签的子元素里面的标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div.d1>p {
			font-size: 50px;
		}
	</style>
</head>
<body>
	<div class="d1">
		<div class="d2">
			<p class="p1">div-div-p</p>
		</div>
		<p class="p2">div-p</p>
	</div>
</body>
</html>
    1. 序列选择器：first-child ：last-child

：first-child ：last-child 用来选择列表中的第一个和最后一个，不能选择其它的。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul li:first-child {
			color: red;
		}
		ul li:last-child {
			color: blue;
		}
	</style>
</head>
<body>
	<ul>
		<li>第一行</li>
		<li>第二行</li>
		<li>第三行</li>
		<li>第四行</li>
	</ul>
</body>
</html>
    1. 相邻兄弟选择器 div + p

div + p 选择与div相邻的一个元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.d1 + p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="d1">div1</div>
	<p class="p1">p1</p>
	<p class="p2">p2</p>
</body>
</html>
    1. 普通兄弟选择器 div ~ p

div ~ p 选择与div同一级的其它子元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.d1 ~ p {
			color: red;
		}
	</style>
</head>
<body>
	<div class="d1">div1</div>
	<p class="p1">p1</p>
	<p class="p2">p2</p>
</body>
</html>
posted @ 2017-06-23 14:57  lucky-lf  阅读(157)  评论(0)  编辑  收藏  举报