CSS总结

CSS学习总结

一、CSS介绍

．　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。（百度百科版）
CSS:cascading层联 style样式 sheet工作表

二、CSS的主要内容

2.1 css样式的三种写法

（1）外部样式

   与html代码是分开的，大大减少代码的缩写量，增强代码的可维护性。
当一个项目中多个页面有相同的样式的时候使用（可重用性）。

    <!-- link标签就是用来引入外部的css的 -->
    <!-- rel="stylesheet"  rel表示相关联的意思 除了关联样式表之外，还可以关联其它的-->
    <!-- href表示你的外部样式的路径 -->
    <link rel="stylesheet" href="./out1.css">

（2）内部样式

   与html代码在同一个文件中。当一个页面中样式代码相对较多时使用。
并且这个样式出现的次数很少（1次）

    <style>
        .div{color: red;}
    </style>

（3）行内样式

   与html代码在同一个文件中。当一个页面中样式代码相对较少时使用。
并且写样式出现的次数很少（1次）；

    <div style="color: red;">
    </div>

注意：最牛逼的还是行内样式

（4）CSS有两个特性

  1）继承性：
         子继承父 如果父中设置了某个属性，对子也起作用。
  2）层叠性：
         层叠即覆盖，下方优先级高的覆盖低的。

    结论：
        1）行内 > 内部 = 外部（就近原则）
        2）id>class>类型/标签选择器（选择器的优先级）
        3）自己有样式 > 继承的样式 > 默认样式  （a标签除外）
        4）比较特殊值：  算谁的钱多，谁的优先级就高
            id:0100  100块
            class:0010   10块
            div:0001  1块

2.2 选择器种类

选择器后面加的{}叫声明块，里面放css的属性（属性名+属性值/color：red;）
基本选择器有（class、id、标签三个）

（1）标签（元素/类型）选择器：

   用标签名

“类型选择器匹配文档语言元素类型的名称。类型选择器匹配文档树中该元素类型的每一个实例。”
下面的规则匹配文档树中所有 h1 元素：
h1 {font-family: sans-serif;}
html {color:black;}
p {color:gray;}
h2 {color:silver;}这种类似的情况

（2）class（类）选择器

   给标签的class属性取个名字（多个标签可以起相同的名字）

.important {color:red;}
.important2 {width:50px;;}
<h1 class="important">
This heading is very important.
</h1>

结合元素选择器
类选择器可以结合元素选择器来使用。
成为 交集选择器

例如，您可能希望只有段落显示为红色文本：
p.important {color:red;}
选择器现在会匹配 class 属性包含 important 的所有 p 元素，但是其他任何类型的元素都不匹配，
不论是否有此 class 属性。选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。
 因为 h1 元素不是段落，这个规则的选择器与之不匹配，因此 h1 元素不会变成红色文本。
如果你确实希望为 h1 元素指定不同的样式，可以使用选择器 h1.important：
p.important {color:red;}
h1.important {color:blue;}

多类选择器：

<p class="important important2">
This paragraph is a very important warning.
</p>
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

（3）后代选择器

   多个标签或者外号组合起来，中间用空格分开

后代选择器（descendant selector）又称为包含选择器。
后代选择器可以选择作为某元素后代的元素。
例：如果您希望只对 h1 元素中的 em 元素应用样式，可以这样写：
h1 em {color:red;}

（4）分组（并集）选择器

   多个选择器用，分隔开，可以减少代码的缩写量

假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）
将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器。
可以将任意多个选择器分组在一起，对此没有任何限制。

（5）id选择器

   给标签的id属性取个名字（同一个文件中id的名字是唯一）

与类选择器一样，ID 选择器中可以忽略通配选择器。前面的例子也可以写作：
#intro {font-weight:bold;}
这个选择器的效果将是一样的。
第二个区别是 ID 选择器不引用 class 属性的值，毫无疑问，它要引用 id 属性中的值。
以下是一个实际 ID 选择器的例子：
<p id="intro">This is a paragraph of introduction.</p>

（6）通配符选择器

   *;代表找到所有的标签

*{margin:0; padding:0;},清除默认边距；

（7）伪类选择器

   :hover 鼠标放上去做出一些反应

页面上并不存在的，没有这个类。或者这不需要我们写class="xx"  .xx
伪类，通常使用在a标签上面
菜鸟教程详解：https://www.runoob.com/css/css-pseudo-classes.html

2.3 字体属性

font-style（字体样式）:normal（默认） italic（斜体）oblique（倾斜）
                    inherit（继承父元素的/基本上都有这个属性值）
font-weight（字体粗细）:normal（默认） bold（加粗）bolder（更粗） ligther（变细）
                    /100~900;定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
font-size（默认16px）
font-family（默认宋体）
color（默认黑色）
font:italic bold 16px "宋体"俩种写法

2.4 文本属性

text-decoration(装饰|修饰)underline(下划线) overline（上划线） lin-through（del贯穿线） none（没有样式）
text-indent（缩进）（px em(文字)）&nbsp代表一个空格

            首行空两格，空两个字的宽度。一个字的宽度是1em，两个字的宽度是2em。
            经典使用：
                1）首行空两格             text-indent:2em;
                2）让一个元素跑到屏幕外面  text-indent:-9999px;

text-align：left right center justify（最后一个仅对英文有效）(活字整理)整理版面
line-height：可以让文本在竖直方向居中 让line-height的值大于文本的像素值

常用的可以被继承的属性：
font都行-family -size -style -weight color text-indent text-align line-height

2.5 盒模型：6属性

width:
height:
border: 2px solid red;总共三个值；第一个代表边框的宽度；第二个的值代表的线条的状态（实线）；第三个值代表边框的颜色
dotted点成线 solid实线 dashed虚线double双线 transparent透明的
给边框指定圆角：border-radius（css3属性）

            /* transition: all 10s linear; */（linear指样式过渡是恒速）
            transform: rotatez(40deg);（可以写x,y,z三轴的旋转，如果配合hover可以大风车旋转或者中中）
            /* transform-style: preserve-3d; */

       买了新手机：一个是纸盒子，一个手机；（手机在盒子里）

padding（内边距）:填充填补内边距|当设置手机和纸盒子之间的距离时用（俩个物体同级时）指紧贴的盒子
margin（外边距）:边缘边界外边距|当设置纸盒子和其他盒子之间的距离时用（物体内外级|呈包含状态）或同级外部
尽量不乱用！！！
padding：当设置手机和纸盒子之间的距离时用

    padding-top:
    padding-right:
    padding-bottom:
    padding-left:
    
    padding:50px;
    padding:50px 60px;上下 左右
    padding:50px 60px 70px;(不推荐)上  左右  下
    padding:10px 20px 30px 40px;上 右 下 左

    padding: 0;

margin：当设置纸盒子和其它盒子之间的距离时使用

      margin-top:
      margin-right:
      margin-bottom:
      margin-left:
      
      margin:50px;
      margin:50px 60px;上下 左右
      margin:50px 60px 70px;(不推荐)上  左右  下
      margin:10px 20px 30px 40px;上 右 下 左

      margin: 0;

2.6 元素分类（三大类型标签）

块级标签：可以独立成行 div h1-h6 p ul ol dl form hr （能设置宽高）
行内标签：不会独立成行，从左往右依次排列span a em strong button;
　　　　　width和height是不起作用的；
　　　　　border和background是正常有效的； （不能设置宽高，能并列）
　　　　　padding和margin在水平方向是有效的，在竖直方向无效
行内块：不会独立成行，从左往右依次排列img input （能设置宽高，能并列）

display：block变成块级标签
display：inline变成行内标签
display：inline-block行内块

2.7 background（背景）相关常用属性

  盒子的背景：
    背景颜色
    背景图片
  只要是一个盒子，就可以设置它的背景。

（1）background-color:用来设置背景色的

背景颜色，默认会填充盒子的内容区域，padding区域，边框区域。并不会填充margin区域。
背景颜色：
    background-color: 单词/16进制/rgb函数/rgba函数/transparent 

    还有一个属性叫background，是一个复合属性，我们在设置背景颜色时，也可以使用这个复合属性。

（2）background-image:用一个图片来当背景

    注意细节：
        1）背景图片，填充了内容区域，padding区域，边框区域。
        2）默认情况下，图片的左上角和盒子的padding的左上角是对齐的。
        3）默认情况下，一张图片，作为盒子的背景图片，是不压缩，不变形，图片本身多大，放在盒子中还是多大。
        4）如果盒子小，图片大，盒子中只能显示图片的一部分。如果盒子大，图片小，一张图片，肯定会完整显示，并且会平铺。
        5）如果图片比较小，它会沿着x轴和y轴都进行平铺。

（3）background-size:用来设置背景图片的宽高的

设置背景图的大小：
        默认情况下，图片作为盒子的背景图，是不放大，也不缩小，原本是多大，还是多大。
        可以通过background-size来设置背景图的大小。

    格式：background-size:100px 100px;   第1个值代表宽度，第2个值代表高度。

    单位也可以是百分比，background-size:50% 50%； 这里的50%是width和padding之和的50%

  background-size: cover; 相当于把背景图扩大到最小边紧靠边框的地步
  background-size: contain;相当于把背景图扩大到最大边紧靠边框的地步

（4）background-position:用来调整图片的显示区域

   多用来配合css精灵图的显示
扩展：CSS Sprites翻译问题所以是又名雪碧图

背景图片在盒子上的位置：background-position来设置。
默认位置：图片的左上角和盒子的padding的左上角是对齐的。
        设置：background-position：0 0   第1个0表示x轴坐标  第2个0表示y轴坐标  00表示原点
        x值和y值可以写一个像素值，如：background-position: 93px 68px;
        
            除了写像素值之外，也可以写单词：
                x：left  center  right
                y: top  center bottom

            还可以写百分比：
                x:0%  50% 100%
                y:0%  50% 100%

（5）background-repeat

   用来设置图片是否在盒子中重复出现(repeat no-repeat repeat-x repeat-y)

当图片比较小时，控制是否平铺：
        background-repeat:
            repeat  平铺  默认就是平铺
            no-repeat  不平铺   如果不平铺的话，边框上也没有背景图片
            repeat-x  x轴平铺
            repeat-y  y轴平铺
        如果不平铺，图片的左上角和盒子的padding的左上角是对齐的。

（6）background复合属性

  各值之间用空格分隔，不分先后顺序。可以只有其中的某些值，例如 background：＃FF0000 URL（smiley.gif); 是允许的。

    使用background属性，顺序如下：
        background-color
        background-image
        background-repeat
        background-attachment
        background-position

      .box1{
           width: 400px;
           height: 300px;
           padding: 50px;
           border: 10px dashed red;
           margin: 50px auto;

           /* 有背景颜色，有背景图片时，显示的是背景图片 */
           /* 当背景图片比较小时，盒子其余的部分显示的就是背景颜色 */
           background: red url("./images/03.jpg") no-repeat center center;
        }

2.8 浮动（float）

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

img {
float:left;
clear:both;<!--clear 属性规定元素的哪一侧不允许其他浮动元素。-->
}
即：清除浮动！！！！！！！！！！！

1、可以实现图文混排
2、浮动的特点：
　　　　　　　包裹性
　　　　　　　破坏性
　　　　　　　块级框
display:
　　　　block　　　
　　　　inline
　　　　none
　　　　inline-block

2.9 定位分类

   通过定位使用的布局，叫层布局。
   定位的分类：

    相对定位：把自己的边框当作参考边界
    绝对定位：需要设置一个参照物，然后按照参照物去定位(position)
    固定定位：被定位当前元素会脱离流动布局，页面中的其它元素按正常文档流去布局;
               会遮挡部分元素。
               1、重新调整其它没有定位的元素的布局
               2、根据情况来调整页面的层次（z-index）

（1）相对定位 position:relative

    依据原本的位置进行定位，参考点：本身的位置
    只要定位肯定需要设置偏移量。如何设置偏移量？
    答：top, left, bottom, right   绝大部分情况下，只会用其中两个
    
    应用场景：在原本的位置基本上，进行偏移时，可以使用相对定位
    1）对一个盒子的位置进行微调
    2）position:relative 这一行代码还有一个作用，作为绝对定位的参数点
--------------------------------------------------------------------------------------------
注意细节：
    1）相对定位的元素脱离标准文档流，但是它原本的位置还是被自己占用着，别人无法占用。
    2）不管一个盒子，之前是什么性别，定位完后，还是什么性别。
    3）当进行了相对定位，基本上都要通过top, left, bottom, right来设置偏移量
    4）如果设置了margin也会影响位置

（2）绝对定位 position:absolute

    依据原本的位置进行定位，参考点：本身的位置
    只要定位肯定需要设置偏移量。如何设置偏移量？
    答：top, left, bottom, right   绝大部分情况下，只会用其中两个
绝对定位的注意细节：
    1）绝对定位的元素是完全脱离标准文档流
    2）一个元素绝对定位后，显示在什么地方，主要看你把参考点设置在了什么地方，如果没有设置，最终就以body作为参考点
    3）一个元素绝对定位了，就变性了，女盒子就变成男盒子（行内元素就变成块级元素）
    4）绝对定位也需要设置偏移量，有两个方向: left right 另一个方向是top bottom，设置偏移量，一般是两个方向选其一
    5）一般情况下，我们是给父元素设置参考点，口决：子绝父相
    6）定位完，还可以通过margin调整它的位置

使用场景：
    1）让块级元素水平垂直居中
    2）在写一些效果时，绝对定位使用的还是比较多，如：轮播图....
    3）在写动画时，会也使用到绝对定位
    ....
------------------------------------------------
可以改变绝对定位元素的层叠顺序：
    通过z-index:后面写一个数字  数字的值越大，这个元素越靠前
    z-index:0 1 2 3 100 1000 888 999

  多个绝对定位存在时，后方的会覆盖前面的！！！

（3）固定定位 position:fixed

固定定位：
    参考点：是整个浏览器窗口
    也需要设置偏移量：top right bottom left
-------------------------------
如果body中什么都不写，那么html标签的高度和body标签的高度都是0

html标签外面还有层，叫document，代表整个文档。

html{
    height:100%;   // html标签的高度是整个文档的高度
}
body{
    // body是高度是3屏
    height:300%; // body标签的高度是html标签高度的3倍
}//这俩个加上去，便于观察固定定位
-------------------------------

注意的细节：
1）完全脱离标准文档流
2）不管是什么性别的元素，固定定位了，都会就成男的
3）固定定位的参考点是浏览器的窗口，不会随着内容的滚动而滚动
4）对于固定定位，有些低版本浏览器支持并不好，使用的时候，需要考虑兼容性问题

-------------------------------

（4）静态定位 就是不定位 默认的

2.10 table

table tr th td
table: border(边框的宽度) bgcolor（表格背景） cellspacing（单元格之间的距离）
cellpadding（单元格中的内容与单元格边框的距离） height（表格的高度） width （表格的宽度）
tr: align(水平方向的居中方式) valign(竖直方向的居中方式) bgcolor(行的背景)
th td: rowspan（行合并） colspan（列合并）
caption:用来解释表格作用的一个标题
thead：表格头
tbody：表格身体
tfoot：表格尾部

比较实用的属性：
border-collapse: collapse;
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。

2.11 设置：手机模式

  手机模式手机模式手机模式手机模式手机模式手机模式手机模式手机模式手机模式手机模式手机

   <meta name="viewport"视窗设置
             content="width=device-width,终端|设备；宽等于设备宽
             user-scalable=no,可伸缩编码
             initial-scale=1.0,最初比例
             maximum-scale=1.0,最大比例
             minimum-scale=1.0">最小比例

   以上便是我学习了大约四天的css总结，css3的东西只有一个hover。相较而言，css基础还是只提供了一些静态的关于大小位置颜色等的搭配调试，但这些对网页的布局等也是至关重要的，如果说html是骨架，那么css在我的理解里便是皮肤。css3则是有更多的动态效果。