文章目录
跟着大佬学前端之CSS
前言
学习目标
- 了解 CSS 概念
- 学习 CSS 选择器并会使用
- 学习 CSS 布局
1. CSS 概念
1.1 CSS是什么
CSS是层叠样式表。从功能上简单理解,HTML可看作是网页的骨架,CSS则对网页进行布局和美化。
CSS本质不会对逻辑产生影响,但部分样式可能会造成布局或图标的变动,与交互有一定的关系。
1.2 CSS主要形式
CSS 主要由三种方式实现:
- 内联样式
内联样式是在具体HTML标签内,通过style属性设置,如:
<div style="color: red">红色段落</div>
- 内部样式
内部样式的位置在html的head标签里,在style标签内设置。
<head>
<meta charset="UTF-8">
<title>三种引入方式</title>
<style>
#d1{
color: green;
}
</style>
</head>
<body>
<h1 id = "d1">内部样式,绿色标题</h1>
</body>
- 外部样式
外部样式即将各种样式写在一个CSS文件中,在head中引入。
<link rel="stylesheet" href="myCSS.css">
为了便于学习与文件管理,本文的示例采取外部样式的引入方式。跟练的读者具体CSS文件请自行命名。
1.3 CSS语法
css的语法
selector {property: value}
即 选择器{属性:值}
2. 选择器
CSS 选择器是 CSS 语法的重要组成部分,目的是以什么样的规则选择什么样的元素。
选择器也有分类,例如 id选择器、元素选择器、类选择器、伪类选择器等等非常多种类的选择器。不同的选择器有不同的作用范围与代码复用结果,选择器手册可参考:
菜鸟教程-选择器手册
篇幅有限,以下介绍我们入门建议学的以及常见和常用的选择器。
2.1 元素选择器
元素选择器的选择器名就是标签名。元素选择器的作用域是整个html中对应的所有标签。
元素选择器示例
此处我们用元素选择器将strong标签以及em标签的元素颜色变换一下:
strong {
color: red;
}
em {
color: blue;
}
2.2 id选择器
元素选择器的选择范围是全部对应标签。实际开发中,我们会想让某个元素有特定的样式。此时我们可以选用id选择器。
示例
例如,这里是删除线的html demo,让删除线的元素里的文本有不同的大小:
<body>
<!-- del -->
<del id="d1">This text has been deleted.</del>
<br/>
<!-- del -->
<del id="d2">This text has been deleted.</del>
<br/>
<!-- del -->
<del id="d1">This text has been deleted.</del>
<br/>
<!-- del -->
<del id="d3">This text has been deleted.</del>
<br/>
</body>
#d1{
font-size: 30px;
}
#d2{
font-size: 50%;
}
#d3{
font-size: 3em;
}
2.3 类选择器
当需要多个元素,都使用同样的css的时候,就会使用类选择器。
示例
我们将上述一个p标签的字体改成按既定大小
<body>
<p class="font-size-16">This is an image ,didn't find, display alt
</p>
</body>
.font-size-16{
font-size: 20px;
}
2.4 伪类选择器
伪类表示同一个标签,根据不同状态显示不同样式。
示例
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
建议
伪类选择器细分还分为静态伪类与动态伪类,状态也可能更多。篇幅有限,请读者自行查阅。
3. 常见样式
CSS(层叠样式表)是前端开发中不可或缺的一部分,它为网页提供了丰富的样式和布局选项。在本节中,我们将介绍常见的 CSS 样式,包括尺寸、背景、文本、字体、鼠标样式和边框。
3.1 尺寸
在网页设计中,元素的尺寸是至关重要的。通过 CSS,我们可以控制元素的宽度、高度以及内外边距等,从而实现精准的布局和视觉效果。以下是一些常见的尺寸相关属性:
width
:设置元素的宽度。height
:设置元素的高度。max-width
:设置元素的最大宽度。max-height
:设置元素的最大高度。min-width
:设置元素的最小宽度。min-height
:设置元素的最小高度。
示例代码:
.square {
width: 100px;
height: 100px;
}
.rectangle {
width: 200px;
height: 100px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}
3.2 背景
背景在网页设计中扮演着重要角色,它可以为页面增添色彩和质感,提升用户体验。CSS 提供了丰富的背景样式设置,包括:
background-color
:设置元素的背景颜色。background-image
:设置元素的背景图片。background-size
:设置背景图片的大小。background-repeat
:设置背景图片的重复方式。background-position
:设置背景图片的起始位置。
.element {
background-color: #f0f0f0; /* 浅灰色背景 */
}
.another-element {
background-image: url('background.jpg'); /* 设置背景图片 */
background-size: cover; /* 背景图片将被缩放并完全覆盖元素 */
}
3.3 文本
文本样式的设置可以使网页内容更加清晰、易读,并且具有视觉吸引力。在 CSS 中,我们可以控制文本的字体、大小、颜色等属性,常见的文本样式包括:
font-family
:设置文本的字体。font-size
:设置文本的大小。font-weight
:设置文本的粗细。color
:设置文本的颜色。text-align
:设置文本的水平对齐方式。line-height
:设置文本行高。
.text {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
color: #333;
text-align: center;
line-height: 1.5;
}
3.4 字体
字体样式的设置可以进一步提升网页的视觉效果和用户体验。在 CSS 中,我们可以选择合适的字体,并通过调整字体的大小、粗细等属性来实现自定义的字体样式。常见的字体样式属性包括:
font-family
:设置字体系列。font-size
:设置字体大小。font-weight
:设置字体粗细。font-style
:设置字体风格(斜体、倾斜等)。text-decoration
:设置文本装饰效果(下划线、删除线等)。
.heading {
font-family: 'Roboto', sans-serif;
font-size: 24px;
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
3.5 鼠标样式
鼠标样式的设置可以增强网页的交互性和用户体验。通过 CSS,我们可以改变鼠标指针在不同状态下的样式,例如正常状态、悬停状态、点击状态等。常见的鼠标样式属性包括:
cursor
:设置鼠标指针的样式。hover
:设置鼠标悬停在元素上时的样式。
.button {
cursor: pointer;
}
.link {
cursor: pointer;
}
.link:hover {
text-decoration: underline;
}
3.6 边框
边框样式的设置可以使元素在视觉上更加突出,同时也可以用来分隔不同区域或装饰元素。在 CSS 中,我们可以控制边框的样式、颜色、宽度等属性,常见的边框样式包括:
border-style
:设置边框样式。border-color
:设置边框颜色。border-width
:设置边框宽度。border-radius
:设置边框圆角。
.box {
border-style: solid;
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
}
4. 盒子模型
盒子模型是 CSS 中用来布局和定位元素的重要概念。每个 HTML 元素都被视为一个矩形的盒子,包括内容、内边距、边框和外边距。了解盒子模型的工作原理对于控制元素的大小、位置和间距非常重要。
4.1 概念
盒子模型的概念是指 HTML 元素被表示为一个矩形的盒子,它由四个部分组成:内容区域、内边距、边框和外边距。这些部分可以分别用 CSS 属性进行控制,从而实现灵活的布局和样式设置。
4.2 内外边距
在盒子模型中,内边距和外边距是两个重要的属性,它们可以用来控制元素与其他元素之间的间距和布局。以下是内外边距的介绍:
- 内边距(padding):内边距是指内容区域与边框之间的距离,它可以通过 CSS 的
padding
属性进行设置。内边距可以用来调整元素内容与边框之间的间距,从而影响元素的大小和布局。
示例代码:
.box {
padding: 20px; /* 设置内边距为 20 像素 */
}
.inner {
padding-top: 10px; /* 设置顶部内边距为 10 像素 */
padding-right: 15px; /* 设置右侧内边距为 15 像素 */
padding-bottom: 10px; /* 设置底部内边距为 10 像素 */
padding-left: 15px; /* 设置左侧内边距为 15 像素 */
}
- 外边距(margin):外边距是指元素与相邻元素之间的距离,它可以通过 CSS 的 margin 属性进行设置。外边距可以用来控制元素与其周围元素之间的间距,从而影响页面布局和元素的排列方式。
示例代码:
.box {
margin: 20px; /* 设置外边距为 20 像素 */
}
.outer {
margin-top: 10px; /* 设置顶部外边距为 10 像素 */
margin-right: 15px; /* 设置右侧外边距为 15 像素 */
margin-bottom: 10px; /* 设置底部外边距为 10 像素 */
margin-left: 15px; /* 设置左侧外边距为 15 像素 */
}
4.3 浏览器默认边距
由于历史原因,以及浏览器厂商约定俗成的关系,一般浏览器都会给我们设定默认边距。
为了不让默认边距影响我们的页面,我们一般会在样式设置开头将浏览器给我们的默认值重新设置为0,例如:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
其中,上述box-sizing: border-box;
是在设置长宽比例时,让具体效果比例尽量不要出屏(感觉这句解释了半天都没解释清楚,见谅,作为后端猿,目标仅仅是会用,具体效果通过动手体验)
5. 布局
布局是网页设计中至关重要的一部分,它决定了页面上各个元素的位置和排列方式。在 CSS 中,有多种布局方式可供选择,包括定位、浮动等。本节将介绍常见的布局技术及其应用。
5.1 定位
定位是一种常用的布局技术,它允许我们精确地控制元素在页面中的位置。在 CSS 中,有三种常见的定位方式:相对定位(relative)、绝对定位(absolute)和固定定位(fixed)。通过这些定位方式,我们可以实现元素的层叠效果、悬浮效果以及其他特殊布局需求。
示例代码:
.relative {
position: relative; /* 设置相对定位 */
left: 20px; /* 元素相对于原始位置向右偏移 20 像素 */
top: 10px; /* 元素相对于原始位置向下偏移 10 像素 */
}
.absolute {
position: absolute; /* 设置绝对定位 */
right: 0; /* 元素相对于父元素的右侧对齐 */
bottom: 0; /* 元素相对于父元素的底部对齐 */
}
.fixed {
position: fixed; /* 设置固定定位 */
top: 0; /* 元素固定在页面顶部 */
left: 0; /* 元素固定在页面左侧 */
}
5.2 浮动
浮动是一种常见的布局技术,它允许元素在页面上左右移动,直到碰到父容器或其他浮动元素为止。浮动常用于创建多列布局或实现图片与文本的环绕效果。在 CSS 中,我们可以通过 float 属性来设置元素的浮动方式,通常取值为 left 或 right。
示例代码:
.float-left {
float: left; /* 元素向左浮动 */
}
.float-right {
float: right; /* 元素向右浮动 */
}
.clearfix::after {
content: "";
display: table;
clear: both; /* 清除浮动,确保父元素包裹浮动元素 */
}
6. 总结
本文我们学习了CSS。为了提高码字效率,从第3节开始,大部分内容我列了个大纲给GPT生成,校验后再发布。若读者发现其中的纰漏,欢迎评论区留言,第一时间改正!