css基础（精简版）

css基础概述

1.什么是css？
css的英文全称为Cascading Style Sheets，中文名为级联样式单，一般也称为层叠样式表单。
2.css的功能？
css是一种样式表现语言，它是对网页结构语言HTML的补充。主要用于对网页样式的定义，例如布局、颜色、文本等的设计。
3.css的作用：
精确控制页面中的各个元素。
4.css的发展史：
css的版本：
css1.0版本发布于1996年12月，只提供了一些基本的样式属性。
css2.0版本发布于1998年5月，提供了更为强大的功能。
css2.1版本发布于2007年，并于2011年6月正式成为标准，也是目前使用最广泛的版本。
css3.0版本于1999年开始制定，2001年完成工作草案，是目前css最新的版本，它的最大特点是将css3的规范内容分成一系列独立的模块，更有利于浏览器产商的逐步支持。
5.css特性：
层叠性–继承性等
···

css引入方式

 css三种引入方式：内联样式表；style="color:red;"
    内部样式表；
    <link rel="stylesheet" href="style.css">
    外部样式表  
     扩展引用方式！！！！！！
        <style>
            @import 'style.css'
        </style> 

css字体

 /* 字体 */
            font-family: 'Times New Roman', Times, serif;
            /* 大小跟单位 */
            font-size: 16px;
            /* 粗细 normal正常相当于number为400；
            bold粗体，相当于number=700；
            bolder特粗体；
            lighter细体；
            nubmer不跟单位*/
            font-weight: normal;
            /* 样式，normal标准字体样式；
            italic斜体样式；
            平时很少给文字加斜体，反而要给em，i取消斜体 */
            font-style: normal;
            /* 字体样式的复合写法：
            font: font-style font-weight font-size/line-height font-family; 
            其中size和family不可省略*/

css文本样式

 /* 文本样式 */
            color: aqua;
            text-align: center;
            /* 水平对齐left,center,right */
            text-decoration: none;
            /* 装饰文本none默认无，上划线overline；中划线line-through；下划线underline； */
            /* 重点添加删除下划线 */
            text-indent: 10px;
            /* 首行缩进2em； */
            line-height: 26px;
            /* 此为行间距：上间距+文字高度+下间距；此属性只更改上下间距 */

超好用的emmet语法

<!-- emmet语法：
    div*4 快速生成4个div；
    div>span 包含span的div；
    div+p 生成兄弟标签；
    p.class/#id 生成类或ID；
    .demo&*5 生成5个有序号；
    div{文字} 生成包含文字；
    css：
    h100 设高；
    w200 设宽； -->

css选择器

标签选择器；
        ID选择器；#id
        类选择器；.class（类名长则用中横线连接）
        通配符*

<!-- 包含属性值的选择器写法：
        <p name="name huawei"></p>
        p[name="name huawei"]{color:red;}
        p[name~="name"]{color:red;}   //表包含name选择；
        <p name="name-huawei"></p>
        p[name|="name"]{color:red;}   //表选择前缀； -->

<h3>复合选择器</h3>
    <ol>
        <li>后代选择器：ol li{};(空格隔开，这里ol里的所有li都会被选择，不论为几代)</li>
        <li>子选择器：ol>li{}；(只有亲儿子被选择，即直接后代)</li>
        <li>并集选择器：p,div{};(通常用于集体申明，和，表同级选择；约定语法规范，并集选择器竖着写。也可以用+,表同级)</li>
        <li>伪类选择器：</li>
        <!-- a:link       选择所有未被访问的链接
        a:visited    选择所有已被访问的链接
        a:hover      选择鼠标指针位于其上的链接
        a:active     选择鼠标按下未弹起的链接 
        注意：
        1.颠倒顺序会失效，严格按照LVHA的顺序来，love hate；
        2.去除链接下划线常用text-decoration:none;
        3.实际开发中常用a 和a:hover两个。
        光标伪类选择器：input:focus{};主要用于input；
        -->
    </ol>

css元素显示模式

<h3>css的元素显示模式</h3>
    <!-- 常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等；
        块元素特点：
        1.独占一行；
        2.高度、宽度及内外边距可以调节；
        3.宽度默认是父级宽度的100%；
        4.相当于一个容器及盒子，被内容撑开。
        注意：文字内不能使用块级元素，比如<p>
    常见的行内元素：<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等；
        行内元素特点：
        1.一行可显示多个；
        2.高宽直接设置无效；
        3.行内元素只能放文本及行内元素。
        注意：一般a标签内可放块元素。
    行内块元素：<img/> <input/> <td> 
        特点：
        1.一行可以显示多个（行内元素特点）；
        2.默认宽度即内容宽度（行内元素特点）；
        3.高度，行高，内外边距都可调节（块元素特点）。 -->
    <!-- 模式转换：
    display:block;(块元素) inline;(行内元素) inline-block;(行内块元素) -->

    <!-- min-width,max-width使用较少，也比较简单 -->

<h3>字体</h3>
    <!-- font-family:serif;   //serif衬线字体，主要用于标题显示
                          //sans-serif非衬线字体
                          //monospace等宽字体 -->
    <p>字体样式一般给body</p>
    <p>单行文字垂直居中：line-height:30px;(行高=上空隙+文字高度+下空隙)</p>
    <!-- 文字间隔：letter-spacing: 2px; (可为负值) -->

列表样式

<h2>列表样式</h2>
    <!-- list-style-image: //列表项前面的标记；
    list-style-position:outside //在什么位置显示列表项前面的标记；inside(内，外)
    list-style-type:disc; //设置图标类型：circle、square、decimal、none、low-alpha、upper-alpha...
    list-style:list-style-image list-style-position list-style-type； -->

css背景

<h3>css背景</h3>
    <!-- 1.css背景
    background-color:transparent;(默认：透明的)
    background-image:url(url);
    2.背景平铺
    background-repeat:no-repeat;(不平铺；默认平铺)repeat-x(沿x轴平铺) repeat-y(沿y轴平铺) 
    3.背景图片位置
    background-position:20px 50px;x坐标 y坐标(也可写一个)
    background-position:center right; 水平靠右
    background-position:right; 靠右，默认垂直居中
    background-position:20px center;
    4.背景图像固定
    background-attachment:scroll; 默认：随图像内容滚动；fixed固定
    5.背景复合写法
    background:transparent url(image.jpg) repeat-y fixed top;
    6.背景色透明度效果
    backgorund:rgba(0,0,0,0.6);
    IE9+版本浏览器支持，盒子内容不受影响。 -->

css三特性

<h3>css三大特性-</h3>
    层叠性（对同一个元素多次添加属性时，最新添加生效），继承性（当子元素没有设置属性时，对父元素设置属性时子元素继承其属性），优先级
    <h2>优先级</h2>
    <!-- 选择器                选择器权重
    继承或*                0,0,0,0
    元素选择器             0,0,0,1
    类选择器，伪类选择器    0,0,1,0
    ID选择器               0,1,0,0
    行内样式style=""       1,0,0,0
    !important 重要的      无穷大 -->
    <!-- 例：<style>
        #father{color: red;}
        p{color: aqua;}
    </style>
    <div id="father">
        <p>此时红色虽为ID，但为父级对p表继承；p则是元素选择器，优先级比继承高，即表现为蓝色。</p>
        复合选择器权重会叠加。 
        .nav li 权重大于 .pink
    </div> -->

盒子模型

<h1>盒子模型box model</h1>
    <!-- 边框：     谨记，画三角形时会用到：盒子的边框是向外撑开盒子，比如设盒子宽100px，边框2px，此时盒子整体占空间宽度为100加左右宽度，合计104px！！！
    border-width:5px;(边框粗细，一般都用px)
    border-style:solid;(实线边框)dashed(虚线边框) dotted(点线边框)
    border-color:red;(边框颜色)
    边框简写：border:5px solid red;+
    border-top:bottom;left;right;
        border-collapse:collapse;(合并重叠相邻单元格边框！！！！)
    内外边距margin(边框与外部盒子的距离),
     padding:5px;(上下左右)
     pading:5px 10px;(上下 左右)
     padding:5px 10px 20px;(上 左右 下)
     padding:5px 10px 20px 30px;(上 右 下 左)(边框与内容的距离) 
    注意：盒子已设宽度和高度后，再指定内边距，会撑大盒子；没设则不会。
    margin的方位同padding-->
    <h2>css3新增，IE9+支持</h2>
    <!-- 1.圆角边框：border-radius:10px;(使10px为半径的圆内切盒子的四个角，从而形成了圆角矩形)
    50%；(即高度宽度的一半，为圆)
    border-style:dotted;   边框样式
    border:左上 右上 右下 左下;
    border:左上右下 右上左下;
    border-top-left-radius:; -->
    <!-- 2.盒子阴影：box-shadow：10px(水平位置) 20px(垂直位置) 30px(模糊距离) 40px(阴影大小) rgba(0,0,0,0.3) inset;
    inset;(内阴影)
    3.(了解)文字阴影：text-shadow:10px(水平位置) 20px(垂直位置) 30px(模糊距离) rgba(0,0,0,0.3); -->

浮动

<h1>浮动</h1>
    <!-- 标准流（文档流）：块元素按行从上到下顺序排列；行内元素从左往右依次排列，遇到右边缘自动换行。
    浮动float 块元素横向排列用浮动，浮动的盒子不再保留原先的位置；
    float对行内元素使用时则使其具有行内块元素相似的特性，而不需要转换display可以直接给宽高；
    当浮动的块元素处于文档流块元素上方时会挤走文档流里的文字；
    任何元素都可以直接添加浮动，如果块级元素没有设置宽度，默认和父级一样宽，添加浮动后则由内容撑开；
    一个元素使用浮动时，其兄弟元素都要加浮动；
    父盒子不给高度，子盒子添加浮动，此时父盒子会塌陷高度变成0，影响下面的布局；这时我们需要清除浮动：
    一般有四种方法：
        1.隔墙法，（w3c推荐的做法）：在浮动元素末尾添加<div style="clear: both;"></div>或<br>等；
        2.给父盒子添加:overflow:hidden或auto，scroll;缺点无法显示溢出的部分；
            overflow:visible(默认);auto(自动添加滚动条)、hidden(隐藏超出内容)、scroll(一直显示滚动条)
        3.:after法：加入如下样式并给父元素加上类名clearfix， 百度淘宝等使用的此方法，
            .clearfix:after{
                content: "";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden;
            }
            .clearfix{
                ie6,ie7专有
                *zoom: 1;
            }
        4.双伪元素清除：加入如下样式并给父元素加上类名clearfix，  小米腾讯等使用此方法，
            .clearfix:before,.clearfix:after{
                content: "";
                display: table;
            }
            .clearfix:after{
                clear: both;
            }
            .clearfix{
                *zoom: 1;
            }
    父盒子无高度，子盒子浮动，此时影响下面布局则需清除浮动。

    双飞翼布局：
            1.使用float使左中右三列浮动；
            2.使用负margin让左右两列与中间列处于同一水平线上；
            3.在中间列增加一个div，设置margin值为左右两列的宽度；
            4.清除浮动。
        优点：
            1.中间列宽度自适应；
            2.中间内容先加载；
            3.浏览器兼容性好。
    
 -->

图片格式

<h3>常见的图片格式</h3>
    <!-- 1.jpg格式：色彩信息保留较好，高清，产品类图片经常使用；
    2.gif格式：最多只能储存256色，通常用来显示简单图形及字体，可保存透明背景和动画效果，实际常用小动画效果；
    3.png格式：新兴网络图形格式，结合gif和jpg的优点，存储形式丰富，能够保持透明背景，通常用于切成背景透明的图片；
    4.PSD格式：ps专用格式，可存放图层、通道、遮罩等多种设计稿，可直接从上面复制文字，获得图片，以及测量大小和距离。
        此处为ps切图内容，具体见https://www.bilibili.com/video/BV14J4114768/?p=190 -->

书写规范

<h3>css书写顺序</h3>
    <!-- 按以下顺序：
    1.布局定位属性：display/position/float/clear/visibility/overflow;
    2.自身属性：width/height/margin/padding/border/background;
    3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word;
    4.其他属性：content/cursor/border-radius/box-shadow/text-shadow/background:linear-fradient... -->

定位

<h3>定位</h3>
    position：static; 默认为static，标准流布局
    relative; 相对定位：相对于默认位置定位，不会脱离标准流，不会影响其他元素；
    absolute; 绝对定位：相对于除static定位之外的第一个父元素进行定位，如果没有则相对于页面定位；
    会脱离标准流；当多个绝对定位元素遮盖时，使用z-index设置层级；
    fixed（待后续补充，w3c有详解）;

总结

以上就是css基础内容了，比HTML多了一些，还只是概念基础，css的精华动画方面的留给css进阶模块，后续补充。
总结内容如有错误或遗漏欢迎留言指出，我看见后会及时修改，共同交流进步。