css之框模型（盒子模型）、默认样式初始化、选择器和伪类

来源：互联网发布：aspx网站源码修改教程编辑：程序博客网时间：2024/05/25 16:40

一：框模型
1.概念：CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。
2.分类：
a.border-box（代码中设置的宽、高，就是整个盒子的宽、高）
注：border-box（css3属性，ie8以下不兼容，Mozilla需要加上-moz-，Webkit内核需要加上-webkit-，Presto内核-o-，IE8-ms-）
现在多用此种盒子模型。
b.content-box
这里写图片描述
上图就是一个“box”，详细地解释了padding、margin、border所代表的含义。在此种模型中，盒子模型的宽/高=content的宽/高+padding*2+border*2,因此想要构建出这个盒子，在代码中设置的width/height的值应为content的width/height值。

利用盒子模型的实例：
代码如下：
HTML文件
这里写图片描述

CSS文件

结果如下：

注：可以将本题中的两个背景看作两个盒子嵌套

3.内边距padding，其值可以是：
a.上：padding-top:xpx
b.下：padding-bottom:xpx
c.左：padding-left:xpx
d.右：padding-right:xpx
e.复合样式：如，padding:10px 15px 20px 25px
注：复合样式和单独样式不能同时使用；
传四个值时，分别代表上、右、下、左；
传三个值时，分别代表上、中、下；
传两个值时，分别代表上下、左右；
传一个值时，代表上下左右

4.外边距：margin，其值可以是:
a.上：margin-top:xpx
b.下：margin-bottom:xpx
c.左：margin-left:xpx
d.右：margin-right:xpx
e.复合样式：如，margin:10px 15px 20px 25px
注意事项同上

5.边框border，其值可能为：
a.边框宽度border-width
b.边框样式border-style
c.边框颜色border-color
d.边框样式:
solid 实线
dashed 虚线
dotted 点线
e.边框复合：如，border : 1px #000 solid;

二：默认样式初始化（通常情况下，每个浏览器都会有自己默认的样式，如：margin、padding、字体等。所以我们自己设计网页之前应该将它们都先清除掉）
1.默认样式的检查方式：border+浏览器工具来查看
例如：这里写图片描述
查看的结果：

以及详细信息：
2.清除斜体和加粗等字体：
font-weight:normal;font-style:normal
3.清除块状元素边距：
margin:0;padding:0
4.清除<li>标签的默认样式：
list-style:none
5.清除img引入图片时在IE浏览器下的边框：
border:none

注：在以后的操作中，这些代码片段可能会出现在每一段代码中，为了方便起见，我们可以把它们全写进专门的CSS文件里保存，每次用到时再link进来即可。类似于c和c++里的.h文件。

默认样式初始化的应用实例：清除<a>的默认样式：
a{text-decoration:none; color:#000;border:0;}

a:link{text-decoration:none; color:#000;}
( 有链接属性的时候显示 – href 属性 )

a:hover{text-decoration:none; color:#000;}
( 鼠标移动到DOM节点上面 )

a:visited{text-decoration:none; color:#000;}
( 链接地址被访问过 )

a:active{text-decoration:none; color:#000;}
( 鼠标点击瞬间 )
注：以上内容中，类似于a:hover{}这样的元素叫做伪类，CSS中伪类用于向某些选择器添加特殊的效果。

先要求：创建一个a标签（黑色字体，黄色背景），文字随意，当鼠标移入时，字体变成红色并加粗，背景变成绿色。
代码如下：
这里写图片描述
结果：
链接样式未点击之前：
点击之后变为：

三：常用选择器
1.概念：要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
2.具体介绍：

a.通配选择器：给HTML页面中所有元素增加样式，格式：*{...}；

b.类型选择器（标签/元素选择器）：为页面中同一种标签构成的元素增加样式，如比如 p、h1、em、a，甚至可以是 html 本身：

html {color:black;}h1 {color:blue;}h2 {color:silver;}

注：该种选择器是最基本的选择器。且当几种元素拥有一个或多个共同的属性时，可以结合起来一起书写，中间用空格隔开。如：ul body li{font-style:none}

c.类选择器：概念和意义类似于C++中的类的概念，以名叫box的类选择器为例说明使用格式：.box{...}，用法示例：

<h1 class="important">This heading is very important.</h1>

此时，仅需要对important类进行详细描述即可。注：class的值可以是一个或多个词，有多个词时词之间用空格隔开，如：<h1 class="important weight..."

d.id选择器：以名叫div的id选择器为例说明使用格式：#div{}，用法示例：

<p id="intro">This is a paragraph of introduction.</p>
补充说明：id选择器和class选择器看似相近，实际上在很多方面不同，区别如下:
(1)格式不同，例如，一个是.box{...},一个是#box{...}
(2)id选择器只能在文本中使用一次；而class选择器可以被使用多次，因为不同的标签可能会需要相同的样式
（3）class选择器中可以出现多个词列表，上例中已经提到；而id选择器中只能有一个词出现

e.群组选择器：当几个相同类型的选择器拥有相同的属性时，可以将共同属性合并在群组选择器中一次性书写，减少代码的重复。只是针对前面介绍的单独性的浏览器格式有所区别：
（1）类型选择器，如：ul p li{...};
（2）class选择器，如：.box1,.box2,.box3{...};
（3）id选择器，如：#div1,#div2,#div3{...}；

f.包含选择器：直接举例说明用法：
(1)同一种选择器之间包含使用：

.aaa .bbb{color:red}//修饰aaa下bbb的样式.box .bbb{color:red}//修饰box下bbb的样式

注：这两个bbb不同

（2）不同类型选择器之间包含使用：

.name li{float:left;width:80px;}.name li a{display:block;}div p//修饰div内部的所有p元素的样式div>p//修饰父元素为div的所有p元素的样式

当一些标签嵌套在别的标签中使用，且该标签又单独在使用在别的层次中，此时如想给它添加样式，必须通过包含选择器来唯一确定想要修饰的内容

例：练习：
1、在不改变html代码的情况下做以下操作：
1）分别获取页面中的所有P标签；class为p1的标签；class为p2的标签；class既有p1又有p2的标签
2）分别获取页面中的div标签；class为div1的标签；class为div2的标签；class为div3的标签；class为div3的子元素
3）分别获取div4里的所有标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">p{}.p1{}.p2{}.p1.p2{}div{}.div1{}.div2{}.div3{}.div3>div{}.div4 *{}</style></head><body><p class="p1"></p><p class="p2"></p><p class="p1 p2 p3"></p><div class="div1">    <div class="div2"></div>    <div class="div3">        <div></div>    </div></div><div class="div4">    <p class="p1"></p>    <div class="div2">        <p class="p2"></p>    </div></div></body></html>

更多关于选择器的介绍

3.选择器的优先级
（1）如果选择器优先级一致：后面覆盖前面
（2）类型选择器>通配选择器
（3）class>类型选择器
（4）id>class
（5）行间样式>id
（6）约分包含选择器：如#id .class>#id;
#id .class==.class #id

举例说明选择器的用法：
现要求，分别写一个p标签，一个div标签，一个span标签，再写3个css文件，其中一个用id选择器，一个用class选择器，一个用标签选择器，与上面3个标签一一对应并将这3个外链样式引入页面（修改一下字体颜色即可）
代码如下：
HTML文件：
这里写图片描述
CSS文件：

这里写图片描述

最后的测试结果为：
这里写图片描述

0 0