当前位置：首页 > article >正文

CSS之三

article 2024/12/26 1:13:15

CSS三大特性

CSS 有三个非常重要的三个特性:层圣性、继承性、优先级

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层曼)另一个冲突的样式。层曼性主要解决样式冲突的问题

层叠性原则:

- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

- 样式不冲突，不会层叠

继承性

CSS中的继承: 子标签会继承父标签的某些样式，如文本颜色和字号，简单的理解就是;子承父业，

- 恰当地使用继承可以简化代码，降低C55 样式的复杂性

- 子元素可以继承父元素的样式(text-，font-，line-这些元素开头的可以继承，以及color属性)

行高的继承性

body {
font:12px/1.5 Microsoft YaHei}

- 行高可以跟单位也可以不跟单位

- 如果子元素没有设置行高，则会继承父元素的行高为1.5

- 此时子元系的行高是:当前子元素的文字大小*1.5

优先级

选择器权重如下表所示

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0.0.0.1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=""	1,0,0,0
!important 重要的	”无穷大

优先级注意点:

1.权重是有4组数字组成,但是不会有进位。

2.可以理解为类选择器永远大于元素选择器 id选择器永远大于类选择器,以此类推.

3.等级判断从左向右，如果某一位数值相同，则判断下一位数值。

4.可以简单记忆法: 通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器 100,行内样式表为1000,!immportant无穷大.

5.继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是 0.

盒子模型

盒子模型(Box Model)组成

所谓盒了模型:就是把 HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML元素，它包括:边框、外边距、内边距、和实际内容

边框(border)

border可以设置元素的边框，边框有三部分组成:边框宽度(粗细)边框样式边框颜色

语法:

border :border-width | border-style | border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

注：

solid 实线边框 dashed 虚线边框 dotted 点线边框

示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 200px;
            /* border-width: 5px;
            border-style: solid;
            border-color: pink; */

            /* 复合写法 */
            /* border: 5px solid pink; */
            /* 设置上边框为粉色，其余边框为蓝色 */
            /* 写法一 */
            border-top: 5px solid pink;
            border-bottom: 5px solid blue;
            border-left: 5px solid blue;
            border-right: 5px solid blue;
            /* 写法二 */
            border: 5px solid blue;
            border-top: 5px solid pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

小说排行榜案例修改

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid pink;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <table align="center" width="1000" height="500" cellpadding="20">
        <thead>
            <tr>
                <th>排名</th>
                <th>关键词</th>
                <th>趋势</th>
                <th>今日搜索</th>
                <th>最近七日</th>
                <th>相关链接</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>鬼吹灯</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>盗墓笔记</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>西游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>东游记</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>5</td>
                <td>甄嬛传</td>
                <td><img src="down.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>6</td>
                <td>水浒传</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
            <tr>
                <td>7</td>
                <td>三国演义</td>
                <td><img src="up.jpg"></td>
                <td>456</td>
                <td>123</td>
                <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
            </tr>
        </tbody>
    </table>
</body>

</html>

内边距( padding )

padding属性用于设置内边距，即边框与内容之间的距离

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

值的个数	表达意思
padding: 5px;	1个值，代表上下左右都有5像素内边距;
padding: 5px 10px;	2个值，代表上下内边距是5像素左右内边距是10像素:
padding: 5px 10px 20px;	3个值，代表上内边距5像素左右内边距10像素下内边距20像素;
padding: 5px 10px 20px 30px;	4个值，上是5像素右10像素下20像素左是30像素顺时针

案例之新浪导航栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            height: 41px;
            border-top: 3px solid #ff8500;
            border-bottom: 1px solid #edeef0;
            background-color: #fcfcfc;
            line-height: 41px;
        }

        .nav a {
            display: inline-block;
            height: 41px;
            font-size: 12px;
            color: #4c4c4c;
            text-decoration: none;
            padding: 0 20px;
        }

        .nav a:hover {
            background-color: #eee;
            color: #ff8500;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">新浪导航</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>
        <a href="#">微博</a>
    </div>


</body>

</html>

外边距( margin )

margin 属性用于设置外边距，即控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

外边距可以让块级盒子水平居中，但是必须满足两个条件:

盒子必须指定了宽度(width)。

盒子左右的外边距都设置为 auto，

header{ width:960px;margin:0 aute;}

常见的写法，以下三种都可以:

- margin-left: auto; margin-right: auto;

- margin: auto;

- margin: 0 auto;

注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

嵌套块元素垂直外边距的塌陷

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top，则他们之间的垂声间距不是margin-bottom与margin-top之和。取两个值中的合并之前较大者这种现象被称为相邻块元素垂直外边距的合井。

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案:
- 可以为父元素定义上边框。

- 可以为父元素定义上内边距。

- 可以为父元素添加 overflow:hidden

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要消除下网页元素的内外边距

*{
padding:0;/*清除内边距 */
margin:0;/*清除外边距*/
}

注意:行内元素为了照顾兼容性，尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了

PS 基本操作

因为网页美工大部分效果图都是利用 PS(Photoshop)来做的，所以以后我们大部分切图工作都是在 PS 里面完成.

- 文件→打开:可以打开我们要测量的图片

- Ctr+R:可以打开标尺，或者视图→ 标尺

- 右击标尺，把里面的单位改为像素

- Ctrl+ 加号(+)可以放大视图，Ctr+减号(-)可以缩小视图

- 按住空格键，鼠标可以变成小手，拖动PS视图

- 用选区拖动可以测量大小

- Ctrl+D 可以取消选区，或者在旁边空白处点击一下也可以取消选区

综合案例五之产品模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #f5f5f5;
        }

        .box {
            width: 298px;
            height: 415px;
            background-color: #fff;
            margin: 100px auto;
        }

        .box img {
            width: 100%;
        }

        .review {
            height: 70px;
            font-size: 14px;
            padding: 0 28px;
            margin-top: 30px;
        }

        .appraise {
            color: #b0b0b0;
            margin-top: 10px;
            padding: 0 28px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            font-weight: 400;
            display: inline-block;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .info em {
            font-style: normal;
            color: #ebe4e0;
            margin: 0 6px 0 15px;
        }

        .info span {
            color: #ff6700;
        }
    </style>
</head>

<body>
    <div class="box">
        <a href="#"><img src="images/img.jpg" alt="woman" title="woman"></a>
        <a href="#">
            <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
        </a>
        <div class="appraise">来自于 117384232 的评价</div>
        <div class="info">
            <h4><a href="#">Redmi AirDots真无线蓝...</a></h4>
            <em>|</em>
            <span>99.9元</span>
        </div>
    </div>
</body>

</html>

综合案例六之快报模块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: #f5f5f5;
        }

        a {
            font-size: 12px;
            text-decoration: none;
            color: black;
        }

        li {
            list-style: none;
        }

        .box {
            height: 163px;
            width: 250px;
            background-color: #fff;
            margin: 100px auto;
        }


        .title h3 {
            font-size: 12px;
            font-weight: 400;
            height: 30px;
            border-bottom: 2px dotted #c3bcbc;
            padding-left: 16px;
            text-decoration: none;
            line-height: 30px;
        }

        .box ul li {
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }

        .box ul li a:hover {
            text-decoration: underline;
        }

        .box ul {
            margin-top: 7px;
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="title">
            <h3>品有购快报</h3>
        </div>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折!</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒!</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片!</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>

</html>