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之间转换；

block：

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

inline

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

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;}
盒子模型:

content-box：是默认值，设置border和padding均会增加元素的宽高。
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%;
    }
}

CSS

一 内部样式表

二 外部样式表

三 选择器