CSS3的魔法——常见属性

之前几篇简单讲解了一下CSS编写规则,和一些示例。相信你已经对CSS有一定的了解。
那么接下来我们讲解一下CSS中常见的属性,以及它们的特性。

background背景属性 用于定义HTML元素的背景。

属性名功能
background-color 用来定义元素的背景颜色
background-image 用来定义元素的背景图片
background-repeat 设置背景图像是否如何重复
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-position 设置背景图片在元素中的位置
background-size设置背景图片在元素内的大小比率

1、background-color定义背景颜色示例:

body{
background-color:#34d6a5
}
/*这样就给HTML整个body元素加上了一个原谅色*/

css中颜色值一般用以下几种方式来定义

  1. 十六进制 如:“#3f96a0”
  2. RGB 如 “rgb(255,255,255)”
  3. RGBA 如“rgba(255,255,255,0.5)”
  4. 颜色名 如“red”

注意:RGB和RGBA的区别就是RGBA 引入了第四个值,用于表示颜色的透明度,用rgb设置的颜色是不透明的,而用rgba设置的颜色,0代表的是完全透明,1代表的是不透明
另外RGBA是CSS3的新属性旧的浏览器可能不支持

2、background-image定义背景图片 示例:

body{
 background-image:url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png')
}
/*这就在body元素中引入了百度的logo图片*/
body{
 background-image:url('./logo_top.png')
}
/*这就引入了名为logo_top.png的图片*/

注意: 默认情况下,背景图像进行平铺重复显示,图片会覆盖整个元素

3、background-repeat 水平或垂直平铺 示例:

background-repeat有可能有三种值:
no-repeat ——不平铺
repeat-x ——水平平铺
repeat-y ——垂直平铺

body{
  background-image:url('./logo_top.png');
  background-repeat:no-repeat;
}
/*设置不进行平铺*/
body{
  background-image:url('./logo_top.png');
  background-repeat:repeat-x;
}
/*设置水平平铺*/
body{
  background-image:url('./logo_top.png');
  background-repeat:repeat-y;
}
/*设置垂直平铺*/

注意:background-repeat单独使用看不出效果,必须要搭配background-image一同使用才能看到效果

4、background-attachment设置背景图像是否固定或者随着页面的其余部分滚动 示例:

background-attachment有三个值:
scroll —— 背景图片随页面的其余部分滚动。默认
fixed —— 背景图像是固定的
inherit —— 指定background-attachment的设置应该从父元素继承

body{ 
    background-image:url('logo_top.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
/*设置背景图片默认固定在HTML上的左上角,不随页面滚动而滚动*/

5、 background-position 设置背景图像的起始位置 示例:

background-position的值有两个,第一个代表背景图的水平位置,第二个值是垂直位置
它的值有三种:
1、可以选择left / right / top / bottom 中的两个
2、可以使用%来指定背景图片在元素中的位置
3、使用px来指定背景元素中的位置
4、 inherit 表示 指定background-position属性设置应该从父元素继承

body{
background-image:url('logo_top.png');
background-repeat:no-repeat;
background-position:center top;
}

6、 background-size 设置背景图片在元素内的大小比率

background-size 的值有两个,第一个值设置宽度,第二个值设置的高度。

注意:若只设置第一个值,那么第二个值默认为auto

body{
    background:url('logo_top.png');
    background-size:80px 60px;
    background-repeat:no-repeat;
}

CSS3的魔法——选择器优先级

从之前的学习中,我们已经了解到了id选择器和class选择器两种基本选择器。
那么,当一个元素同时设置了class和id的情况下,设置了同一样式。
如下代码:

<p class="class" id='id1'></p>

从上述HTML片段中,我们可以看到,p标签同时设置了id和class属性
看如下CSS:

#id1{
    font-size:16px;
    background:#f00;
}
.class{
    font-size:12px;
    background:#0f0;
}

我们可以看到,id和class选择器同时对p标签指定了同样的两条属性。
那么我们生效的样式为那个呢?
答案是#id1选择器内部的样式获得胜利,并且其内部属性生效,而我们class选择器中的样式则没有生效。
这是因为CSS权重问题导致的优先级差别
优先级就是特权,优先级高的选择器中声明的CSS属性条无法被优先级低的选择器中的属性条替换掉。
那么我们CSS中的优先级顺序都是怎么样的呢?
在讨论这个问题之前,我们先来思考一下另一个问题。
看如下代码:

<div class="div" id="div_id">这是文字</div>

一个HTML元素中有几个选择器呢?
首先从之前我们的了解中,这里有class选择器和id选择器,另外我们可以看到div这个元素选择器。那么它们之间的优先级是怎么样的呢?
测试一下,现在有如下代码:

div{
    font-size:14px;
}
.div{
   font-size:24px;
}
#div_id{
   font-size:32px;
}

其结果不难猜到,答案是id选择器优先级更高,那么我们将id选择器从css代码中移除,可以看到,生效的代码为class选择器的样式。
完整的权重大小应该如下:
!important >内联样式>id>class>元素选择器>*通用选择器
先记住这条规则,在之后实践中了解各中的解释
下面列一下常用的选择器:

选择器示例示例说明
.class.info选择所有 class=”info”的元素
#id#idname选择所有id=”idname”的元素
**选择所有元素
elementp选择所有p元素
element,elementdiv,p选择所有div元素和p元素
element elementdiv p选择div元素内部的所有p元素
element>element div>p选择所有直接父级为div的p元素
:last-child div :last-child 选择其父级下最后一个div元素
:first-child div :first-child 选择其父级下第一个div元素

CSS3的魔法——id选择器和Class选择器

写在前面部分已经简单跟大家说了说CSS中的选择器,那么我们今天来深入了解一下CSS中最基本的选择器id选择器和class选择器 ,如果不明白的同学可以点这里,回顾一下什么是选择器。
ID选择器:
id选择器可以为HTML中指定了id属性的元素节点指定样式属性。
同一个id名称在一个HTML文档中只应出现一次,虽然现在大多浏览器允许id在HTML文档中出现多次,但是若你在使用JavaScript时读取该id名,就会产生错误
例如HTML中:

<p id='id'>p标签定义了id名称</p>

CSS中就应该如下来指定p标签的样式

#id{
    font-size:16px;
    border:1px solid #ccc;
}

注意: ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class选择器:
class选择器可以定义一组元素的样式
class选择器和id选择器不同的是,同名的class可以定义在多个元素中
如HTML中:

<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>
<p class='class'>这是一个class样式</p>

CSS中可以用一个class选择器统一定义以上所有的p标签样式

.class{
    font-size:14px;
    color:red;
}

总结:
同名id选择器在整个HTML中只能出现一次
同名class选择器可以在多个HTML元素中使用
id选择器在CSS中的标识为井号 ( # )
class选择器在CSS中的标识为点号 ( . )

CSS3的魔法——引入CSS文件的方式

CSS的导入方式一般有三种:
一、HTML的style标签内

<style>
/*这里可以书写CSS样式*/
</style>

这种方式被称为内联css文件。

二、HTML元素的style属性内

<div style="/*这里可以书写css样式*/"></div>

这种方式被称为内联css样式。

三、作为单独的.css层叠样式表文件引入HTML中 ,导入CSS文件的方式有两种

1、链接式引入CSS,在HTML的head标签内使用link标签将一个独立的CSS文件导入到HTML,语法如下:

<link href="./mycss.css" rel="stylesheet" type="text/css"/> 

2、在HTML的style标签内部使用@import导入CSS文件,语法如下:

<style>
    @import"mystyle.css";
</style>

link标签和@import的区别: link是html加载前就引用,而import是html加载后才引用 。

CSS属性的继承性

如果某些属性在不同的样式表中被同样的选择器定义,那么属性值不同的样式表中被继承过来。 如下代码定义在外部样式表中。

H1{
    color:red;
    text-align:left;
    font-size:8pt;
}

而内部样式表中也有相关定义如下:

H1{
    text-align:right;
    font-size:20pt;
}

如果这时,拥有内部样式表的HTML文件使用link标签引入了外部样式表,这时外部样式表中的属性会被继承过来,于是H1得到的样式如下:

color:red;
text-align:right;
font-size:20pt;

从我们得到的css效果来看,我们从外部样式表继承得到了color样式,而text-align和font-size样式则被内部样式表的样式所取代。
在CSS中相同属性只能生效一条,规则为:
1、后声明的样式替换先声明的样式
2、根据选择器优先级来进行替换

CSS3的魔法——写在前面

CSS 指层叠样式表 (Cascading Style Sheets)可以说是一个前端必不可少的技能之一。
那么你对它有多少了解呢?
每天三个属性和N个知识点串烧,同时这也是我个人笔记,希望可以帮助到大家,也可以提升自己。
和我一起,从常见属性,到复杂属性,一点点深入了解CSS3的神奇魔力吧。。。

注意:在这里我假设所有童鞋都有一定的XHTML、HTML知识,若你不了解相关知识,可以持续关注我的网站。

先从CSS书写格式说起

CSS书写格式相当简单,它由三个部分组成。
选择器名加一对花括号,花括号内部就是CSS语句块

p{/*CSS内容*/}
.class{/* CSS内容 */}
#id{ /* CSS内容 */ }

什么是选择器

在CSS中不带前缀的如:p、a、div等和HTML中的标签名一致的叫元素选择器
. 为前缀的如: .class、.abc、.row 等以 . 开头的叫类名选择器
# 开头的如:#id、#abc、#row等以 # 开头的叫id选择器
选择器的主要用于选择需要添加样式的元素。
当然我们的选择器不止这么几种,这里作为基础,不进行进一步展开,之后会开辟一篇详细解读一下CSS选择器的魔力。更新后我将会把链接放在这里。

CSS语句块书写规则

CSS语句书写规则,语句由 四部分组成 属性、: 、值、; 组成。
其中 : 用来分隔属性和值; 用来分隔两条语句 ,若属性有多个值的话,用空格来分隔多个值。格式如下面例子:

.class{ width:100px;} /*单个属性单个值,用:分隔属性和值,用;结束一条语句*/ 
.class1{border:10px solid red;}/*单个属性多个值,用空格隔开*/
.class2{
width:50px;
height:50px;
}/*可多行书写,属性必须要有对应的值,每条语句以;号作为结尾*/

注意:语句块中的内容均要使用英文的标点符号,注意书写规范,每条CSS语句都要以 ; 结尾,以免发生CSS样式不生效的情况