CSS初学习

目前看了36期视频,对前端的认识,就是觉得东西挺多的,如果不整理记忆的话,我觉得怕是,学完忘完了。所以整理一下视频中讲解的一些代码和知识点。结构化整理后,这样会方便后期的使用吧。

<!DOCTYPE html>
<html>
        <head>
            <meta charset = "UTF-8" />
            <title>CSS</title>
            <!--
                内部样式表
                    
                    
                    
                    
                        可以将CSS样式编写到head中的style标签里
                    - 将样式表编写到style标签中,然后通过CSS选择器选中指定元素
                      然后同时为这些指定元素一起设置样式,这样可以使样式进一步的复用
                    - 将样式表编写到styleb标签中,也可以使表现和结构进一步分离。
                      也是推荐的使用方式
                <style type = "text/css">
                p{
                    color:blue;
                    font-size:40px;
                }
                </style>      
            -->

            <!--
                外部样式表
                    可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中,
                    这样外部文件的CSS样式表将会应用到当前页面中。
                    
                    将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以使样式表在不同的界面中使用
                    最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存
                    加快用户访问速度,提高用户体验
            -->
            <link rel = "stylesheet" type="text/css" href = "style1.css"/>
        </head>
        <body>
        <!--
                将CSS样式编写到编写元素的style属性中
                    将样式直接编写到style属性中,这种样式我们成为内联样式
                    内联样式只对当前元素中的内容起作用,内联样式不方便复用
                    内联样式属于结构与表现耦合,不方便后期的维护。
                    不推荐使用。
                eg: <p style="color:red;font-size:1px">向往的生活</p>    
        -->
        
        <h1>沁园春·雪</h1>
        <p>北国风光,千里冰封,万里雪飘。</p>
        <p>望长城内外,惟余莽莽;大河上下,顿失滔滔。</p>
        <p>山舞银蛇,原驰蜡象,欲与天公试比高。</p>
        <p>须晴日,看红装素裹,分外妖娆。</p>
        <p class = "cla">江山如此多娇,引无数英雄竞折腰。</p>
        <p class = "cla">惜秦皇汉武,略输文采;唐宗宋祖,稍逊风骚。</p>
        <p class = "cla">一代天骄,成吉思汗,只识弯弓射大雕。</p>
        <p id="bottom">俱往矣,数风流人物,还看今朝。 </p>
        <span class = "cla">我是一个span</span>
        
        <!--
            块元素和内联元素
            
            div就是一个块元素
                - 块元素,独占一行,无论元素有多少,都会独占一整行。
                - 没有任何语义,一个纯粹的块元素
                - 主要用来进行页面布局
                p h1 h2 h3 ... 都是块元素
            
            span是一个内联元素(行内元素)
                - 所谓的行内元素,指的是只占自身大小的元素,不会占用一行
                - 没有任何语义,专门用来选中文字,为文字来设置样式
                a img iframe span
            
            块元素主要用来做页面中的布局,内联元素主要用来设置文本样式
                - 一般情况下,块元素包含内联元素,不会使用内联元素包含块元素
                - a元素可以包含任意元素,除了他本身
                - p元素不可以包含任何其他的块元素
        -->
        <hr />
        <div id="div1">
            <span>我是div中的span</span>
            <p><span>我是p标签中的span</span></p>
        </div>
        <div>
            <span>我也是div中的span</span>
        </div>
        <div>
            <p>我是div中的p标签</p>
        </div>
        <hr />
        <a href = "https://www.baidu.com/">访问过得链接</a> <br />
        <a href = "https://www.baidu123.com/">访问过得链接</a> <hr />
        
        <!--
            input标签
                - 作用:使用input可以创建一个输入文本框
                - 语法:<input type = "text"/>
        -->
        <input type = "text"/>
        <hr />
        <p>我是一个段落</p>
        <p id="Pend">
            在我的后园,可以看见墙外有两株树,一株是枣树,还有一株也是枣树。

            这上面的夜的天空,奇怪而高,我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去,使人们仰面不再看见。然而现在却非常之蓝,闪闪地䀹着几十个星星的眼,冷眼。他的口角上现出微笑,似乎自以为大有深意,而将繁霜洒在我的园里的野花草上。

            我不知道那些花草真叫什么名字,人们叫他们什么名字。我记得有一种开过极细小的粉红花,现在还开着,但是更极细小了,她在冷的夜气中,瑟缩地做梦,梦见春的到来,梦见秋的到来,梦见瘦的诗人将眼泪擦在她最末的花瓣上。

            告诉她秋虽然来,冬虽然来,而此后接着还是春,蝴蝶乱飞,蜜蜂都唱起春词来了。她于是一笑,虽然颜色冻得红惨惨地,仍然瑟缩着。

            枣树,他们简直落尽了叶子。先前,还有一两个孩子来打他们,别人打剩的枣子,现在是一个也不剩了,连叶子也落尽了。他知道小粉红花的梦,秋后要有春;他也知道落叶的梦,春后还是秋。他简直落尽叶子,单剩干子,然而脱了当初满树是果实和叶子时候的弧形,欠伸得很舒服。

            但是,有几枝还低亚着,护定他从打枣的竿梢所得的皮伤,而最直最长的几枝,却已默默地铁似的直刺着奇怪而高的天空,使天空闪闪地鬼䀹眼;直刺着天空中圆满的月亮,使月亮窘得发白。
        </p>
        <hr/>
        <p title="hello">I</p>
        <p title="我是title属性中的文字">believe</p>
        <p title="我是title属性中的文字">you</p>
        <p title="我是title属性中的文字">!</p>
        <hr />
        
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        <p>我是一个p标签</p>
        
        </body>
</html> 

/*
    1.元素选择器
        - 作用:通过元素选择器选择页面内指定元素
        - 语法:标签名{}
        eg:
            p{
                background-color:green;
            }
    2. id选择器
        - 作用:通过元素的id属性值选中唯一的一个元素
        - 语法:#id属性值{}
        eg:
            #bottom{
                background-color:red;
            }
    3. 类选择器
        class: 可以为元素设置class属性。
               class属性和id属性类似,只不过class属性可以重复。
               拥有相同class属性值的元素,称为一组元素。
               可以为同一个元素设置多个class属性值,多个值之间用空格分开。
        - 作用:通过元素的class属性值选中一组元素
        - 语法:.class{}
        eg:
            .cla{
                background-color:blue;
            }
    4.选择器分组(并集选择器)
        - 作用:通过选择器分组可以同时选中多个选择器对应的元素
        - 语法:选择器1,选择器2,选择器3{}
        eg:
            .cla,h1,#bottom{
                background-color:yellow;
            }
    5.复合选择器(交集选择器)
        - 作用:可以选中同时满足多个选择器的元素
        - 语法:选择器1选择器2选择器3
        eg:
            span.cla{
                clolor:red;
            }
        
    6.通配选择器
        - 作用:选中页面中所有的元素、
        - 语法:*{}
        eg:
            *{
                background-color:orange;
            }
        
*/

/*
    元素之间的关系
        父元素:直接包含子元素的元素
        子元素:直接被父元素包含的元素
        祖先元素:直接或间接包含后代元素的元素,父元素也是祖先元素
        后代元素:直接或间接包含祖先元素的元素,子元素也是后代元素
        兄弟元素:拥有相同父元素的的元素叫做兄弟元素
        
        1.后代元素选择器
            - 作用:选中指定元素的后代元素
            - 祖先元素 后代元素{}  (祖先元素和后代元素可用类选择器,id选择器等进行表示)
            eg1:
                为div中的span字体颜色设置为绿色
                div span{
                    color:red;
                }
            eg2:
                选中id为div1中的p元素的span元素
                #div1 p span{
                    color:orange;
                }
        2.子元素选择器
            - 作用:选中指定父元素的子元素
            - 语法:父元素 > 子元素{}
            eg:
                为div中的子元素span设置一个背景颜色为黄色
                div > span{
                    background-color:yellow;
                }
        3.伪类选择器
            伪类:表示元素的一种特殊的状态。访问过的额超链接,普通的超链接,获取焦点的文本框
                   为处于这种状态的元素设置样式时,可以使用伪类    
            给链接定义样式:根据访问者与链接的交互方式,将链接设置成4种不同的状态。
                - 正常链接 a:link
                - 访问过的链接 a:visited (由于隐私等问题,只能定义字体颜色)
                - 鼠标滑过的链接 a:hover
                - 正在点击的链接:a:active (hover不仅仅可以对a标签用,其他的也可以)         
                
                eg:
                    a:link{
                        color:green;
                        font-size:20px;
                    }
                    a:visited{
                        color:orange;
                    }
                    a:hover{
                        color:blue;
                    }
                    a:active{
                        color:red;
                    }
                    p:hover{
                        background-color:skyblue;
                    }
                    p:active[
                        background-color:orange;
                    }
                
                - 获取焦点    :focus
                - 指定元素前    :before 
                    表示元素最前边的部分,一般before需要结合content这个属性一起使用,通过content
                    向before或after位置添加一些内容
                - 指定元素后    :after
                - 选中的元素    ::selection
                eg:
                    input:focus{
                        background-color:grey;
                    }
                    p::selection{
                        background-color:yellow;
                    }
                    #pend:before{
                        content:"我将出现在整个段落的最前边";  
                        background-color:skyblue;
                    }
                    #pend:after
                    {
                        content:"我将出现在整个段落的最后边";
                        background-color:skyblue;
                    }
            伪元素:使用伪元素表示元素中的一些特殊的位置
            给段落定义样式
                - 首字母    :fist-letter
                - 首行      :fist-line
                eg:
                        P:first-letter{
                            font-size:20px;
                        }
                        p:first-line{
                            background-color:skyblue;
                        }                    
        4.属性选择器
            title属性,可以给任何标签设置。
             - 作用:当鼠标移入到该元素上时,元素中的title属性的值将会作为提示属性的值显示
             
            属性选择器
                - 可以根据元素中的属性或属性值选取指定元素
                - 语法:p[属性名]{}  选取含有指定属性的元素
                        p[属性名 = "属性值"]{}  选取含有指定属性值的元素
                        p[属性名 ^= "属性值"]{} 选取属性值以指定内容为开头的元素
                        p[属性名 $= "属性值"]{} 选取属性值以指定内容结尾的元素
                        p[属性名 *= "属性值"]{} 选取属性值以包含指定内容的元素
                eg:
                    p[title]{
                        background-color:skyblue;
                    }
                    p[title = "hello"]{
                        background-color:skyblue;
                    }
        5.子元素的伪类(其他子元素选择器)
            - :first-child 
            - :last-child
            - :ntn-child()    用于选中任意位置的子元素.参数也可为:even(偶数位置的子元素) odd(奇数位置的子元素)
            eg:
                p:first-child{  既是p元素 && 是该父元素的第一个子元素
                    background-color:skyblue;
                }
                p:last-child{   既是p元素 && 是该父元素的最后一个子元素
                    background-color:skyblue;
                }
                p:nth-child(3){   既是p元素 && 是该父元素的第3个子元素
                    background-color : skyblue;
                }
                
            - :first-of-type
            - :last-of-type
            - :nth-of-type
                    child是在所有子元素中排列
                    而type,是在当前类型的子元素中排列
        6.兄弟元素选择器
            后一个兄弟元素选择器
                - 作用:可以选中一个元素后紧挨着的指定的兄弟元素
                - 语法:前一个 + 后一个
                eg:
                    h1 + p{
                        background-color:orange;
                    }
            选中后面所有兄弟元素
            - 作用:可以选中一个元素后所有的的指定的兄弟元素
            - 语法:前一个 ~ 后面所有
            eg:
                h1 ~ p{
                    background-color:orange;
                }
        7.否定伪类
            - 作用:从已经选中的元素中剔除某些元素
            - 语法::not(选择器)
            eg:
                p:not(#Pend){
                    background-color:grey;
                }            
*/

/*
    样式的继承
        - 像儿子可以继承父亲的遗产一样,在CSS中,祖先元素上的样式,也会被他的后代所继承
        作用:利用继承,可以将一些基本的样式设置给祖先元素,这样所有的后代元素将会自动
              继承这些样式。
              但是,并不是所有的样式都会被子元素所继承。比如,背景相关的,边框相关的,定位相关的都不会被继承。    
*/

/*
    选择器的优先级
        当使用不同的选择器,选中同一个元素时并且设置相同的样式时。这时样式之间产生了冲突,最终采用哪个选择器,
        由选择器的优先级(权重)决定,优先级高的优先显示。
        
        优先级的规则
            内联样式    1000
            id选择器    100
            类和伪类    10
            元素选择器  1
            通配*       0
            继承的样式  没有优先级
            
        交集选择器:当选择器中包含多种选择器时,需要将多种选择器的优先级相加后然后再比较
            注意:选择器优先级计算不会超过他的最大的数量级
                  如果选择器的优先级一样,则使用靠后的样式。
        并集选择器:并集选择器的优先级单独计算
            eg: div, p , #p1, .hello{
                
                }
        可以在样式的最后,添加一个 !important ,则此时该样式将会获得一个最高的优先级
        将会优先于所有的样式甚至超过内联样式,但在开发中尽量避免使用
        
*/

/*
    伪类的顺序
        涉及到a的伪类一共有四个
            :link
            :visited
            :hover
            :active
        四个选择器的优先级是一样的。写的时候就按上面的额顺序即可,不然会被覆盖,达不到预期的效果。
*/
Last modification:July 25th, 2019 at 03:28 pm
有钱的捧个钱场,没带钱的捧个人场。

Leave a Comment