CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

全栈工程师开发手册 （作者：栾鹏）

一个demo学会css
css选择器全解
css操作语法全解

CSS样式设置语法全解：

样式优先级

1、 !important标记的样式 > 内联样式(style属性) >id选择样式(#获取) > 属性选择 ([title=“da”]) > 标签选择 div p > 通配符*
2、 同一等级优先级具有叠加性。div p的优先级大于p。相同优先级，越晚设置的样式优先级越大
3、 绝大部分样式会从父元素继承到子元素上，继承的样式没有优先级，等级最低
4、 读者的重要性声明 > 创作人员的重要声明 > 创作人员的正常声明 > 读者的正常声明 > 用户代理声明

h1{
    color: #111111;  !important;                  /*  使用!important表示每个重要样式 */
    background-color: #111111;  !important;
}

值和单位

h1{
    /*  颜色  */
    color: #111111;                               /* 以六位16进制表示 */
    color: red;                                   /*  关键字表示  */
    color: rgb(255,255,255);                      /* 三位rgb值，每位0-255 */
    color: rgb(50%,50%,50%);                      /* 三位rgb值，每位0-100%*/

    /*  长度  */
    margin: 10%;                                  /*  百分比长度，相对于父元素的width而言*/
    padding: inherit;                             /*  关键字表示 inherit表示继承度元素属性，auto表示自动按规则调整 */
    height: 10px;                                 /* px整数像素点，cm厘米=0.394in   in英寸=72px   mm毫米=0.0394in  pc派卡=12px  */
    width: 10em;                                  /*  em相对大小，1em代表当前元素的字体大小，word中的一个字符大小，如果用em设置当前元素的字体大小，1em相当于父元素的字体大小 */

    /*  URL   */
    background-image: url("images/aa.jpg");     /*   相对url，url和()之间不能有空格  此处的url是相对于css文件的位置，不是相对于html的相对位置*/
}

字体

h1{
    font-family: sans-serif,Arial;               /*  设置字体  设置两个字体是为了若一个不能使用，会应用另一个  */
    font-weight: bold;                            /*  字体粗细  bold加粗  bolder更粗  lighter细体  100，inherit继承父元素  */
    font-size: large;                             /*  7个关键字表示，数值表示如12px  百分比表示如120% */
    font-style: italic;                           /* italic斜体  oblique倾斜  normal正常  inhert继承父元素 */
    font-variant: small-caps;                     /*  字体变形  small-caps表示小写变成小号大写，大写变成大号的大写  */
    font-stretch: extra-condensed;               /* 字体拉伸 */
    font: lighter large Arial;                   /*  字体属性简写，style，weight，variant，size，family  前三个顺序任意，后两个必须按顺序*/
}

文本属性

span{
    text-indent: 4em;                 /*  首行缩进4个字符  */
    text-align: center;               /*  水平对齐， left、right、center、justify两端对齐  */
    line-height: 1.2;                  /*  最小行高，不一定是这个距离，所有元素都有这个属性，但是只影响行内元素，float型参数值表示相对于字体的缩放比例，因为会继承，所以尽量使用比例控制，默认为字体大小的1.2倍。em、ex、百分比都是相对于元素大小来说的 */
    vertical-align: baseline;         /* vertical-align只应用与行内元素和替换元素，baseline表示基线对齐，sub下标，super上标，bottom行框底端对齐，text-bottom行内文本底端对齐，middle居中，top顶端对齐，text-top行内文本顶端对齐  */
    vertical-align: -100%;             /*  百分比：计算元素line-height乘以百分比，将元素基线相对于父元素基线升高该数值。正数元素上升，负数元素降低 */
    word-spacing: 10px;                /*  字间隔，单词间隔 */
    letter-spacing: 10px;              /*  字母间隔 */
    text-transform: uppercase;        /*  文本转换，uppercase全部大写，lowercase全部小写，capitalize首字母大写 */
    text-decoration: underline;       /* 文本装饰 underline下划线，overline上划线，line-through横贯线，blink闪烁文本，不继承 */
    text-shadow: green 5px 0.5em 1px,1px 1px 1px black;   /*  阴影四个参数： 颜色，右偏移，下偏移，模糊半径。  多个阴影使用逗号隔开*/
    white-space: pre;                  /* 文本空白符处理模式，pre-line合并空白，保留换行，允许自动换行。normal合并空白，忽略换行，允许自动换行。nowrap合并空白，忽略换行，不允许自动换行。pre保留空白，保留换行，不允许自动换行，pre-wrap保留空白，保留换行，允许自动换行  */
    direction: ltr;                    /*  文本阅读方向  ltr从左向右读    rtl从右向左读  */
    unicode-bidi: embed;               /*  处理书写方向  */
}

替换元素，内容占位符，具体显示由其他控制，img由具体图片控制，input由type类型控制
非替换元素，元素内容显示直接写在文档中
块级元素，框前框后生成换行，段落p，标题h1，div等元素，display:block标记将元素生成块级框
行内元素，框前框后没有换行，是块级元素的后代元素，strong、span、a、img等元素，display:inline将元素生成行内框

块级非替换元素

所有的属性默认都是auto的

div{
    margin-left: -10px;                /*  外边距，可为正负，可以为auto，背景色默认为透明 */
    border: 1px dashed black;         /* 边框（宽度，样式，样色），颜色默认取元素背景色  */
    margin-top: auto;                  /* 上下外边距只要设置auto，就自定义为0，和左右外边距不同，元素间垂直上的外边距会自动合并（1、正正合并->取绝对值最大的   2、负负合并->取绝对值最大的  3、正负合并->取正负值的和）  */
    padding: 10px 10px;                /* 内边距，内容背景也会应用到内边距，只能为正值，不能为auto */
    height: 10%;                       /* 百分比是相对于父元素内容区而言的，如果父元素内容区宽度没有明显声明（没设置或为auto），则子元素的百分数重置为auto。元素内容高度大于元素框高度时，表现取决于父元素的overflow */
    width: 50%;                        /* 宽高为内边界之间的距离，不包含内边距，边框，外边距。可以设置为auto或正值。一般子元素的内容区(width)+子元素的内边距+边框+子元素外边距=父元素的内容区(width) */
    /*  子元素的所有边距总是会占满父元素内容区，子元素内容区、外边距可以设置为auto。当三个距离（宽度，左外边距，右外边距）均不为auto，系统会自动将margin-right设置为auto  */
    /*  横轴方向：当有一个auto，则自动调整使占满父元素内容区。当左右外边距为auto，则调整设置为相等长度，占满父元素内容区。当宽度和一个外边距为auto，则外边距缩为0，宽度自动调整占满。当三个都是auto，则两个外边距为0，宽度占满  */
}

块级替换元素

img{
    width: auto;                       /*  块级替换元素的使用与非替换元素相同，只是width设置为auto时会自动为替换元素的内容的大小。如果宽度设置为固定大小，则高度也跟随比例变化，除非高度也设置了固定值  */
}

行内非替换元素

以 span strong em为主。

1. 每个元素的行内框=（line-height减去font-size）/2增加到内容区两边，负数也一样运算，一行元素的行框为最高行内框的顶端和最低行内框的底端。文字始终处于行内框的中间，一个元素的font-size大于line-height，会超出行高显示，就像margin为负数
2. vertical-align作用于行内元素上，保持行内框与行框的对齐方式，vertical-align设置为数字，则类似为块元素的padding，会增加行高。行内非替换元素的padding不增加行高，也不影响文字的位置，会影响行内元素背景色的面积
3. 多个对齐方式，匿名文本（一行中非行内元素文本）的对齐方式取第一个替换元素（没有替换元素取第一个非替换元素）的对齐方式
4. 关于对齐方式，首先根据各行内框，计算行框，再根据各自的vertical-align布局，没设置时，默认为底端对齐

行内替换元素

以 img input 为主

1. 替换元素影响行框的高度，行内元素增加内边距，边框，外边距都会影响分布，增加行内框，但不影响元素的line-height，进而不影响vertical-align为百分比的情况
2. 行内替换元素的底端默认与文本行的基线对齐，当替换元素设置了vertical-align对齐方式，则行内非替换元素vertical-align会自动更改为替换元素的对齐方式
3. 行内替换元素的padding增加行高，因能够像文字的位置，也影响行内元素背景色的面积

元素显示display

div a{
    display: block;                    /*  block将元素以块元素的形式表现，不过不改变元素的本质，该元素还是原来的行内或块元素。  块元素不能是行内元素的后代元素  */
    display: inline;                   /*  inline行内元素显示 */
    display: inline-block;            /* inline-block行内块元素，将块元素作为替换元素放在行中，不换行，inline-block元素由原来块元素属性决定 */
    display: run-in;                   /*  run-in行内块元素，将块元素转化行内元素，与后面的块元素，并列在一行。若后面是行内元素，则run-in将元素保持为块元素  */
}

边距 边框

div{
    margin: 10% 10% 0.5em 10px;          /*  上  右 下 左。   左默认同右，下默认同上，右默认同上，百分比都是相对父元素的width  */
    margin-top: 10px;                    /*  只设置一个外边距，其他默认为0，默认情况，上下外边距会自动合并。行内非替换元素的上下外边距没有任何影响，也不改变元素行高 */
    padding: 10% 10% 0.5em 10px;         /*  背景会延伸到内边距，百分比都是相对于父元素的width，内边距影响行内替换或块元素的分布，影响所有元素的背景色面积    */
    padding-bottom: 10px;                /*  只设置一个内边距，其他默认为0  */
    border-style: solid dashed dotted double;               /* 设置四条边框   solid实线，dashed虚线  dotted点线  double双层线 inset内凹槽  outset外凸框 groove凹槽  ridge垄状边框 */
    border-bottom-style: inset;          /* 单独设置一边边框，边框默认为none，宽度默认为0。要同时修改这两个才会显示边框 */
    border-width: 10px 0.1em thick 0;    /* thick > medium > thin不一定具体多少宽度 */
    border-color: black rgb(25%,25%,25%) #0d0d0d silver;     /* 边框颜色默认为元素颜色，color会继承 */
    border-bottom: thick solid gray;    /*  边框合并简写，一次设置一边边框style color width可乱序 */
    border-style: dashed solid double;  /*  边框合并简写，一次设定一个属性， 这里的右边框会自动和左边框相同 */
    border: medium green;                /*  边框合并简写  一次设定四个边框所有属性，没有设定style，默认为none 不显示 */
}

颜色 背景

div{
    color:#0d0d0d;                                /* 默认前景色为黑色，颜色会继承，边框文字颜色，默认为前景色  */
    background-color: transparent;                /* transparent表示透明色  */
    background-image: url("images/aa.jpg");      /* 设置背景图片 */
    background-repeat: repeat;                     /*  repeat背景图片重复平铺，不拉伸，repeat-x横轴重复平铺，横纵不拉伸，repeat-y纵轴平铺，不拉伸，no-repeat横纵都不平铺，都不拉伸 */
    background-position: top right;                /*  初始化背景图片的位置，关键字center top  或数值50px 50px  或百分比10% 10%（图片中心位置的百分比） 都可以。*/
    background-attachment: fixed;                  /* 背景随元素的滚动情况，fixed表示背景图片不滚动（此时图片的位置由可视区决定，而不是由元素决定），scroll表示背景滚动 */
    background: white url("images/aa.jpg") top right repeat-x fixed;/* 属性简写。  背景色 背景图片 背景位置  背景平铺方式  背景是否滚动。所有均可省略 */
}

浮动

div{
    float: left;            /*  浮动，当前元素相对于父元素中的位置(除非外边距为负)，不能超出父元素的范围，浮动元素都会生成块级框，像块级元素一样表现，浮动元素的外边距不合并，多个浮动元素不重叠（外边距为负除外） */
    /*  浮动元素，同意处理成块级元素，浮动侧方向必须保持，尽可能利用空间    浮动元素从处于相同浮动边界的之前的浮动元素的外边向对面平铺，若内有足够的空间，则另起一行 */
    /*  块元素占一行，而不是现实的那点地方，块级div无论大小，在文档中的占位符，始终占一行。  */
    /*  默认情况：浮动元素不影响块级元素的正常现实，（后续块级元素，紧接在前面的块级元素之后显示，就像浮动元素不存在一样），因为浮动元素是一个新的显示层 */
    clear: left;            /* 浮动或非浮动元素，左侧不包含浮动元素层（即若左侧为浮动元素则在浮动元素应用到当前正常流显示层，换行显示），为了保证和左侧的浮动元素不重叠 */
}

定位

div{
    position: absolute;                 /*  fix同absolute,只不过fix的包含块是视窗 */
    /* relative的偏移是相对于正常流中未定义前的偏移，在文档占位符中，保持不变，显示上使用偏移后显示，所以relative保留原本空间，保持元素形状，不影响后续的分布，只改变自己的分布。需要使用宽高+top、left实现布局 */
    /* absolute删除原本空间，生成新的块级框，决定定位元素不影响其他元素的分布，absolute的包含快为最近的position值不为static的祖先元素，一般就人工设置想要的包含块元素的position为relative，不是父元素本身   */
    top: 20px;                          /*  偏移  没有宽或者高的时候使用偏移确定元素大小，偏移若设置为auto，就是保持定位前的位置属性*/
    left:10%;                           /*  若元素有宽高，则布局还依靠左偏移、上偏移  */
    right: -20px;                       /*  有元素宽高，right，bottom设置无效，负数可以促使元素偏移出包含快 */
    bottom:10%;                         /* 定位中的纵向百分比相对于包含块的height而言，横向百分比相对于包含块width而言 */
    min-width: 10em;                    /*  max  min 设置元素的大小限制。为了混合使用不同的单位，如大小为10%但是要求不小于10em  */
    /* 溢出 */
    overflow: hidden;                   /*  溢出处理方式  hidden隐藏  scroll滚动   auto浏览器自行处理（一般是滚动） visible（默认）元素显示超出元素框外，但元素框形状不变 */
    /*  裁剪 */
    clip:rect(50px,100px,100px,50px);  /*  clip内容裁剪，显示在内容区的部分，遮罩使部分区域显示。上 右 下 左，全都是相对于左上角坐标而言的。只能设置数值或auto，不能使用百分比，裁剪区域超出内容区，内容也会显示 */
    /*  可见性 */
    visibility: visible;                /*   hidden隐藏。visible显示 collapse用于表元素  */
    /*  z轴层叠  */
    z-index: 1;                         /* 所有定位元素均有此属性，越大越在上层，可以为负值 */
}

表布局

表格会自动插入完成，表包含行，行组（或者列，列组）。行包含单元格的性质
表格的表现包含6个层，由上至下：单元格-行-行组-列-列组-表格

table{
    margin: 10px;                 /*  表格可以有外边距，但是没有内边距 */
    caption-side: bottom;         /*  表标题位置，top顶部  bottom底部 */
    border-collapse: collapse;    /*  表单元格边框  collapse合并边框模式   separate分割边框模式  */
    border-spacing:1px 2px;       /* 边框间隔距离，水平距离-垂直距离。此属性只能应用到表上 */
    empty-cells: hide;            /*  空单元格处理，show显示  hide隐藏  */
    table-layout: fixed;          /*  表宽度布局方式  fixed固定宽度布局，auto自动宽度布局    高度总是会自动布局 */
    height: 500px;                /* 最小表高，auto表格会自己计算 */
    /* 固定宽度布局，列宽为auto的列，会根据首行单元格宽度或整个列表剩余可控宽度平均分配来设置列宽。若列宽和大于表宽，则表宽自动更改。若表宽大于列宽和，则多余表宽平均分给每个列宽 */
    /*  固定宽度布局：列宽由首行单元格控制，其他单元格的width失效，若单元格内容过多，根据overflow控制显示 */
    /*  自动布局：width:auto也有可能触发。列宽为百分比时，是相对于表宽计算的 */
}

单元格

table td{
    border-style: hidden;         /*  边框样式，合并边框模式下，hidden优先级最高，none(默认)优先级最低，宽边框优于窄边框，边框样式优先级(double>solid>dashed>dotted>ridge>outset>groove>inset) */
}

列表

li{
    list-style-type: disc;                              /* 列表项前端标志  disc实心圆，有很多中  可继承 */
    list-style-image: url("images/aa.jpg");           /* 图像作为列表项前端标志，如果加载不成会使用list-style-type显示 */
    list-style-position: outside;                      /* 列表标志的位置，outside默认，标志独立成列，不影响其他元素的布局，相当于标志相对于列表项的绝对定位 */
    list-style:url("images/aa.jpg") disc outside;   /* 标志样式合并简写，无顺序要求 */
    /*  还有相关计数的内容 */
}

系统字体颜色

使web应用更像操作系统的一部分

body{
    font:icon;                                       /* caption标题控件的字体样式，按钮下拉样式。icon图标标签的字体样式，驱动器，文件夹，文件图标。menu菜单列表文字样式。message-box对话框文字样式  status-bar窗口状态条中的文字样式  */
    color:ActiveBorder;                             /* ActiveBorder活动窗口外边框颜色   ActiveCaption活动窗口标题背景色，  AppWorkspace文档应用背景色，Background桌面背景色  ButtonFace三维按钮“面”上背景色  */
}

光标

a[href]{
    cursor: e-resize;                               /* 设置光标样式：指示与选择类光标样式：pointer指针，hand手型。  移动类光标：e-resize，ne-resize，sw-resize；  等待前进类光标；wait，progress；  提供帮助类光标：help  图形类光标  url(xxx.cur)  */
}

轮廓

div{
    outline-style:dotted;                            /* 轮廓不区分上下左右，因为轮廓是不规则的。轮廓不影响其他元素的布局，分布在边框的外面。 */
    outline-width: medium;                           /* 轮廓宽度 */
    outline-color: invert;                           /*  轮廓颜色，可以使用正常的颜色设置，也可以设置为invert（默认值），表示对轮廓后面的颜色取反 */
    outline: green medium dotted;                   /*  轮廓属性简写 */
}

限定样式应用的媒体和设备大小

@media screen and (max-device-width: 1700px){       /* screen屏幕  print打印机  projection投影  speech(声音媒体，aural已废弃)  braille盲文  handheld手持式媒体  */
    body{
    }
}