0基础学前端 day2

大家好，欢迎来到无限大的频道。

今天继续带领大家开始0基础学前端。

一、CSS简介与基础

层叠样式表（CSS，Cascading Style Sheets）是用来进行网页样式和布局设计的语言。通过CSS，开发者可以控制网页中元素的颜色、字体、大小、间距以及布局等视觉效果。CSS让页面不仅仅是信息的载体，还能提升用户的视觉体验和交互感受。

1. CSS的基本语法

CSS由选择器和声明块组成。选择器用于指定要设置样式的HTML元素。声明块包含一个或多个声明，各声明用分号分隔。每个声明包括一个属性和一个值，属性和值用冒号分隔。

选择器 {
    属性: 值;
    属性: 值;
}

例如：

h1 {
    color: blue;
    font-size: 24px;
}

上面的代码将所有的一级标题（`<h1>`）文本颜色设置为蓝色，字体大小设置为24像素。

2. 常见的选择器

- 元素选择器：选中所有该类型的HTML元素，例如`div`、`p`。
- 类选择器：使用` . ` 加类名选中，例如`.my-class`，这需要HTML中相应元素有`class="my-class"`。
- ID选择器：使用` # `加ID名，例如`#my-id`，这需要HTML中相应元素有`id="my-id"`。
- 组合选择器：可以组合多个选择器，应用于需要灵活定义样式的场景。

（关于类选择器和ID选择器的区别，我会再发一篇文章来和大家说明）

3. CSS样式的继承与优先级

CSS样式表中的样式可以从父元素继承给子元素。

例如，设置在`<body>`上的字体颜色会继承给`<p>`等子元素。

的选择器优先级依次为：ID选择器 > 类选择器 > 元素选择器。

此外，在冲突时，后定义的样式会覆盖此前定义的样式。

二、基础CSS布局及样式

在这部分，我们将结合昨天的HTML代码，通过简要的内嵌CSS样式进行页面基础布局，同时展示如何使用外部CSS文件来实现更复杂的样式。

1. 内嵌CSS示例

先在HTML的`<head>`部分中，通过`<style>`标签添加CSS，展示页面布局：

<!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: 0;
            line-height: 1.6;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        h2 {
            color: #555;
        }
        ul {
            list-style-type: none;
        }
        li {
            margin-bottom: 10px;
        }
        a {
            text-decoration: none;
            color: #0066cc;
        }
        footer {
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到我的个人主页</h1>
    </header>

    <main>
        <section>
            <h2>关于我</h2>
            <p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p>
        </section>

        <section>
            <h2>爱好与兴趣</h2>
            <ul>
                <li>编程</li>
                <li>阅读</li>
                <li>旅行</li>
            </ul>
        </section>

        <section>
            <h2>查看我的作品</h2>
            <p>以下是一些我最近完成的项目：</p>
            <ul>
                <li><a href="https://我的项目链接.com">我的第一个项目</a></li>
                <li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li>
            </ul>
        </section>

        <figure>
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真">
            <figcaption>摄影：无限大</figcaption>
        </figure>
    </main>

    <footer>
        <p>联系我：<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>
    </footer>
</body>
</html>

2. 外部CSS示例

在实际开发中，使用外部CSS文件管理样式更为常见。我们将上述内嵌样式移到一个外部文件中，比如styles.css，并在HTML中引入它：‘

我们创立一个名为styles.css的文件

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}
header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
main {
    padding: 20px;
}
h2 {
    color: #555;
}
ul {
    list-style-type: none;
}
li {
    margin-bottom: 10px;
}
a {
    text-decoration: none;
    color: #0066cc;
}
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

HTML文件更新

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header></header>
        <h1>欢迎来到我的个人主页</h1>
    </header>

    <main>
        <section>
            <h2>关于我</h2>
            <p>你好！我是一个前端开发的初学者，正在学习如何创建美观且有用的网页。</p>
        </section>

        <section>
            <h2>爱好与兴趣</h2>
            <ul>
                <li>编程</li>
                <li>阅读</li>
                <li>旅行</li>
            </ul>
        </section>

        <section>
            <h2>查看我的作品</h2>
            <p>以下是一些我最近完成的项目：</p>
            <ul>
                <li><a href="https://我的项目链接.com">我的第一个项目</a></li>
                <li><a href="https://一个有趣的项目.com">一个有趣的项目</a></li>
            </ul>
        </section>

        <figure>
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/4027b724a62b206a73ba495e732af2b.jpg" alt="我的个人写真">
            <figcaption>摄影：无限大</figcaption>
        </figure>
    </main>

    <footer>
        <p>联系我：<a href="https://blog.csdn.net/wxdzuishaui?spm=1010.2135.3001.5343">我的博客</a></p>
    </footer>
</body>
</html>

三、使用HTML和CSS创建精美的页面

接下来，我们创建一个更加精美的页面（还是有点简陋，后面的几天希望我们一起越做越好），介绍NBA球星凯文·杜兰特（Kevin Durant）。

ps：我个人最喜欢篮网杜，我的意难平“凯文杜兰特”，“他投出了一个最长的两分球”

Kevin Durant页面HTML

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凯文·杜兰特</title>
    <link rel="stylesheet" href="kevin.css">
</head>
<body>
    <header>
        <h1>凯文·杜兰特</h1>
    </header>
    <main>
        <section class="image">
            <img src="https://wxdwuxd.oss-cn-beijing.aliyuncs.com/6fa6ec013f49061e5c313827b6099f2.png" alt="凯文·杜兰特">
        </section>
        <section class="bio">
            <h2>简介</h2>
            <p>凯文·杜兰特是NBA著名篮球运动员，司职小前锋，曾多次获得NBA总冠军和MVP。</p>
        </section>
        <section class="achievements">
            <h2>成就</h2>
            <ul>
                <li>两届NBA总冠军</li>
                <li>四届NBA得分王</li>
                <li>两届总决赛MVP</li>
                <li>NBA常规赛MVP</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>© 2024 凯文·杜兰特粉丝页面</p>
    </footer>
</body>
</html>

Kevin Durant页面CSS

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    background-color: #181e25;
    color: #fff;
    text-align: center;
    padding: 20px;
}

main {
    padding: 20px;
    display: flex;
    justify-content: space-between;
}

.image img {
    max-width: 300px;
    border-radius: 10px;
}

.bio, .achievements {
    width: 40%;
}

h1, h2 {
    margin-top: 0;
}

ul {
    list-style-type: square;
}

footer {
    background-color: #181e25;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}