CSS学习笔记-1

CSS标准样式

常用的样式属性
属性	CSS名称	说明
颜色	color		red；green；
文本属性	background-color	背景颜色
	font-size	字体大小	30px
	font-family	字体	楷体隶书宋体
	text-align	文本对齐	left;center'right;justify;inherit
边框属性	border-style	边框样式	solid实心；
	border-width	边框宽度	4px
	border-color	边框颜色
定位属性	position		relative；absolate
	left	距离左边距离	50px
	top	距离上边距离	50px
	z-index	显示优先级	数字越大优先级越高

样式实现方式

嵌入样式表（行样式表），只能操作某一个样式，比较灵活

<p style="color:yellow;background-color:skyblue;width:500px;text-align:justify;text-justify:contribute-all-lines">

嵌入式样式表，可以操作多个，

<style>
		body{margin:1px;color:black;height:50px}
		.edu{background-color:gold;height:50px}
		.undergraduate{background-color:green;height:50px}
		.work{background-color:gray;height:50px;position:absolute;left:50px;top:50px;z-index:3}
		.father1{background-color:blue;height:100px}
		.father2{background-color:purple;height:100px;position:relative;top:100px}
		.position1{background-color:red;height:50px;position:relative;left:300px;top:50px}
		.position2{background-color:red;height:50px;position:absolute;left:300px;top:50px;z-index:2}
		</style>

引入式样式表，将样式放在文件中，需要时引用即可,比较方便。

<head>
<meta charste="utf-8">
<link href="CSS.css" rel="stylesheet" type="text/css" />
</head>

优先级：行内样式>嵌入样式>引用样式

样式选择器：

HTML选择器：所有HTML标签都可以定义特有的样式，网页中所有的标签都会应用所定义的样式，如body，div，p，a，li，ul，ol，span，b，img

class选择器：以.开头，名称可以自己定义，可以应用于多个名称相同的标签

ID选择器：ID是网页唯一性的标识，不可以重复，以#开头，一个ID样式只能应用到一个标签，主要用于程序交互的过程

关联选择器：引用了div样式的div中的p标签会引用div p样式，

<head>
<style>
.div p{font-size:35px}
</style>
</head>
<body>
<p>这是p标签的内容</p>
<div class="div">
<p>这是p标签的内容</p>
</div>
</body>

组合选择器：使用，表示并列的多个标签都可以使用同一个样式

<head>
<style>
.l1,.l2{font-size:12px;text-decoration:none}
.l1 a{background-color:red}
.l2 a{background-color:yellow}
</style>
</head>
<body>
<div class="l1">
我是l1
<a href="">我是l1</a>
</div>
<div class="l1">
我是l2
<a href="">我是l2</a>
</div>
</body

伪元素选择器：对于同一元素的不同状态选择不同的样式

a{font-size:12px}
a:hover {font-size:14px;color:grey}
p:firstline{}
p:firstletter{}

CSS标准样式

样式实现方式

优先级：行内样式>嵌入样式>引用样式

样式选择器：

猜你喜欢