CSS样式

1 文字

color 设置颜色(十六进制、RGB)
font-size 设置大小
font-family 设置字体(黑体、宋体...)
font-style 设置样式(斜体italic 倾斜oblique)
font-weight 字体加粗 bold
line-height 设置行高(在一定高度内垂直居中)

2 文本

text-align 设置段落整体水平方向对齐(left center right)
text-decoration 设置文本线条
text-indent 设置段落首行缩进(通常采用2em,em代表缩进几个字符)

3 盒子的三属性

width 宽度
height 高度
padding 内边距
margin 外边距
border 边框(实线solid 虚线dashed 点线dotted)
border-color 边框颜色(可以设置每个方向不同的颜色) 
background-color 背景颜色
overflow 设置文本超出盒子高度显示方式(隐藏hidden 所有都是滚动条滚动条scroll 超出部分滚动条auto)
在盒子模型中,多行文本居中设置padding实现,例如上下20px,左右0px
盒子水平居中,子盒子设置margin 0px auto
	垂直居中,父盒子设置padding 20px(可更改)0px

4 样式表连接方式

1)行列式样式表
2)内嵌式样式表
3)外链式样式表,常用
4)导入式样式表

5 选择器

1)基础选择器:
	标签选择器、类名选择器(用的多)、id选择器、通配符选择器
2)高级选择器:
	后代选择器、交集选择器、并集选择器

6 标准文档流

display 切换显示状态(块级元素block 并排显示inline 并排显示快inline-block)

7 浮动

用于页面并排布局,脱离标准文档流,不再受元素等级的限制
float(left right)
如果进行浮动,那么其他兄弟元素都要进行浮动
依次贴边,如果父盒子宽度不够,只会出现向前贴边而不是钻空隙 
清除浮动利用overflow:hidden

8 背景

background-color 背景颜色
background-image 背景图片
background-repeat 背景是否重复(不重复no-repeat 横轴重复repeat-x 纵轴重复repeat-y)
background-position 设置背景位置(水平let center right 垂直top center bottom)
background-attachment 设置背景附着

9 定位

position 盒子针对某个参考元素进行位置偏移(相对定位relative 绝对absolute 固定fixed)
如果元素位置发生变化,必须搭配偏移量进行设置(水平left right 垂直top bottom)
relative 参考自身盒子的原始位置
absolute 参考距离最近的有定位的祖先元素
fixed 参考页面位置

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值