css要点

@font-face {
    font-family: "myFont";
    src: url("myFont.ttf");
}
/*
   在资源文件中放置你的字体，在开头的时候就声明字体名字和路径
    浏览器就会下载运用，在其后可以设置运用它
*/


#fontAttribute{
    font-family: myFont,Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-style: normal;
    font-weight: lighter;
    text-transform:capitalize;
    text-decoration: overline;
    text-shadow: 1px,1px,1px,yellow;
    text-align: left;
    line-height: 2;
    letter-spacing: 1px;
    word-spacing: 2px;
    font-kerning: none;
    text-indent: 2px;
    word-break: keep-all;
    text-align: center;
    hyphens: auto;
}

/*
    font-family  字体栈，将按照一个个字体进行检索，使用被匹配的哪个字体
    font-size  字体大小，其中em为相对于父元素的字体大小，1em表示与父元素一致    rem是相对于根元素，不是父元素     px是像素
    font-style   字体样式，normal代表如果是斜体则取消斜体，italic斜体，oblique倾斜（斜体不作用，用普通文字的倾斜版）
    font-weight   border比父元素的粗体更粗一些，lighter更细点
    text-transform   转化为小写 capitalize: 转换所有单词让其首字母大写。  lowercase,uppercase
    full-width: 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。拉丁字符以及亚洲语言字形（如中文，日文，韩文）
    text-decoration line-through  线穿过字体中间  overline underline      decoration还有color等选项
    text-shadow 文字阴影，水平垂直偏移以及模糊半径 颜色 可设置多个阴影，用逗号隔开
    text-aligh   文本对齐方式       justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 hyphens，打破一些更长的词语。
    line-height 行高，纯数字以倍数呈现
    letter-spacing 字母的间距
    word-spacing   单词的间距
    font-kering 开关字体的间距
    text-indent 指代第一行空留多少空间
    word-break 是否打断单词
    text-aligh-last:最后一行的对其方式
    hyphens 开启或关闭连字符
*/


/*
    list 存在有序和无序，时常用它来做一些导航栏之类的东西，移动显示不同的等等，因为它有很多子项
*/

#ulAttribute{
    list-style-type: disc;
    list-style-image: url('../images/picture.png');
    list-style-position: outside;

    background-image: url("../images/picture.png");
    background-position: 100% 50%;
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-color: aqua;
}


/*
    list-style-type 选择一些前缀    如果设置了背景，可以通过none来关闭
    list-style-image 可以选择图片前缀，但是无法修改很多参数，因此不推荐,改为调背景
    list-style-position inside则看作是文本的一部分，对其文本。  而outside则作为单独的一部分，对其自己
    background-image    设置背景图片
    background-position 设置图片位置，上面是设置在左上角   如果第一值是100%，则在右侧
    background-size 设置背景大小
    background-repeat 一般设置的背景会一值重复，直到填充完毕，因为只需前面表示，则不填充

    在html中可以设置一些参数：
        <ol start="4" reversed>
            <li>Toast pitta, leave to cool, then slice down the edge.</li>
            <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
            <li>Wash and chop the salad.</li>
            <li value="3">Fill pitta with salad, humous, and fried halloumi.</li>
        </ol>
    
    从4开始计数，反着记，上面输出为4323
    也可以指定value，但是一定要是数字，道理我应该很容易理解
*/

  a:link {
    color: #265301;
  }
  
  a:visited {
    color: #437A16;
  }
  
  a:focus {
    border-bottom: 1px solid;
    background: #BAE498;
  }
  
  a:hover {
    border-bottom: 1px solid;     
    background: #CDFEAA;
  }
  
  a:active {
    background: #265301;
    color: #CDFEAA;
  }

  /*
    链接的五种状态： 
        Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
        Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
        Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
        Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab  移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
        Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。
        可以通过设置不同状态来提示用户
  */




/*
  与盒子有关的
*/
#boxAttribute{
    min-width: 200px;
    max-width: 600px;
    display: block;
    flex: 1 300px;
    box-sizing: border-box;
}


/*
    盒子概要：
        设置最大和最小宽度，当父容器的大于1280px时，则显示为1280px，小于480px时，则显示480px,拖动查看，其余则保持和父容器一直
        max-width   理解应该是和图片本身有关，当父容器小于图片本身宽度时，图片保持和父容器一致

        display:
            block box 块盒 独占一行，和前后内容不连续
            inline 随文档文本流堆放，可能会对自身产生影响
            inline-block 也会随文本流堆放，但是不会影响其内部，且该盒不会被分成两行显示
            flex 锁定在一行，每个框的大小和最大的框height和width保持一致，平均分配，给每一个盒子
        
        flex:
            当在父元素设置的时候无任何用处，默认为1，可以特殊定义子元素，flex 2，会按照比例分配宽度给每一个盒子

        box-size设定和没设定border-box
            未设定的框的宽度和高度等于content + padding + border。 
            设定的框的宽度和高度等于通过CSS设置在 content 的宽度和高度, padding 和 border 并没有添加到总宽度和高度上; 反而，他们占用一些内容的空间，使内容更小，并保持总体尺寸相同。
*/

#bkgrdAttribute{
    background-image: linear-gradient(to bottom right,white,rgba(255, 255, 255, 0.534) 50%,black);
    background-attachment: fixed;

    background: url(image.png) no-repeat 99% center,
                url(background-tile.png),
                linear-gradient(to bottom, yellow, #dddd00 50%, orange);
    background-color: yellow;
    background-repeat: no-repeat,no-repeat,repeat;
}

/*
    设置背景为渐变色：
        to right,to top,to bottom是渐变颜色的方向，起始颜色和终点颜色，如果颜色设置3个值的话，则会在由A-B-C
        颜色可设置为多个值，同时也可指定颜色站点的位置如上

    background-attachment:
        scroll     自身内容框滑动和所有父元素，背景跟着一起动，显示的内容不变
        fixed      当自身内容框滑动，背景不变，但是父元素滑动，自身不动，就在滑动看他这个图,想想知乎那个背景
        local      自身滑动，跟着一起滑动，父元素滑动，本身不滑，整体一起动
    
    设置多个背景，背景将按照顺寻进行层叠，例如上面的，最开始的图片将会叠到最上面,
    同时相应的repeat也要设置多个值,其余设置顺序一样
*/


#borderAttribute{
    border-radius: 10px;
    border: 2px solid black;

    width: 600px;
    padding: 20px;
    margin: 10px auto;
    line-height: 3;
    background-color: #f66;
    text-align: center;
    /* border-related properties */
    border: 20px solid black;
    background-clip: padding-box;
    border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png);
    border-image-slice: 40;
    border-image-repeat: round;
}
/*
    border-radius 创建边框圆角：
    如果是两个值 10px / 20px则创建的是椭圆圆角
        /* 1st value is top left and bottom right corners,
        2nd value is top right and bottom left  
        border-radius: 20px 10px;
        /* 1st value is top left corner, 2nd value is top right
        and bottom left, 3rd value is bottom right  
        border-radius: 20px 10px 50px;
        /* top left, top right, bottom right, bottom left 
        border-radius: 20px 10px 50px 0;
    
    使用图片对边框进行修饰
    首先对引入头像进行切片，slice以像素为单位，如上述图片为160*160
    
    stretch：默认;侧面的图像被拉伸来填满边界。这通常看起来很糟糕和像素化，所以不推荐。
    repeat：边图像被重复，直到边界被填满。根据具体情况，这可能看起来不错，但您可能会看到一些难看的图像片段。
    round： 边的图像被重复，直到边界被填满，它们都被稍微拉伸，这样就不会出现碎片。
    space：边图像被重复，直到边界被填满，每个拷贝之间添加了少量的间隔，这样就不会出现任何片段。这个值只在Safari(9+)和Internet Explorer(11+)中得到支持。
*/


  button {
    width: 150px;
    font-size: 1.1rem;
    line-height: 2;
    border-radius: 10px;
    border: none;
    background-image: linear-gradient(to bottom right, #777, #ddd);
    box-shadow: 1px 1px 1px black,
                inset 2px 3px 5px rgba(0,0,0,0.3),
                inset -2px -3px 5px rgba(255,255,255,0.5);
  }
  
  button:focus, button:hover {
    background-image: linear-gradient(to bottom right, #888, #eee);
  }
  
  button:active {
    box-shadow: inset 2px 2px 1px black,
                inset 2px 3px 5px rgba(0,0,0,0.3),
                inset -2px -3px 5px rgba(255,255,255,0.5);
  }
  /*
    
    第一个长度值是水平偏移量（horizontal offset ）——即向右的距离，阴影被从原始的框中偏移(如果值为负的话则为左)。
    第二个长度值是垂直偏移量（vertical offset）——即阴影从原始盒子中向下偏移的距离(或向上，如果值为负)。
    第三个长度的值是模糊半径（blur radius）——在阴影中应用的模糊度。
    颜色值是阴影的基本颜色（base color）。

  */

  .multiply{
    background-blend-mode: multiply;
}

/*
  background-blend-mode  背景混合模式，叠加！
*/