为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 CSS样式学习：从入门到初步掌握

CSS样式学习：从入门到初步掌握

标签：
Html/CSS CSS3
概述

CSS样式学习涵盖了基础概念、语法、选择器、文本和背景样式，以及常见布局技巧和实战练习等内容，帮助读者全面掌握CSS的使用方法。文章详细介绍了CSS的选择器类型、声明结构、文本与背景样式的应用，以及布局技巧如浮动、清除和Flex布局。此外，还讲解了CSS样式表的引入方式和边框、表格样式等常用属性。通过实际案例和练习，读者可以更好地理解和应用所学的CSS知识。

CSS基础概念与语法入门

什么是CSS

CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG）文档样式的计算机语言。它允许网页设计师和开发者独立于内容来控制文档的视觉呈现，例如字体、颜色、布局等。CSS的核心目的是提供一个简单且功能强大的方法来控制网页的外观和布局，提高网页的易读性和美观度。

CSS的基本语法

CSS的基本语法由选择器和声明组成。选择器用于指定文档中要应用样式的HTML元素，而声明则用于定义具体的样式规则。每个声明由一个属性和一个值组成。

选择器

  • 元素选择器：根据元素名称选择。例如，p {} 会应用于所有的 <p> 元素。
  • 类选择器：通过类名选择元素。例如，.myClass {} 会应用于所有带有 class="myClass" 的元素。
  • ID选择器：通过ID选择元素。例如，#myId {} 会应用于带有 id="myId" 的元素。
  • 属性选择器：根据元素属性选择。例如，input[type="text"] {} 会应用于所有 type="text" 的 <input> 元素。
  • 伪类选择器：:hover 选择鼠标悬停在元素上的状态。
  • 伪元素选择器：:before 和 :after 选择元素的伪元素。

声明
每个声明由属性和值组成，格式为：属性: 值;

CSS选择器详解

CSS选择器分为简单选择器和复合选择器两大类。简单选择器包括元素选择器、类选择器、ID选择器、属性选择器、伪类选择器等；复合选择器则可以结合多个简单选择器，以更精确地选取元素。

简单选择器

  • 元素选择器：p {} 选择所有 <p> 元素。
  • 类选择器：.myClass {} 选择所有带有 class="myClass" 的元素。
  • ID选择器：#myId {} 选择带有 id="myId" 的元素。
  • 伪类选择器：:hover 选择鼠标悬停在元素上的状态。
  • 伪元素选择器：:before 和 :after 选择元素的伪元素。

复合选择器

  • 子选择器：ul > li {} 选择 <ul> 元素的直接子元素 <li>。
  • 后代选择器：div p {} 选择 <div> 元素中的所有 <p> 元素，无论它们是否是直接子元素。
  • 相邻兄弟选择器：h1 + p {} 选择紧接在 <h1> 元素后面的 <p> 元素。
  • 通用兄弟选择器：h1 ~ p {} 选择紧跟在 <h1> 元素后面的 <p> 元素。

CSS样式应用基础

文本样式

CSS提供了丰富的文本样式属性，使开发者能够精确控制文本的外观。

  • 字体属性
    • font-family：定义字体系列。
    • font-size：定义字体大小。
    • font-weight：定义字体粗细。
    • font-style：定义字体样式（如斜体）。
p {
    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
}
  • 颜色属性
    • color：定义文本颜色。
    • background-color：定义文本背景颜色。
p {
    color: #333;
    background-color: #eee;
}
  • 文本对齐
    • text-align：定义文本对齐方式（左、右、居中）。
p {
    text-align: center;
}
  • 行高和间距
    • line-height：定义行间距。
    • letter-spacing：定义字符间距。
    • word-spacing：定义单词间距。
p {
    line-height: 1.5;
    letter-spacing: 1px;
    word-spacing: 2px;
}

背景样式

背景样式可以用来美化页面背景，增加页面的视觉效果。

  • 背景颜色
    • background-color：定义背景颜色。
body {
    background-color: #fff;
}
  • 背景图片
    • background-image：定义背景图片。
    • background-repeat：定义背景图片的重复方式。
    • background-attachment：定义背景图片是否随页面滚动。
    • background-position：定义背景图片的位置。
body {
    background-image: url(images/background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

常见布局技巧

浮动与清除

浮动（float）和清除（clear）是CSS布局中常用的特性，用于调整元素的显示位置。

  • 浮动属性
    • float：定义元素向左或向右浮动。
img {
    float: left;
}
  • 清除浮动
    • clear：定义元素的浮动情况。
.clearfix {
    clear: both;
}

使用Flex布局

Flex布局是一种更现代、更灵活的布局方式，适用于任何类型的一维布局。它允许开发者更轻松地控制元素的排列和对齐方式。

  • 基本语法
    • display: flex;：定义容器为Flex容器。
    • justify-content：定义主轴上的对齐方式。
    • align-items：定义侧轴上的对齐方式。
    • flex-direction：定义主轴的方向。
    • flex-wrap：定义是否允许项目换行。
    • flex-grow：定义项目的拉伸比例。
    • flex-shrink：定义项目的收缩比例。
    • flex-basis：定义项目的初始大小。
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

样式表的引入方式

CSS样式表可以通过三种方式引入到HTML文档中：内联样式、内部样式表和外部样式表。

  • 内联样式
    • style 属性直接定义在HTML元素上。
<div style="color: red; font-size: 20px;">内联样式</div>
  • 内部样式表
    • 定义在HTML文档的 <head> 部分的 <style> 标签内。
<head>
    <style>
        body {
            background-color: #fff;
        }
        h1 {
            color: #000;
        }
    </style>
</head>
  • 外部样式表
    • 定义在单独的CSS文件中，通过 <link> 标签引入到HTML文档中。
<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS常用属性详解

边框属性

边框属性用于定义HTML元素的边框样式。

  • 边框宽度
    • border-width：定义边框宽度。
div {
    border-width: 1px;
}
  • 边框样式
    • border-style：定义边框样式（如 solid, dotted, dashed）。
div {
    border-style: solid;
}
  • 边框颜色
    • border-color：定义边框颜色。
div {
    border-color: #000;
}
  • 综合边框
    • border：综合定义边框（宽度、样式、颜色）。
div {
    border: 1px solid #000;
}

表格样式

表格样式用于美化和布局表格元素。

  • 边框
    • border-collapse：定义表格边框是否合并（collapse）或分离（separate）。
table {
    border-collapse: collapse;
}
  • 单元格边距
    • border-spacing：定义单元格之间的边距。
table {
    border-spacing: 10px;
}
  • 行高
    • height：定义表格行的高度。
table tr {
    height: 30px;
}
  • 单元格对齐
    • text-align：定义单元格内的文本对齐方式。
    • vertical-align：定义单元格内内容的垂直对齐方式。
table td {
    text-align: center;
    vertical-align: middle;
}

实战练习与常见问题解答

CSS样式常见问题

在使用CSS时，经常会遇到一些常见问题，如样式冲突、选择器优先级等。

  • 样式冲突
    • 内联样式优先级高于内部样式表，内部样式表又高于外部样式表。
    • 使用 !important 关键字可以提高样式优先级。
/* 内联样式 */
<div style="color: red !important;">内联样式</div>

/* 内部样式表优先级高于外部样式表 */
<style>
    .myClass {
        color: green !important;
    }
</style>

/* 外部样式表 */
<link rel="stylesheet" href="styles.css">
  • 选择器优先级
    • 标签选择器 < 类选择器 < ID选择器。
    • 更多选择器组合可以提高优先级。
/* 示例 */
#mainNav > .nav-item a {
    color: #fff;
}

.nav-item a {
    color: #000;
}

a {
    color: #333;
}

小项目实战练习

为了更好地掌握CSS，可以尝试以下几个小项目练习：

  • 练习1：设计一个简单的个人博客主页

    使用基本的文本样式（字体、颜色、背景等）。
    使用Flex布局实现页面布局（如导航栏、正文内容、侧边栏等）。

    示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #eee;
        }

        .container {
            width: 80%;
            margin: auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .header, .footer {
            background-color: #333;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
        }

        .header h1 {
            margin: 0;
            font-size: 24px;
        }

        .nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #ddd;
            padding: 10px;
        }

        .nav a {
            text-decoration: none;
            color: #333;
            margin: 0 10px;
        }

        .content {
            padding: 20px;
        }

        .post {
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }

        .post h2 {
            margin: 0 0 10px;
            font-size: 20px;
        }

        .post p {
            margin: 0 0 10px;
            line-height: 1.5;
        }

        .footer {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>个人博客主页</h1>
            <div class="nav">
                <a href="#">首页</a>
                <a href="#">文章</a>
                <a href="#">关于</a>
            </div>
        </div>
        <div class="content">
            <div class="post">
                <h2>我的第一篇文章</h2>
                <p>这是我的第一篇文章，欢迎大家阅读。</p>
            </div>
            <div class="post">
                <h2>我的第二篇文章</h2>
                <p>这是我的第二篇文章，欢迎大家阅读。</p>
            </div>
        </div>
        <div class="footer">
            <p>&copy; 2023 个人博客主页</p>
        </div>
    </div>
</body>
</html>

  • 练习2：设计一个简单的电子商务产品页面

    使用Flex布局布局产品信息（如图片、价格、描述等）。
    使用表格布局展示产品属性（如尺寸、颜色等）。

    示例代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电子商务产品页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #eee;
        }

        .product {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .product img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }

        .product-info {
            flex: 1;
            margin-left: 20px;
        }

        .product-info h2 {
            margin: 0 0 10px;
            font-size: 24px;
        }

        .product-info p {
            margin: 0 0 10px;
            line-height: 1.5;
        }

        .product-info .price {
            color: #e74c3c;
            font-weight: bold;
        }

        .product-info .attributes {
            display: table;
            width: 100%;
            border-collapse: collapse;
        }

        .product-info .attributes tr {
            border-bottom: 1px solid #ddd;
        }

        .product-info .attributes td {
            padding: 5px 10px;
            text-align: left;
        }

        .product-info .attributes td:first-child {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="product">
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="product.jpg" alt="产品图片">
        <div class="product-info">
            <h2>产品名称</h2>
            <p>产品描述</p>
            <div class="price">￥120.00</div>
            <table class="attributes">
                <tr>
                    <td>尺寸</td>
                    <td>XL</td>
                </tr>
                <tr>
                    <td>颜色</td>
                    <td>黑色</td>
                </tr>
                <tr>
                    <td>材质</td>
                    <td>纯棉</td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
点击查看更多内容
发表于 2024.11.11 15:01， 共 171 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

喵喔喔

手记
篇
粉丝
103
获赞与收藏
606

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消