前端小知识04_CSS

分组与嵌套

# 逗号表示并列
# 多个选择器可以并列公用一套css样式
div,p,span {
			color:blue
			}
# 不同选择器之间也可以混合使用
#d1,.c1,span {
				color:blue
			}

伪类选择器

a:link {}  # 访问之前的状态
a:hover {}  # 鼠标悬浮态
a:active {}  # 激活态、鼠标点击不松开的状态
a:visited {}  # 访问之后的状态
input:focus {}  # input框获取焦点

伪元素选择器

p:first-letter {}  # 通过css加文本内容 但是无法选中
p:before {}
p:after {}
# ps:before和after多用于清除浮动带来的负面影响

选择器优先级

选择器相同 就近原则

行内 > id > class > 标签

ps:!important强制让标签采用你的样式 不推荐使用

字体

• 字体样式 font-family
• 字体大小 font-size
• 字重 font-weight
• 文本颜色
  1 直接写颜色英文
  2 写颜色编号 #4e4e4e
  3 写颜色的三基色 rgb(128,128,128) # 范围0-255
  4 可以给颜色加透明度 rgba(128,128,128,0.5) # 范围0-1

文字

• 文字对齐
  text-align
  center
• 文字装饰 主要就是用来给a标签去掉自带的下划线
  text-decoration
  none
• 首行缩进
  text-indent

背景

• 背景色
  backgroud-color
• 背景图片
  background:#fff url() no-repeat center center

ps:当多个属性名前缀都是相同的情况下 一般都支持简写:只写前缀
ps:在调样式的时候 可以借助于浏览器快速的微调，然后讲调整好的参数修改到css样式中

边框

任何一个标签都有上下左右四个方向的边框
border-width
border-style
border-color
简写 border

画圆 border-radius:50%

css盒子模型(简)

• 外边距(标签与标签之间的距离) margin
• 边框 border
• 内边距/内填充 padding
• 内容 content

body标签默认自带8px的margin

margin:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左
padding:
	10 上下左右
	10 20 上下 左右
	10 20 30 上 左右 下
	10 20 30 40 上 右 下 左