css 学习笔记1

1.字体样式

font 设置字体样式

font-size 字体大小 

font-size: 12px;

font-family 字体

font-family: "微软雅黑";

font-weight 字体粗细

font-weight: bold;
font-weight: 400;

font-style 字体样式

font-style: normal;

字体样式连写

顺序：style weight size family

font: italic 700 20px '宋体';

2.文本缩进

text-indent 设置缩进

（以em为单位，1em表示当前一个字符的大小）

text-indent: 2em;

3.文本对齐方式

text-align 对齐方式

（改变的是内容的对齐方式，包括文字、图片）

text-align: center;

4.文本修饰

text-decoration

none 去除下划线，清除a链接的默认样式

text-decoration: none; 

5.大小写转换

转大写

text-transform: uppercase;

转小写

text-transform: lowercase;

6.行高

line-height 设置行高

（本行与上一行和下一行之间的距离）

line-height: 50px;

7.文本溢出

overflow 设置文本溢出

overflow: auto;
overflow: hidden;
overflow: scroll;

 将单行多出部分变为省略号

text-overflow: ellipsis;

8.背景相关

background 设置背景

background-color 背景颜色

background-color: pink;

background-image 背景图片

通过url（   ）指向地址

background-image: url(./背景.jpg);

 background-repeat 设置背景图片平铺方式

 background-repeat: no-repeat;

background-attachment 设置背景图片随鼠标的滚动方式

background-attachment: fixed;

background-position 定位背景图片

background-position: right bottom;

背景图片与字体样式一样可以连写，顺序要求不高

9.列表样式

list-style 设置列表样式

去除<li>默认样式：

list-style: none;

10.元素显示模式转换

转化为块元素

display: block;

转化为行内块元素

display: inline-block;

11.轮廓线

outline 设置轮廓线

outline-style 设置轮廓线样式

1.none 去除边框

2.dashed 点状轮廓线

......

outline: none;
outline-style: none;
outline-style: dashed;

outline-color 设置轮廓线颜色

outline-color: aqua;

outline-width  设置轮廓线宽度

outline-width: 40px;
outline-width: thick

12.边框

border设置边框

border-style 边框样式

border-style: solid;

border-color 边框颜色

border-color: rgb(33, 29, 29);

border-width 边框宽度

border-width: 3px;

border-      -      -radius  ......  设置边框角弧度

border-top-left-radius: 50%;
border-top-right-radius: 50px;

13.合并相邻边框

border-collapse 合并边框

（给<table>加）

border-collapse: collapse;

14.颜色

设置颜色

颜色名表示：

color: red;

三原色表示：

color: rgb(33, 106, 178);

设置透明度：

rgba 设置

color: rgba(rgb(33, 106, 178),0.4);

0.4代表透明度

opacity 设置

取值范围： 0 - 1

background-color: rgb(230, 24, 24);
opacity: 0.3;

15.元素隐藏方式

设置透明度隐藏

隐藏后保留原来位置

opacity: 0;

display 隐藏

隐藏后不保留原来位置

display :none;

visibility 隐藏

隐藏后保留原来位置

visibility: hidden;

16.鼠标样式及防拖拽

鼠标样式：

cursor: initial;

防止拖拽：

resize: none;

17.定位

绝对定位

绝对定位会放弃原来的位置,子绝父相（子加绝对定位，父加相对定位）

.father {
            position: relative;
}

 .son {
            position: absolute;
            top: 200px;
   /* 这里是相对于father顶部距离200px */
}

逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找以有相对定位的那级为定位参考，如果上级都没有，以浏览器为定位参考。（就近参考）

优先显示

z-index 显示的优先级（大的优先显示在上）

z-index: 2;

固定定位

固定定位相对于可视窗口进行定位，不随页面移动而移动，定位后会放弃原来位置

 position: fixed;

粘性定位

当页面滑动到一定位置时会停止滑动固定在可视窗口不再随页面滑动而移动

position: sticky;