CSS基础

发布于 2015-12-10  1875 次阅读


CSS层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。

 

CSS属性的结构

52fde5c30001b0fe03030117

内联样式

<p style="color:#fff">内联样式</p>

内部样式

写在head标签内

<html>
    <head>
        ...
        <style>
          p{
               color:#fff;
           }
        </style>
    </head>
    <body>
       ...
    </body>
</html>

外部样式

写在单独的CSS文件里,并在head内引入外部样式表文件

<html>
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="style.css">  //引入style.css样式表文件
    </head>
    <body>
       ...
    </body>
</html>

行内元素和块状元素

【HTML】块级元素与行内元素详细介绍

 

优先级:内联式 > 嵌入式 > 外部式

继承

CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。

p{
    color:red;
    border:1px solid red;
}
<p>三年级时,我还是一个<span>胆小如鼠<span>的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>

color属性会被子元素span继承,而border则不会。
有关属性继承可以看这篇博文。
CSS样式表继承详解

选择器的权值

有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?

规定:

  • 标签的权值为1
  • 类选择符的权值为10
  • ID选择符的权值为100
  • 内联样式的权值1000(最高)
  • 继承也有权值但很低,有的文献提出它只有0.1,所以可以理解为继承的权值最低。
  • 在同一组属性设置中标有“!important”规则的优先级最大,!important写在属性值的后面,分号之前
p{
    color:red;                  /*权值为1*/
}
.first{
    color:green;             /*权值为10*/
}
#second{
    color:black;             /*权值为100*/
}

span{
    color:pink;             /*权值为1*/
}         
p span{
    color:purple;         /*权值为1+1=2*/
}
.first span{
    color:blue;            /*权值为10+1=11*/
}
#second span{
    color:yellow;        /*权值为100+1=101*/
}
h1+.first span{
    color:white;         /*权值为1+10+1=12*/
}

还有一个问题:同一个元素有多个样式,且这多个样式的权值相同怎么办?
css中使用层叠来解决这个问题,及这几个样式中不同的属性的都会被应用,相同的属性,取最后一个应用

p{
    color:red;
   border:1px solid red;
}
p{
    color:green;
    background:black;
}
<p>小时候成绩不好,经常挨骂</p>

可以看到color属性应用了后一种,为green颜色
border和background属性都被应用了

缩写

在CSS中有一些常见的缩写形式,如果不知道会对初学者造成许多困扰

盒模型代码简写

在盒子模型中margin、padding、border都有top、right、bottom、left四个方向的属性,有关这四个属性的值有如下几个的缩写方法:
1、如果top、right、bottom、left的值相同,如下面代码:margin:10px 10px 10px 10px;可缩写为:margin:10px;
2、如果top和bottom值相同、left和 right的值相同,如下面代码:margin:10px 20px 10px 20px;可缩写为:margin:10px 20px;
3、如果left和right的值相同,如下面代码:margin:10px 20px 30px 20px;可缩写为:margin:10px 20px 30px;
注意:padding、border的缩写方法和margin是一致的。

颜色缩写

当设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半。
例如:p{color: #336699;}可以缩写为:p{color: #369;}
p{color:#EEFFDD;}可以缩写为:p{color: #EFD;}

html5布局基础

HTML5 CSS3 整体布局


风雨兼程路,雨雪初霁时