5分钟带你入门CSS3

想要入门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>

 

 

效果图:

原文来自:博客园/ 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值