大家好,欢迎来到无限大的频道。
今天继续带领大家开始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%;
}
标签:color,day2,前端,基础,padding,样式,HTML,选择器,CSS
From: https://blog.csdn.net/wxdzuishaui/article/details/142497155