CSS3初学篇章_1

时间:2023-10-07 18:47:13

CSS 层叠样式表

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

前缀

浏览器
 -webkit  chrome和safari
 -moz  firefox
 -ms  IE
 -o  opera

  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:;
padding:;
}

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

body{}
h1{}

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

h1,h2, h3, p {
font-size:12px;
font-family:arial;
}

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

CSS3初学篇章_1

例:

<style>
div a{
background-color:#67B374; /*绿色*/
}
div>a{
background-color:#E61061;/*紫红色*/
}
.n+p{
background-color:#0000FF;/*蓝色*/
}
div~p{
background-color:#808080;/*灰色*/
}
</style>
<body>
<div class="n">
<a>背景色是#E61061</a>
<span>
<a>背景色是#67B374</a>
</span>
</div>
<p>背景色是#0000FF</p>
<p>背景色是#808080</p>
<p>背景色是#808080</p>
</body>

效果图:

CSS3初学篇章_1