课堂笔记之CSS相关杂记

在课堂中随手记录了一些笔记，仅限于自己复习整理用途，如有看到这篇随笔的同行，欢迎补充

w3c要求html和css是分离的。
html的css分离，css不再影响html的代码阅读。css的复用性高。
html和css分离以后，需要通过css选择器进行关联。

 

选择器的使用 ID
    /*
        id选择器：#ID名称
    */

类选择器
    /*
    通过类添加的样式要比通过元素添加的样式优先级高
    类选择器：.类名称
    */

元素选择器
    /*
    元素选择器:  直接写元素名称

    元素选择器会选中当前页面的所有匹配元素。
    */

后代和子代选择器
    /*
    后代选中器：  空格   范围大
    子代选择器：  >     范围小
    */

补充（样式继承）
    /*
    某些css样式会被子代甚至后代继承
    有些属性则不会，比如height属性。
    */

 

 

并集选择器
    /*并集选择器：用,分隔！*/

通用选择器
    /*通配符选器:匹配当前页面的所有元素*/

伪类（伪元素）选择器
    /*伪类选择器：用：来使用伪类选择器*/

例:
    li:nth-child(3n){
        color: red;
    }

 

 

外部样式 用link标签关联

例：
<link rel="stylesheet" href="../../css/first.css">

 

在正常的引入顺序下（先引入外部的，再写内部的）。
优先级（就近原则）顺序为：
行内样式   >  内部样式  >  外部样式

 

/*!important 通过标记使优先权最高*/
li{
    color: yellow !important;
}

 

 

在CSS设置宽高时

<!--所有的块级元素对宽高都有效-->
<div id="div"></div>
<p id="p">杰瑞教育</p>

<!--
所有的行级元素对宽高的设置都无效。
但是存在特殊元素  img  input  textarea  select
-->

 

文本样式
    #text{
        color: red;/*字体颜色*/
        opacity: 0.8;/*1：不透明，0：全透明*/

        font-style: italic;/*字体样式*/
        font-weight: bold;/*字体粗细*/
        font-size: 40px; /*字体大小*/
        line-height: 60px;/*字体行高*/
        font-family: 宋体 微软雅黑 sans-serif;/*字体系列*/
        /*复合属性（顺序！！）：等效于前五个属性（复合属性效率高）*/
        font: italic bold 40px/1.5 宋体 微软雅黑 sans-serif;
    }

 

文本样式
    #text{
        height: 30px;
        background-color: red;

        text-align: center;/*文本水平对齐方式*/
        line-height: 30px;/*行高，通常用来设置文本垂直方向的对齐方式*/
        letter-spacing: 10px;/*文本间距*/
        /*
        overline：上划线
        line-through：中划线
        underline：下划线
        */
        text-decoration: underline;/*文本修饰*/
        /*
        wavy：波浪线
        dashed：间隔线
        dotted：点状线
        solid：单实线
        double：双实线
        */
        text-decoration-style: solid;/*文本修饰的样式*/
        text-decoration-color: #FF6600;/*文本修饰的颜色*/

text-indent: 2em;/*文本缩进*/

    }
文本单行显示：

white-space: nowrap;/*文本换行的处理。不折行*/
overflow: hidden;/*溢出部分的处理。隐藏*/
text-overflow: ellipsis;/*溢出文本的处理。显示省略号*/

 

文本阴影
    #p{
        font-size: 100px;
        font-weight: bold;
        color: red;
        /*
        text-shadow：x轴的偏移量  Y轴的偏移量 模糊程度  阴影的颜色
        */
        /*text-shadow: 0px 8px 5px black;*/

        /*text-stroke:文本描边的宽度  文本描边的颜色*/
        -webkit-text-stroke: 2px yellow;
    }

背景相关样式
    #div{
        height: 300px;
        /*背景颜色*/
        background-color: red;
        /*背景图片（优先级高于背景颜色）*/
        background-image: url("../../img/f3_Android1.png");
        /*背景图片的遍历方式
        no-repeat：不重复
        repeat-x：X轴遍历
        repeat-y：Y轴遍历
        */
        background-repeat: no-repeat;
        /*
        background-size:背景图片的大小
        contain：
                图片的宽高比例不变，直到较小的方向填满，才停止缩放
                图片永远不可能溢出
        cover：
                图片的宽高比例不变，直到较大的方向填满，才停止缩放
                图片基本上都会溢出
        固定的大小：x轴的宽度   y轴的高度
        百分的大小（用的较多）：X轴的宽度百分百  y轴高度的百分比
        */
        background-size: 50% 50%;

/*复合属性  图片地址 遍历方式*/
background: url("../../img/TIM20180723155817.png") no-repeat;

    }

 

超链接的状态
    a:link{
        color: black;
    }
    a:visited{
        color: darkgray;
    }
    a:hover{
        color: yellow;
    }
    a:active{
        color: red;
    }

以上设置必须按顺序设置

<!--title属性：当鼠标悬浮在元素上方的时候，显示title属性-->