CSS

MDN官网

万字总结CSS

一 内部样式表

两种格式：
1. <img src="/static/images/logo.png" alt="shan" style="width: 300px; height: 300px;">
2. 在head中当然body也可以：
<style type="text/css" //不写也可以>
  img {
  }
  .big { //class用.
  }
</style>

二 外部样式表

在外面文件夹中建一个style.css文件
. + class名 如：
. red {
  background-color: red;
}

三 选择器

标签选择器 
div {
  width: 200px;
}

id选择器
<div id="mydiv2">div2</div>

#mydiv2 {
  background-color: green;
}

类选择器
. + class'name {
	
}

伪类选择器

三种举例：
div:hover {
    background-color: black;
  	transition: 3000ms;
 	transform: scale(1.2);
}

.effect:hover {
  	transform: scale(1.2);
    transition: 200ms;
    background-color: brown;
}

#myp3:hover {
    background-color: blue;
    transition: 3000ms;
}

a:link {
	color:yellow; 
}

位置选择器

div:nth-child(2) {
    background-color: aqua;
}

复合选择器
p:hover,
div:hover{
    background-color: lightblue;
}

.big.Big:hover {
    transform: scale(1.2);
}

element1, element2：同时选择元素element1和元素element2。
element.class：选则包含某类的element元素。
element1 + element2：选择紧跟element1的element2元素。
element1 element2：选择element1内的所有element2元素。
element1 > element2：选择父标签是element1的所有element2元素。

通配符选择器

*：选择所有标签
[attribute]：选择具有某个属性的所有标签
[attribute=value]：选择attribute值为value的所有标签

CSS 优先级

权重大小，越具体的选择器权重越大：!important > 行内样式 > ID选择器 > 类与伪类选择器 > 标签选择器 > 通用选择器 权重相同时，后面的样式会覆盖前面的样式 继承自父元素的权重最低

颜色

rgb(red,green,blue,透明度（可以不写）) (rgba) 或十六进制 #E5C0AF; 取色方法F12，图片取色qq截图

文本

text-align: right left justy center

行高和高度设置成一样的即可纵方向居中

letter-spacing 属性用于设置文本字符的间距。

text-indent属性能定义一个块元素首行文本内容之前的缩进量。

text-decoration 这个 CSS 属性是用于设置文本的修饰线外观的（下划线、上划线、贯穿线/删除线 或 闪烁）它是 text-decoration-line, text-decoration-color, text-decoration-style, 和新出现的 text-decoration-thickness 属性的缩写。

text-shadow为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

字体

font-size CSS 属性指定字体的大小。因为该属性的值会被用于计算em和ex长度单位，定义该值可能改变其他元素的大小。

font-style CSS 属性允许你选择 font-family 字体下的 italic 或 oblique 样式。

font-weight CSS 属性指定了字体的粗细程度。 一些字体只提供 normal 和 bold 两种值。

CSS 属性 font-family 允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。 属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 @font-face 指定的可以直接下载的字体。

背景

CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

CSS background-image 属性用于为一个元素设置一个或者多个背景图像。

背景图片可以用渐变色linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5))

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

background-position 为背景图片设置初始位置。

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。

opacity: 0.5; 透明度

边框顺序：上右下左

边框

border-style 是一个 CSS 简写属性，用来设定元素所有边框的样式。

border-width属性可以设置盒子模型的边框宽度。

CSS属性border-color 是一个用于设置元素四个边框颜色的快捷属性： border-top-color, border-right-color, border-bottom-color, border-left-color

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

元素展示格式

display可以使div与span之间转换；

1. block：

• 独占一行 width、height、margin、padding均可控制
• width默认100%。
• inline

2. inline

• 可以共占一行
• width与height无效，水平方向的margin与padding有效，竖直方向的margin与padding无效
• width默认为本身内容宽度

3. inline-block

• 可以共占一行
• width、height、margin、padding均可控制
• width默认为本身内容宽度

white-space CSS 属性是用来设置如何处理元素中的 空白 (en-US)。

text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示一个省略号或显示一个自定义字符串。

CSS属性 overflow 定义当一个元素的内容太大而无法适应 块级格式化上下文 时候该做什么。它是 overflow-x 和overflow-y的 简写属性 。

内外边距

• margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。

• 可取值：固定值，百分比，auto；
• 外边距重叠问题：
  • 块的上外边距(margin-top)和下外边距(margin-bottom)取最大值；
  • 父元素与后代元素：父元素没有上边框和padding时，后代元素的margin-top会溢出，溢出后父元素的margin-top会与后代元素取最大值。
• padding内边距
• 可以分别指明四个方向：padding-top、padding-right、padding-bottom、padding-left
  • 可取值：
  • 固定值，百分比；

子元素的margin-top连带影响父元素的上外边距 解决方法：

• ① 父元素加一个边框：border: 1px solid;
• ② 父元素加内边距：padding-top: 1px;
• ③ 父元素加上overflow属性 overflow: hidden;

• ④ 在父元素前面加一个空内容：.div-outer::before {content: “”;display: table;}

• 盒子模型:

1. content-box：是默认值，设置border和padding均会增加元素的宽高。
2. border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

Position

position默认；static z-index: 2; absoulate默认非static;

@media

@media (min-width: 768px) {
    .col-md-1 {
        width: calc(100% * 1 / 12);
    }

    .col-md-2 {
        width: calc(100% * 2 / 12);
    }

    .col-md-3 {
        width: calc(100% * 3 / 12);
    }

    .col-md-4 {
        width: calc(100% * 4 / 12);
    }

    .col-sm-5 {
        width: calc(100% * 5 / 12);
    }

    .col-md-6 {
        width: calc(100% * 6 / 12);
    }

    .col-md-7 {
        width: calc(100% * 7 / 12);
    }

    .col-md-8 {
        width: calc(100% * 8 / 12);
    }

    .col-md-9 {
        width: calc(100% * 9 / 12);
    }

    .col-md-10 {
        width: calc(100% * 10 / 12);
    }

    .col-md-11 {
        width: calc(100% * 11 / 12);
    }

    .col-md-12 {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .col-sm-1 {
        width: calc(100% * 1 / 12);
    }

    .col-sm-2 {
        width: calc(100% * 2 / 12);
    }

    .col-sm-3 {
        width: calc(100% * 3 / 12);
    }

    .col-sm-4 {
        width: calc(100% * 4 / 12);
    }

    .col-sm-5 {
        width: calc(100% * 5 / 12);
    }

    .col-sm-6 {
        width: calc(100% * 6 / 12);
    }

    .col-sm-7 {
        width: calc(100% * 7 / 12);
    }

    .col-sm-8 {
        width: calc(100% * 8 / 12);
    }

    .col-sm-9 {
        width: calc(100% * 9 / 12);
    }

    .col-sm-10 {
        width: calc(100% * 10 / 12);
    }

    .col-sm-11 {
        width: calc(100% * 11 / 12);
    }

    .col-sm-12 {
        width: 100%;
    }
}