CSS基础入门3

来源：互联网发布：移动光纤网络机房在哪编辑：程序博客网时间：2024/06/05 03:34

1、锚伪类

（1）a:link
代码：

a: link {color: red;font-size: 30px;            }

作用是给a标签设置没有被访问过的样式
（2）a:visited
代码：

a:visited {color: pink;font-size: 40px;            }

作用是给a标签设置访问过的样式
（3）a:hover
代码：

a:hover {color: yellow;font-size: 50px;            }

作用：
给a标签设置鼠标悬停时的样式。
（4）a:active
代码：

a:active{color: green;font-size: 60px;            }

作用是设置a标签被被点击时的样式。

注意：
A.在使用的时候一定遵守这样的顺序：
a:link ,a:visited,a:hover,a:active
记忆：买了一个lv，心里乐哈哈

B.在a标签上还可以作用来其它标签上：
:link 只能用于a标签
:visited只能用于a标签
:hover 其它标签也可以使用这个伪类
:active 其它标签也可以使用这个伪类

2、行高

（1）文本中的几条线

（2）行高
行高=字体高度+文本上间距+文本下间距
上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。

那么为什么行高等于容器的高度，元素在父容器中垂直居中？
因为如果行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满。而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。

3、盒子模型

在写一个html页面的时候，其实就相当于在这个页面中叠盒子，即“万物皆盒子”。
这里写图片描述
即，
盒子的挡板———border
盒子的泡沫———padding
盒子中的物品——–内容content
盒子与盒子之间的距离———margin

（1）border(边框)—盒子的挡板
A. border-color:边框的颜色
border-top-color
border-right-color
border-bottom-color
border-left-color

B. border-width:边框的宽度
border-top-width
border-right-width
border-bottom-width
border-left-width

C. border-style:边框的样式
border-top-style
border-right-style
border-bottom-style
border-left-style

取值：
solid：实线。
dashed：虚线
dotted：点线

边框的连写方法：
border: border-width border-style border-color;

border： 1px   solid   red;

注：

border-collapse: collapse;/*去掉单元格之间的间隙*/

（2）盒子的填充：padding(内边距)
作用：设置盒子的内容与边框之间的距离。
取值：
padding: 40px;
给上右下左所有的内边距都设置了40像素的距离。
padding: 40px 80px;
给上下内边距设置了40像素，左右边距设置了80像素
padding: 40px 60px 80px;
给上边距设置了40像素，给左右设置了60像素，给下设置了80像素。
padding: 40px 60px 80px 100px;
以顺时针方向进行设置，上为40px,右为60像素，下为80像素，右为100像素。
padding-top
padding-right
padding-bottom
padding-left

（3）计算盒子的大小：
注意：padding（盒子中的填充物）会改变盒子的大小（跟日常生活中有区别）
计算盒子大小的公式：
盒子宽：border-left-width + padding-left + width + padding-right + border-right-width
盒子高：border-top-width + padding-top +height + padding-bottom + border-bottom-width

注：特殊情况下padding不会改变盒子的大小
当一个大盒子包含一个小盒子，并且大小盒子都是块级元素，而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left不会改变小盒子的大小。
（4）盒子与盒子之间的距离：margin（外边距）
作用：设置盒子与盒子之间的距离。
取值：
margin: 10px;
给上右下左所有的外边距都设置了10像素的距离。
margin: 10px 20px;
给上下外边距设置了10像素，下左右外边距设置了20像素
margin: 10 px 20px 40px;
给上设置10px外边距，给左右设置20px的外边距，给下设置40px外边距
margin:10px 20px 40px 80px;
给上10，右20，下40，左80

同样也有上右下左，
maring-top
margin-right
margin-bottom
margin-left
注意点：
很多标签默认带有margin和padding，所以将来进行页面的布局的时候一定要清除这些标签的默认的margin和padding.
例如：
1)body标签默认带有margin: 8px的属性
2)p标签默认带有margin: font-size 0;
3)h标签也默认带有margin-top和margin-bottom
4)ul默认带有上下的margin以及左边的padding
……
清除的方法：
* {
margin: 0;
padding: 0;
}
以后我们可以使用css初始化来完成。

案例1，新浪导航：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        * {          margin:0;          padding: 0;        }        .navi {            height: 41px;            background: #FCFCFC;            border-top: 3px solid #FF8500;            border-bottom: 1px solid #EDEEF0;        }        a {          color: #4C4C4C;          text-decoration: none;          font-size: 12px;           /*background: red; */          display: inline-block;          height: 41px;          line-height: 41px;          padding: 0 16px;          /*margin-left: 50px;*/        }        a:hover {            background: #EDEEF0;            color:#FA917F;        }        .one {            margin-left: 131px;        }    </style></head><body>    <div class="navi">           <a href="#" class="one">设为首页</a>        <a href="#">手机新浪网</a>        <a href="#">移动客户端</a>    </div></body></html>

案例二，新浪新闻列表：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        * {            margin:0;            padding:0;        }        .news {            width: 500px;            margin: 0 auto;        }        .news_title {            width: 60px;            height: 30px;            font: 16px "微软雅黑";             border-top: 2px solid #FF8500;            /*background: green;*/            text-align: center;            line-height: 30px;        }        .news_title:hover {            color: #FF8500;        }        ul {            margin-top: 20px;        }        li {            line-height: 30px;            background:  url(dian.gif) no-repeat left center;            padding-left: 12px;            list-style: none; /*去掉li标签前面的那个点*/        }        a {            color: #122E67;            text-decoration: none;            font-size: 14px;        }        a:hover{            color:  #FF8500;            text-decoration:underline;        }    </style></head><body>    <div class="news">        <div class="news_title">新闻</div>        <ul>            <li><a href="#">习近平向全军老同志祝贺新春 报道集 治国理政</a></li>            <li><a href="#">习近平回信勉励库尔班大叔的后人 回信全文</a></li>            <li><a href="#">李克强会见越共中央总书记阮富仲</a></li>            <li><a href="#">张德江会客 俞正声出席活动 政协座谈 王岐山会客</a></li>            <li><a href="#">高铁15元盒饭不再不断供 铁总:有更便宜的 春运专题</a></li>            <li><a href="#">央行：你放在支付账户的钱将集中存管</a></li>            <li><a href="#">中国奥委会发文谴责3名兴奋剂违规运动员</a></li>        </ul>    </div></body></html>

0 0