1、分组和嵌套
多个选择器可以并列公用一套css样式
div,p,span {}
不同选择器之间也可以混合使用
.c1,#d1>span{}
2、伪类选择器
a:link{} 访问前
a"hover{} 点到上面 浮动
a:active{} 点住不松
a:visited{} 访问后
input:focud{} input框获取焦点
3、伪元素选择器
p:first-letter{} 通过css加文本内容 但是无法选中
p:before{}
p:after{}
ps:before和after多用于清楚浮动带来的负面影响
4、选择器优先级
选择器相同 就近原则
选择器不同
行内>id>class>标签
精确度越高说话越硬
ps:!important强制让标签采用样式 不推荐使用
5、宽高
width
heigh
块儿级标签不修改的情况下默认占浏览器的一整行,块儿级标签的高度也是取决与标签的内部文本的高度
内部文本的高度 但是可以通过css设置
行内标签宽度和高度都是有内部文本决定的 行内标签是无法设置长宽的 无效
6、字体属性
字体样式 草书、行书、华文行楷
font-family
字体大小
font-size
字重
font-weight
文本颜色
1、直接写颜色
2、写颜色的编号 #4e4e4e
3、写颜色的三基色 rgb(128,128,128)
4、可以给颜色加透明度 rgba(128,128,128,0.5) 范围0-1
ps;可以用pycharm 微信 qq 等软件快速取色
7、文字属性
文字对齐
text-align
center 剧中
文字装饰
text-decoretion:none 主要是用来给a标签去掉自带的下划线
首行缩进
text-index
8、背景属性
背景色
backgroud-color
背景图片
background:# fff url() no-repeat center center....
ps:当多个属性前缀名都是相同的情况下 一般都支持简写 只写前缀
ps:在调样式的时候 可以借助浏览器快速的微调,然后将调整好的参数修改到css
背景图片应用实际案例
9、边框属性
任何一个标签都有上下左右四个方向的边框
border-width、border-style、border-color
简写 border
画圆 border-radius:50%
10、长宽属性
能够让标签具有自身没有属性的特征
display
none 隐藏 并且原来的位置也没了
inline
block
inline-block
ps:visibility:hidden 只隐藏 位置还占用
11、css模型
1、外边距-标签和标签之间的距离 margin
2、边框 border、
3、内边距、内填充 padding
4、内容
body标签默自带8px的margin
margin:padding也一样
10 上下左右
10 20 上下 左右
10 20 30 上 左右 下
10 20 30 40 上 右 下 左
12、浮动float
只要是前期页面布局 一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中(距离用户更近)
浮动的元素没有块儿级和行内之说 标签多达浮动起来就