5分钟带你入门CSS3

    xiaoxiao2025-04-29  18

    想要入门CSS3其实是很简单的,在网上搜一些视频学习几天就可以大概掌握了,剩下的就是实践了。这里给大家总结了一些常用的基础知识,喜欢可以收藏备忘。

     

    CSS 层叠样式表

      不同的浏览器需要不同的前缀,虽然目前最新版本的浏览器的不需要,但为了向下兼容,前缀还是少不了。

    CSS代码注释:

    /*注释内容*/

      CSS可支持多种设备,简化程序员的设计过程,加快加载速度,当然最重要的还是实现将表现与结构的分离。

      CSS样式可分为3种,分别为行内引用,页内引用,页外引用(外部样式表),它们依照就近原则,优先级:

    行内引用,页内引用,页外引用(外部样式表)

     

    1、行内引用(这种引用方式是不需要选择器的)

    <body style="bockground:#ccc">

        <h1 style="font-size:12px; color:#ff0000;">这是一个标题</h1></body>

     

    2、页内引用

     

    <head>

        <style type="text/css">

            body {

             background-color:#cccccc;

            }      h1{       font-size:12px;        color:#ff0000;       }

        </style></head>

            

     

    3、页外引用(外部样式表)

     

    style.css :

    body {

        background-color:#cccccc;

    }

    h1{   font-size:12px;    color:#ff0000; }

     

    CSS选择符

    1、通配选择符**代表所有对象

    *{

        color:blue;

        margin:0;

        padding:0;

    }

     

    2、元素选择符,其实就是标签作为名称的选择符

    body{}

    h1{}

     

    3群组选择符,对一组标签进行相同的样式定义,标签之间用逗号(,)分隔

    h1,h2, h3, p {

        font-size:12px;

        font-family:arial;

    }

     

    4、关系选择符

    分为4种:包含选择符、子选择符、相邻选择符、兄弟选择符,其中包含选择符与子选择符效果类似,以下图为例子解释,包含选择符选中的是被包含的所有F元素,不管嵌套多少层,只要被E包含就有效果。而子选择符选中的是,E元素的子元素F,就算E元素的子元素中存在F也没有效果。

    例:

     

    <style>

        div a{

            background-color:#67B374; /*绿色*/

        }

        div>a{

            background-color:#E61061;/*紫红色*/

        }

        .n+p{

            background-color:#0000FF;/*蓝色*/

        }

        div~p{

            background-color:#808080;/*灰色*/

        }

      </style>

     <body>

        <div>

            <a>背景色是#E61061</a>

                <span>

                    <a>背景色是#67B374</a>

                </span>

        </div>

        <p>背景色是#0000FF</p>

        <p>背景色是#808080</p>

        <p>背景色是#808080</p>

     </body>

     

     

    效果图:

    原文来自:博客园/ 

    转载请注明原文地址: https://ju.6miu.com/read-1298576.html
    最新回复(0)