CSS使用全面总结

摘要： CSS（Cascading Style Sheet，层叠样式表) 定义如何显示HTML元素，它由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

参考：前端基础之CSS

CSS通用

CSS注释 ：/* 这是注释 * /
CSS引入方式：

<!--行内样式-->
<p style="color: red">Hello world.</p>  
<!--内部样式-->
<style>
        p{
            background-color: #2b99ff;
        }
 </style>
<!--外部样式-->
<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS选择器

基本选择器

<style>
    p {color: "red";} /*元素选择器 */
    #i1 {background-color: red;} /*ID选择器 */
    .c1 { font-size: 14px;} /*类选择器 标签中的class属性 如有多个，用空格分隔 */
    p.c1 { color: red;} /*类选择器 */
    * {color: white;}/*通用选择器 */
</style>

组合选择器

<style>
    /*后代选择器 li内部的a标签设置字体颜色*/
   li a { color: green;} 
    /*儿子选择器 选择所有父级是 <div> 元素的 <p> 元素*/
   div>p {font-family: "Arial Black", arial-black, cursive;}
    /*毗邻选择器 选择所有紧接着<div>元素之后的<p>元素*/
    div+p { margin: 5px;}
    /*弟弟选择器  i1后面所有的兄弟p标签*/
    #i1~p {border: 2px solid royalblue;}    
</style>

属性选择器

<style>
    /*用于选取带有指定属性的元素。*/
    p[title] { color: red; } 
    /*用于选取带有指定属性和值的元素。*/
    p[title="213"] { color: green; }
</style>

选择器的分组和嵌套

<style>
    /*分组div标签和p标签统一设置字体为红色*/
    div,p {color: red;}
    /*嵌套：c1类内部所有p标签设置字体颜色为红色*/
    .c1 p {color: red;}
</style>

伪类选择器

<style>
     /* 未访问的链接 */
    a:link {color: #FF0000}
    /* 已访问的链接 */
    a:visited {color: #00FF00} 
    /* 鼠标移动到链接上 */
    a:hover {color: #FF00FF} 
    /* 选定的链接 */ 
    a:active {color: #0000FF}
    /*input输入框获取焦点时样式*/
    input:focus {
      outline: none;
      background-color: #eee;
    }
</style>

伪元素选择器

<style>
    /*给首字母设置特殊样式*/
    p:first-letter {
        font-size: 48px;
        color: red;
    }
    /*在每个<p>元素之前插入内容*/
    p:before {
        content:"*";
        color:red;
    }
    after
    /*在每个<p>元素之后插入内容*/
    p:after {
        content:"[?]";
        color:blue;
    } 
    /*before和after多用于清除浮动*/
</style>

选择器的优先级

浏览器是按照不同选择器的权重来决定应该应用的样式的，具体的选择器权重如下图：（可通过添加 !important方式来强制让样式生效，但并不推荐使用）

CSS继承： 继承是CSS的一个主要特征，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个body定义的字体颜色也会应用到段落文本中。然而CSS继承性的权重是为0，只要给对应的标签重设字体颜色就可覆盖掉它继承的样式。但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。

CSS声明

CSS盒子模型

margin: 用于控制元素与元素之间的距离，达到相互隔开的目的。

<style>
.margin-test { /*margin-top; margin-right; margin-bottom; margin-left 分别控制*/
    margin: 5px 10px 15px 20px;  /*简写: 顺序：上右下左*/
    margin: 0 auto;  /*居中*/
}
</style>

Border(边框): 围绕在内边距和内容外的边框。

<style>
.border-test { /*border-width边框线粗细; border-style边框线样式; border-color边框线颜色;*/
    border: 2px solid red;  /*简写: 顺序：上右下左*/
    margin: 0 auto;  /*居中*/
    /*border-style 边框线样式参数： 
    none无边框；dotted点状虚线边框；dashed矩形虚线边框；solid实线边框。 */
    /*设单独某一个边框设置样式:border-top-style:dotted;  */
    border-radius: 50%;  /*设置为圆形边框：需要长和宽长度一致*/
}
</style>

注：border-radius 实现圆角边框效果

padding: 用于控制内容与边框之间的距离；

<style>
.padding-test { /*padding-top; padding-right; padding-bottom; padding-left 分别控制*/
padding: 5px 10px 15px 20px;  /*简写: 顺序：上右下左*/
/*padding简写注意
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个，按上－右－下－左的顺序作用于四边； */
}
</style>

Content(内容): 盒子的内容，显示文本和图像。
文字属性：

<style>
    .font-setting { 
        font-family: "Microsoft Yahei", "微软雅黑", "Arial", "sans-serif"; /*字体类型，可设多个，浏览器会使用它可识别的第一个值。*/
        font-size: 14px;/*字体大小,如果设置成inherit表示继承父元素的字体大小*/
        font-weight:400;
        /*
        font-weight设置字体的字重（粗细）
        normal标准粗细; bold粗体; bolder更粗; lighter更细;
        100~900 设置具体粗细，400等同于normal，而700等同于bold; inherit继承父元素字体的粗细值 */
        
        color:red; /*字体颜色，参数指定方式 ＃FF0000; RGB(255,0,0); red; rgba(255,0,0,0.3)a为色彩的透明度 */
        text-align:left;/*文本对齐方式：left左边对齐，默认值；right右对齐； center居中对齐； justify两端对齐*/
        text-indent: 32px;/*首行缩进*/
        text-decoration：none;
        /*文字装饰：
        none默认，标准文本；underline文本下显示一条线；overline文本上显示一条线；
        line-through显示穿过文本的一条线； inherit 继承父元素该属性的值。
        常用于去掉a标签默认的自划线：*/  
    }
</style>

背景属性(content+padding)：

<style>
    .background-setting{
    background-color: red;/*背景颜色*/
    background-image: url('1.jpg');/*背景图片*/
    background-repeat: no-repeat; 
    /* 背景重复 
    repeat(默认):背景图片平铺排满整个网页 repeat-x：背景图片只在水平方向上平铺 
    repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺*/
        
    background-position: right top;/*背景位置:background-position: 200px 200px;*/
    background:#ffffff url('1.png') no-repeat right top; /* 简写 */
    }
</style>

CSS位置设置

宽和高： width，height属性可以为元素设置宽度和高度。然而块级标签才能设置宽度，内联标签的宽度由内容来决定。

display属性：用于控制HTML元素的显示效果。

display的取值：

none：HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
block：默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
inline：按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
inline-block:：使元素同时具有行内元素和块级元素的特点。

display:"none"与visibility:hidden的区别：

   visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。
   display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。

float属性：在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

浮动的两个特点：

1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

float的取值

left：向左浮动
right：向右浮动
none：默认值，不浮动

clear属性： clear属性规定元素的哪一侧不允许其他浮动元素，只会对自身起作用，而不会影响其他元素。

clear的取值

    left：在左侧不允许浮动元素。
    right：在右侧不允许浮动元素。
    both：在左右两侧均不允许浮动元素。
    none：默认值。允许浮动元素出现在两侧。
    inherit：规定应该从父元素继承 clear 属性的值。

清除浮动的三种方式（副作用：父标签塌陷问题）

固定高度
伪元素清除法（使用较多）
overflow:hidden

<style>
    /*伪元素清除法：*/
.clearfix:after{ 
    content: ""; 
    display: block; 
    clear: both; 
}
</style>

overflow属性: 设定溢出属性，overflow（水平和垂直均设置），overflow-x（设置水平方向），overflow-y（设置垂直方向）
overflow的取值

visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden    内容会被修剪，并且其余内容是不可见的。
scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

position属性：设定定位属性

position的取值
static： 默认值，无定位，不能当作绝对定位的参照物，并且设置标签的left、top属性值不起作用。
relative： 相对定位，相对定位是相对于该元素在文档流中的原始位置，对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。主要用法：方便绝对定位元素找到参照物。
absolute： 绝对定位，设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，元素定位后生成一个块级框。对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。重点：如果父级设置了position属性为自适应的，如position:relative;，那么子元素就就设置absolute，它会以父级的左上角为原始点进行定位。这样能解决自适应网站的标签偏离问题；
fixed： 固定，对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当
出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。 注意： 一个元素若设置了position:absolute | fixed; 则该元素就不能设置float。因为它们一个是浮动流，另一个是“定位流”。但 relative 却可以设置float，因为它仍然占据文档流。

z-index属性： 层叠属性

设置对象的层叠顺序

    1.z-index值没有单位，就是一个正整数，默认的z-index值为0
     如果z-index值一样，那么谁写在HTML后面，谁在上面压着别 人， 
     定位了元素，永远压住没有定位的元素。

    2.数值大的压盖住数值小的

    3.只有定位了的元素，才能有z-index，浮动元素不能使用z-index

     4.从父现象：父亲怂了，儿子再牛逼也没用

opacity： 用来定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。