css层叠样式表基础知识笔记

css层叠样式表基础知识笔记

1.文字

文字大小：font-size
文字粗细：font-weight：100~900（粗细的值）；
文字样式：font-family：样式；
斜体：font-style：italic；
文字居中：text-align：center；
文字垂直：line-height：数值；
文字阴影：text-shadow：x y 大小 颜色 距离；

2.颜色

颜色：color：tranparent（无色）；或者 color：rgb；或者 color：rgba；
背景颜色：background-color：rgba；
背景图片：background-image
背景大小：background-size
图片位置：background-position
图片平铺：background-repeat

3.盒子

宽：width
高：height
外边距：margin
内边距：padding
盒子边框：border：边框宽度 样式 颜色 （三个值）；

4.浮动

浮动：float：left或者right；

小知识点：清除浮动的代码

.clearfloat::after {
				display: block;
				clear: both;
				overflow: hidden;
				height: 0;
				content: "";
			}
.clearfloat {
				zoom: 1;
			}

5.定位

相对定位：position：relative；
绝对定位：position：absolate；
固定定位：position：fixed；
粘性定位：position：sticky；
默认定位：position：static；

6.表格 table

表格边框：border=“ ”；
单元格间距：cellspacing=“ ”；
距离边框：cellpadding=“ ”；
合并行：colspan=“ ”；
合并列：rolspan=“ ”；

7.选择器

派生选择器：空格；
直接子元素选择器：大于号；
相邻兄弟选择器：加号；
所有兄弟选择器：波浪线；
所有子元素选择器：星号；
并集选择器：逗号；

8.伪类选择器

之后：::after
之前：::before
移入：::hover
焦点：::focus
激活：::active
第一个：::first
最后一个：::last
子类第一个：:first-child
子类最后一个：:last-child
子类某一个：:nth-child

知识小重点：

清除a标签的下划线：

a {
				text-decoration: none;
			}

清除ul小圆点：

ul {
				list-style: none;
			}

鼠标的小手样式：

cursor:pointer;

清除浏览器默认边距：

* {
				margin: 0;
				padding: 0;
			}

本周笔记就到这啦，拜拜！