0
点赞
收藏
分享

微信扫一扫

前端学习笔记 - css

guanguans 2023-06-20 阅读 79



文章目录

  • 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是以首屏页面左下角做参考点


举报

相关推荐

0 条评论