Web前端（二）CSS层叠样式表

最新推荐文章于 2021-05-10 12:06:10 发布

Sunshine

最新推荐文章于 2021-05-10 12:06:10 发布

阅读量483

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/cainiaoayue/article/details/97959904

Web前端专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解CSS的基本概念，包括层叠样式表的介绍、优势及基本语法。探讨了内联式、嵌入式和外联式的页面引入方法，详细介绍了文本设置、颜色表示法等常用样式。此外，还解析了标签、ID、类、层级、组和伪类选择器的使用技巧，以及盒子模型和浮动原理，并通过QQ邮箱界面案例展示了CSS的实际应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.CSS介绍

1.CSS介绍

CSS 指层叠样式表 (Cascading Style Sheets)定义如何显示控制 HTML元素，从而实现美化HTML网页。

2.CSS优势

为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。

二.基本语法

1.基本语法

格式：选择器{属性：值，；属性：值；…}
在这里插入图片描述

2.CSS页面引入方法

（1）引入方法一-内联式

内联式:通过标签的style属性,在标签上直接写样式。
在这里插入图片描述

（2）引入方法二-嵌入式

嵌入式:通过style标签,在网页上创建嵌入的样式表。
在这里插入图片描述

（3）引入方法三-外联式

外联式:通过link标签,链接到外部样式表到页面中。
在这里插入图片描述

三.常用CSS样式

1.文本设置

color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写:font:是否加粗字号/行高字体;如: font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高,如:line-height:24px;
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中

2.CSS颜色表示法

css颜色值主要有三种表示方法:
1、颜色名表示,比如:red 红色,gold 金色
2、rgb表示,比如:rgb(255,0,0)表示红色
3、16进制数值表示,比如:#ff0000 表示红色,这种可以简写成 #f00

四.基本选择器

1.标签选择器

标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。
在这里插入图片描述

2.id选择器

id选择器：通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。
在这里插入图片描述

3.类选择器

类选择器：通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。
在这里插入图片描述

4.层级选择器

层级选择器：主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,同时也可以通过层级,防止命名冲突。
在这里插入图片描述

5.组选择器

组选择器：多个选择器,如果有同样的样式设置,可以使用组选择器。
在这里插入图片描述

6.伪类及伪元素选择器

伪类及伪元素选择器：常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
在这里插入图片描述

五.盒子模型

1.盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
在这里插入图片描述

Mrgin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

总元素的宽度=宽度+左填充+右填充+左边框 +右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框 +下边框+上边距+下边距

六.CSS浮动

1.什么是CSS Float（浮动）？

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。
在这里插入图片描述

2.元素怎样浮动？

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动，下面的文本流将环绕在它左边。

七.应用案例-CSS实现QQ邮箱界面

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登陆qq邮箱</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .header{
            background: #eff4fa;
            height: 62px;
            border: 1px solid #d6dfea;
            line-height: 60px;
        }
        .header img{
            width: 200px;
            height: 56px;
            margin-left: 20px;
        }
        .header li{
            display: inline-block;
            width: 100px;
            height: 40px;
            text-align: right;
            color: #1d5494;
        }
        .header a{
            text-decoration: none;
        }
        .login-text{
            float: left;
            margin-top: 40px;
            margin-left: 70px;
            line-height: 200%;
        }
        .login-text p{
            font-size: 13px;
        }
        .login_pictures{
            height: 360px;
            width: 320px;
            margin-top: 25px;
            margin-right: 60px;
            float: left;
        }
         .login{
            float: left;
            width: 336px;
            height: 389px;
            margin-left: 50px;
            border: 1px solid #a0b1c4;
        }
         .login .option{
             border-bottom: 1px solid #1d5494;
             height: 50px;
             line-height: 50px;
         }
         .option li{
             display: inline-block;
             color:gray;
             height: 50px;
             font-size: 16px;
             list-style-type: none;
         }


        .footer{
            height: 37px;
            line-height: 37px;
            text-align: center;
            background: #eff4fa;
            border-top:1px solid #d6dfea;
            clear: both;
        }
        .footer li{
            display: inline-block;
        }
        .footer li a{
            text-decoration: none;
        }

    </style>
</head>
<body>
<div class="header">
    <ul>
        <img src="./img/tubiao.jpg">
        <li><a href="#">基本版</a></li> |
        <li><a href="#">English</a></li> |
        <li><a href="#">手机版</a></li> |
        <li><a href="#">企业邮箱</a></li>
    </ul>
</div>
<div class="login-text">
    <h1 style="line-height: 26px; font-size: 24px; color: #6f95c8; margin-top: 15px; margin-bottom: 15px;">QQ邮箱，常联系！</h1>
    <p>1978年9月14日21时07分</p>
    <p>中国第一封电子邮件</p>
    <p>从北京发往德国</p>
    <p>“越过长城，走向世界”</p>
</div>
<div class="login_pictures">
    <img src="./img/login-picture.jpg" width="420" height="400">

</div>


<div class="login">
    <ul class="option">
        <li style="float: left; margin-left: 45px;">微信登录</li>
        <li style="float: right; margin-right:45px;">QQ登陆</li>
    </ul>
    <input type="text" placeholder="&nbsp;&nbsp;支持QQ号/邮箱/手机号登录" class="acount" /><br>
    <input type="password" placeholder="&nbsp;&nbsp;QQ密码" class="password" /><br>
    <input type="checkbox" class="checkbox" />
    <p>下次自动登录</p><br>
    <input type="submit" value="登&nbsp;录" class="submit">
    <nav>
        <a href="#" class="forget">忘了密码？</a>
        <a href="#" class="new">注册新账号</a>
    </nav>
</div>
<div>
    <ul class="footer">
        <li><a href="#">关于腾讯</a></li> |
        <li><a href="#">服务条款</a></li> |
        <li><a href="#">隐私政策</a></li> |
        <li><a href="#">客服中心</a></li> |
        <li><a href="#">联系我们</a></li> |
        <li><a href="#">帮助中心</a></li> |
        <li><a href="#">1998 - 2019 Tencent Inc. All Rights Reserved.</a></li>
    </ul>
</div>

</body>
</html>

在这里插入图片描述