一、CSS介绍:
CSS(Cascading Style Sheets)是一种用于描述网页外观的样式表语言。它可以控制网页的布局、颜色、字体、大小、间距等各种样式,使网页更加美观和易于阅读。
二、CSS 的基本语法
1.选择器(Selector):
- 元素选择器:通过元素名称选择,例如:
p
选择所有的<p>
段落元素。 - 类选择器:以
.
开头,后跟类名,例如 :my-class
选择具有class="my-class"
的元素。 - ID 选择器:以
#
开头,后跟 ID 名称,例如 :#my-id
选择具有id="my-id"
的唯一元素。
2.属性(Property):
- 常见的属性包括
color
(文本颜色)、font-size
(字体大小)、background-color
(背景颜色)等。
3.值(Value):
- 为属性指定具体的值,例如 :
color: red;
表示将文本颜色设置为红色。
列举一些常用的选择器:
示例:
p {
color: blue;
font-size: 16px;
}
.my-class {
background-color: yellow;
}
#my-id {
font-weight: bold;
}
三、CSS 的引入方式
1.内联样式(Inline Styles):
直接在 HTML 元素中使用 style
属性添加样式,例如:
<p style="color: green;">这是一个段落</p>
2.内部样式表(Internal Style Sheets):
在 HTML 文件的 <style>
标签中定义样式,例如:
<head>
<style>
p {
font-family: Arial;
}
</style>
</head>
3.外部样式表(External Style Sheets):
将 CSS 代码保存为独立的 .css
文件,然后在 HTML 文件中通过 <link>
标签引入
例如:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
四、盒模型(Box Model):
1.什么是盒模型?
盒子模型是 CSS 中一个重要的概念,页面上的每个元素都可被看作是一个矩形的盒子。这个盒子由内容区域(content)、内边距区域(padding)、边框区域(border)和外边距区域(margin)构成。
2.元素盒子大小的计算:
1.一个元素的实际宽度 = 左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
2.如果盒子里面嵌套有盒子,且两个盒子都有边框,那么两个盒子边框之间的距离等于外面盒子的填充(padding)值+里面盒子的边界(margin)值。
3.内容区(Content):
实际显示的文本、图像等内容。
4.内边距(Padding):
内边距用于控制内容与边框之间的距离。属性名是 padding,可以当作复合属性来使用,给单独的方向设置内边距,最多取 4 个值(上右下左,顺时针顺序)。
取值个数与效果的对应关系如下:
- 1 个值:给上下左右同时设置相同的内边距。
- 4 个值:分别对应盒子的上右下左内边距。
- 3 个值:第一个值表示上内边距,中间的数值表示左右内边距,最后一个值表示下内边距。
- 2 个值:第一个值表示上下内边距,第二个值表示左右内边距。
3.边框(Border):
- 边框可以设置宽度、颜色和样式,分别对应属性 border-width(宽度)、border-color(颜色)和 border-style(样式)。
- 其中 border-style 属性可将边框设置为:实线(solid)、虚线(dashed)、点划线(dotted)、双线(double)等效果。
- 连写形式:
border: 10px solid red;
(10px 为边框粗细,solid 为边框样式,red 为边框颜色)。 - 单方向设置:如
border-top: 1px solid skyblue;
表示只设置顶部边框。
4.外边距(Margin):
外边距和内边距的写法类似,也可以给四个方向设置外边距,或单独给某个方向设置外边距。
需要注意外边距的两种现象:
- 合并现象:垂直布局的块级元素,上下的 margin 会合并,最终两者距离为 margin 的最大值。解决方法是避免这种情况,只给其中一个盒子设置 margin。
- 塌陷现象:互相嵌套的块级元素,子元素的 margin-top 会作用在父元素上面。
示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子模型</title>
<style>
/* 清除标签默认的内外边距 */
* {
margin: 0;
padding: 0;
}
div {
width: 600px;
height: 600px;
background-color: pink;
box-sizing: border-box;
/* 自动内减 */
border: 1px solid skyblue;
padding: 20px;
/* 上下左右的内边距均为 20px */
margin: 0 auto;
/* 版心居中代码 */
margin-top: 20px;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<div>div div div
<ul>
啦啦啦
<li>哈哈哈</li>
<li>嘿嘿嘿</li>
<li>嘻嘻嘻</li>
</ul>
</div>
</body>
</html>
在上述代码中:
- 使用
*
清除了所有标签的默认内外边距。 div
元素设置了宽度、高度、背景色、边框、内边距和外边距。- 通过
box-sizing: border-box;
实现了自动内减,避免盒子被边框和内边距撑大。 margin: 0 auto;
使div
在水平方向上居中,margin-top: 20px;
则设置了顶部外边距。ul
元素通过list-style: none;
去掉了列表前的符号。
五、布局
1.浮动(Float):
- 浮动是使元素沿着其容器边缘移动的布局方式。
- 使用
float
属性实现,如float:left;
向左浮动,float:right;
向右浮动
示例:
.left {
float: left;
width: 50%;
}
.right {
float: right;
width: 50%;
}
2.浮动的重要性:
可用于将文本环绕在图片周围,或创建多列布局等。
3.浮动带来的问题:
父元素塌陷:子元素浮动导致父元素高度无法自适应子元素内容。
元素重叠:多个浮动元素可能会相互重叠。
4.清除浮动的方法:
方法 1:使用clear
属性,如clear:left;
清除左浮动,clear:right;
清除右浮动, clear:both;
清除左右浮动。
方法 2:添加空的 div 并设置clear
属性。
方法 3:使用父元素的overflow
属性等。
5.定位(Position):
更高级的布局方式,可精确控制元素位置。通过position
属性设置定位类型,常用属性值有:
static
(默认值):元素按照正常文档流排列。relative
:相对自身原来的位置进行偏移。absolute
:相对于最近的已定位祖先元素进行定位。fixed
:相对于浏览器窗口进行定位。
示例:
.relative {
position: relative;
top: 20px;
left: 20px;
}
.absolute {
position: absolute;
top: 50px;
right: 50px;
}
.fixed {
position: fixed;
bottom: 10px;
right: 10px;
}
6.静态定位(static)
- 默认方式,元素按照正常文档流布局。
7.相对定位(relative)
- 相对于其原文档流的位置进行定位。
- 只添加
relative
值对元素本身无影响,需通过定位属性改变位置,但其在文档流中的位置仍保留。
8.绝对定位(absolute)
- 相对于其上一个已定位(相对、绝对或固定定位)的父元素进行定位,若所有父元素都没有定位,则依据浏览器窗口左上角进行定位。
- 特点 1:块元素添加绝对定位后,默认宽与内容的宽相同。
- 特点 2:嵌套结构中,当父元素或祖先元素中有相对或绝对定位时,子元素相对于父元素或祖先元素定位;否则子元素相对于浏览器窗口进行偏移。
9.固定定位(fixed)
- 元素被固定,不会随着滚动条的拖动而改变位置,总是相对浏览器窗口左上角进行偏移。
- 常用于实现网页中的“回到顶部”按钮等。
10.定位的层级
- 多个元素添加定位时可能出现叠加,默认情况下输出的 HTML 结构层级越高。
- 使用
z-index
属性调节层级,数值越大,层级越高。
11.浮动与定位的结合应用
- 可同时使用浮动和定位,如让元素浮动在一侧,同时相对于父元素进行精确定位
六、响应式设计:
响应式设计是一种网页设计方法,是我们在使网页能够根据访问设备的屏幕尺寸和特性自动调整布局、字体大小、图片尺寸等元素,以提供最佳的视觉效果和可用性。
1.媒体查询(Media Queries):
1.1基本语法:
@media 媒体类型 and (条件) {
/* 样式规则 */
}
1.2常见的媒体类型包括:
screen
:用于电脑屏幕、平板电脑、智能手机等。print
:用于打印页面。
条件示例:
width
:屏幕宽度。height
:屏幕高度。orientation
:设备的方向(portrait
竖屏,landscape
横屏)。
例如:
@media screen and (max-width: 600px) {
/* 当屏幕宽度小于等于 600 像素时应用的样式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 当屏幕宽度在 768 像素到 1024 像素之间时应用的样式 */
.container {
width: 70%;
}
}
@media (orientation: landscape) {
/* 当设备处于横屏时应用的样式 */
.sidebar {
display: none;
}
}
2.弹性布局(Flexbox)
基本概念:Flexbox 是一种用于创建灵活的布局结构的 CSS 模块。
容器属性:
display: flex;
:将父元素设置为 Flex 容器。flex-direction
:决定主轴的方向:(row
水平,column
垂直)。justify-content
:主轴上的对齐方式:(flex-start
开始,center
居中,flex-end
结束,space-between
两端对齐,space-around
均匀分布)。align-items
:交叉轴上的对齐方式(flex-start
开始,center
居中,flex-end
结束,stretch
拉伸)。
项目属性:
flex-grow
:定义项目的放大比例。flex-shrink
:定义项目的缩小比例。flex-basis
:定义项目在主轴上的初始大小。
示例:
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}
3.网格布局(Grid)
基本概念:Grid 布局是一种二维的布局方式,可以更方便地创建复杂的网格结构。
容器属性:
display: grid;
:将父元素设置为网格容器。grid-template-columns
:定义列的轨道大小和数量。grid-template-rows
:定义行的轨道大小和数量。grid-gap
:定义网格间隙。
项目属性:
grid-column
:指定项目跨越的列。grid-row
:指定项目跨越的行。
示例:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
.item {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
4.图片响应式
使用 max-width: 100%;
使图片能够根据容器自动缩放,避免图片溢出。
img {
max-width: 100%;
height: auto;
}
5.字体响应式:
通过媒体查询调整字体大小,以适应不同的屏幕尺寸。
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
6.响应式设计的优缺点:
优点:1. 提供一致的用户体验,无论用户使用何种设备访问网站,都能获得相似且流畅的体验,减少了因设备差异导致的操作不便和理解困难。
例如:
一个电商网站在手机、平板和电脑上都能清晰展示商品信息,用户可以方便地浏览和购买。
2. 节省开发和维护成本,相较于为不同设备单独开发多个版本的网站,响应式设计只需维护一个代码库,大大降低了开发和后续更新的成本。
例如:
当网站需要更新功能或修复漏洞时,只需在一处进行修改,所有设备上的显示都会得到更新。
3. 有利于搜索引擎优化(SEO):搜索引擎更倾向于索引具有单一 URL 的网站,响应式设计的网站只有一个 URL,有助于提高网站在搜索引擎中的排名。因为搜索引擎可以更有效地抓取和索引内容,而不会因为多个版本的网站而产生混淆。
4. 增强网站的可访问性,能够适应不同设备和屏幕分辨率,包括为视障用户提供更好的辅助功能支持,提高了网站的可访问性。
例如:
对于使用屏幕阅读器的用户,响应式设计可以确保页面结构和内容的可读性。
七、CSS 动画
通过 @keyframes
规则定义动画关键帧,然后应用到元素上。
示例:
@keyframes my-animation {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.element {
animation: my-animation 2s ease-in-out;
}
八、总结:
CSS 是网页设计中不可或缺的一部分,掌握其基本语法、引入方式、盒模型、布局、响应式设计和动画等知识,可以创建出美观、实用且具有良好用户体验的网页。