前端学习笔记 - css-CFANZ编程社区

文章目录

css语法
css 引用方式
选择器分类

基本选择器

标签选择器
ID选择器
类选择器
通用选择器

组合选择器

后代选择器
子代选择器

属性选择器
分组选择器
伪类选择器

超链接未访问
超链接已访问
鼠标悬停
鼠标点击
输入框获取焦点时样式

伪元素选择器

选择器的优先级
属性

文字属性

font-family
font-weight
font-size
color
text-align
line-height
text-decoration

背景属性
display属性

盒模型
浮动和清除浮动
位置属性

相对定位
绝对定位

css语法

选择器
样式声明

/* 我是注释: 这里使用 div 的标签选择器 */
div{
    /* 声明属性和值 */
	width: 100px;
	height: 100px;
}

css 引用方式

行内样式

<div style="width:100px; height:100px"></div>

内联样式

<head>
	<!-- 必须在 head 中 -->
	<style>
		/* 所有 div 标签都会应用这个样式 */
		div{
			width: 100px;
			height: 100px;
		}
	</style>
</head>

外部样式

<head>
	<link rel='stylesheet' href='css/index.css'>
</head>

选择器分类

基本选择器

标签选择器

<html>
	<div></div>
</html>
<style>
	div{
		width: 100px;
		height: 100px;
	}
</style>

ID选择器

<html>
	<div id='div1'></div>
</html>
<style>
	#div1{
		width: 100px;
		height: 100px;
	}
</style>

类选择器

<html>
	<div class='div2'></div>
</html>
<style>
	.div2{
		width: 100px;
		height: 100px;
	}
</style>

通用选择器

<html>
	<div></div>
</html>
<style>
	*{
		padding: 0;
		margin: 0;
	}
</style>

组合选择器

后代选择器

<html>
	<div class='div1'>
		<a class='a1' href='javascript:;'></a>
		<div class='div2'>
			<a class='a2' href='javascript:;'></a>
		</div>
	</div>
<html>

<style>
	/* 取消 div 下所有 a 标签超链接下划线 */
	div a{
		text-decoration: none;
	}
</style>

子代选择器

<html>
	<div class='div1'>
		<a class='a1' href='javascript:;'></a>
		<div class='div2'>
			<a class='a2' href='javascript:;'></a>
		</div>
	</div>
<html>


<style>
	/* 取消 div1 下 a1 的超链接下划线 */
	.div1>a{
		text-decoration: none;
	}
</style>

属性选择器

分组选择器

<html>
	<p></p>
	<a href='javascript:;'></a>
<html>

<style>
	p,a{
		color: red
	}
</style>

伪类选择器

超链接未访问

a:link{
	color: blue;
}

超链接已访问

a:visited{
	color: gray;
}

鼠标悬停

a:hover{
	color: white;
}

鼠标点击

a:active{
	color: white;
}

输入框获取焦点时样式

input:focus{
	outline: none;
	background-color: #eee;
}

伪元素选择器

选择器的优先级

对于指明的样式来说:
	内嵌样式的权重为1000
	id选择器的权重为100
	类选择器的权重为10
	标签选择器的权重为1

对于未指明的样式来说:
	权重为0

属性

文字属性

font-family

相当于设定字符集, 当浏览器不支持第一个的时候, 会尝试下一个

body{
	font-family:"Microsoft Yahei","微软雅黑,","Arial"
}

font-weight

字体粗细, 一般400, 700

值	描述
normal	标准
bord	粗体
border	更粗
lighter	更细
100-900	设置具体值, 400->normal, 700->border
inherit	继承父元素的font-weight

font-size

字体大小

p{
	font-size: 12px;
}

color

字体颜色

/* 支持颜色名称 */
p{
	color: red;
}

/* 支持rgb值 */
p{
	color: rgb(255,103,0);
}

/* 支持十六进制值 */
p{
	color: #7a7a7a;
}

text-align

文本对齐

值	描述
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

line-height

行高, 上下居中

text-decoration

文字装饰

值	描述
none	默认
underline	文字下划线
overline	文本上划线
line-through	删除线
inherit	继承父元素的text-decoration

背景属性

display属性

block
	默认占整行, 可以设置宽高
	
inline
	行内元素
	生效后, 宽高边距浮动等属性无效
	
inline-block
	行内块, 可设置宽高
	
none
	隐藏

盒模型

浮动和清除浮动

位置属性

相对定位

如果仅对当前div设置相对定位, 那么它和不设置相对位置没有任何变化

作用: 父相子决
	父元素: 设置相对定位
	子元素: 设置绝对定位

特点:
	不脱标
	压盖现象	

不要使用相对定位调整布局

绝对定位

设置绝对定位的盒子, 脱离标准流

单独使用一个绝对定位的盒子
	top属性是以页面左上角做参考点
	bottom是以首屏页面左下角做参考点