学习前端的第六天

今天开始学习css了，以下是我做的笔记：

2、css
     层叠样式表，是格式化网页的一种技术
     2.1 引入 css  
             行内样式：（不推荐使用）
             <h1 style="color：red；">今天周四了</h1> 

             内联样式：
             在head中添加style标签 

             外联文件：（推荐）
             需要单独创建.css文件：
             在haed标签中引入link标签：
            <link rel="stylesheet" href="css/base.css">

            @import（几乎不使用）
            在一个css文件中引入另一个css
    2.2 css语法：
              选择器{
                  css属性：属性值；
                  css属性：属性值；
                  css属性：属性值；
              }
    2.3 选择器：
        2.3.1：

             以字母开头，全部采用小写；
             以字母、数字、下划线、连字符组成；
        2.3.2基本选择器：

             元素选择器：会选中所有的相同的标签
             标签名{内容}

             id选择器：唯一
             <p id="p1">今天天气不错。</p>
             #p1 { colpr="red"}

             class 选择器：
             <div class="big">下课了吃烧烤</div>
             .big {}

             *选择器：选择所有标签
            选择所有元素，把默认样式归零
            *{
                margin：0；
                padding：0；
            }

        2.3.3组合选择器：
            后代选择器：常用
            .box p{}

            子代选择器：
            .box>p{}

            兄弟选择器：
            .box~p{}

            下一个兄弟：
            .box+p{}
        
        2.3.5伪类选择器：
            .box：link

            .box：visited
             
            .box：hover
                 鼠标移入当前元素时，设定的状态

            .box：active

            .box：focus

            .box：first-child
        2.3.6伪元素：
            ：：before
                必须设置content属性。
                特性与内联元素一样。
                也可以使用一个冒号

            ：：after
                必须设置content属性。
                特性与内联元素一样。

    2.4 css权重
        css引入优先级：
        行内 > 内联 || 外链文件

        权重：
        ！important > 行内样式（1000） > id选择器（100） > class选择器（10） > 元素选择器（1）
        权重可以相加：
        权重相同时。看先后顺序，权重值不一样时，看权重大小，大的覆盖小的。

3、文字属性：
    color：颜色值；
    颜色单词：red、biue
    十六进制：#000000
    rgb：rgb（255,255,0）
    rgba：rgba（255,255,255,0.1）透明度设置

    text-decoration:none | underline | line-throuth | overline|

    text-align:left | right | center;
    文本对齐（文字和内元素生效）

    text-indent:数值;
    设置缩进，值可以是百分比也可以是像素。

    text-transform：none（首字母大写） | uppercase | lowercase（首字母小写） | capitalize；
    文本大小写控制。
 
    word-spacing:大小；
    用于改变单词之间的间隔。

    letter-spacing:大小；
    修改字符之间的间隔；

    word-wrap:normal | break-word;
    是否允许长单词或者url 地址换行。

    direction：ltr | rtl；（不常用）
    文本方向

    text-shadow：x轴便宜 y轴便宜 模糊 颜色 （不常用）
    设置文本阴影。
4.字体属性
     font-size：px；
     设置字体大小。

     font-style：normal | italic；
     字体样式（斜体）。

     font-weight：200；
     加粗，值为100到900之间的整数。或者bold、lighter。

     font-family：字体；
     使用安全字体。
     多个单词和中文字体要打引号，多个字体之间通过逗号分开。

     font：是以上几个属性的简写的时候必须制定字体大小和字体系列，其他属性可省略
     font：font-style font-weight font-size、line-heght font-family；

     line-height：大小；
     行高
     当当前块级元素只有一行文字的时候，设置元素的行高=快级元素的高度，可以实现内部文字在垂直方向上居中

5、其他属性
    width：大小（px，%）
    元素宽度

    height：大小（px，%）
    元素高度
    只能给快级元素设置行高

    background：设置背景；
    background-color：颜色代码；
    background-image：url（图片代码）；
    background-repeat：no-repeat；背景图不重复出现
    background-size：设置背景图大小
                   contain：其中一边与盒子一样大，另一边等比例缩放。
                   cover：等比例放大图片，一直到最短边与盒子一样大，必然会导致长边被裁剪掉。
    background-position：center；背景图定位。
    background：url（）no-repeat center/cover；