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%;
}原文地址：https://blog.csdn.net/wxdzuishaui/article/details/142497155
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！