CSS
CSS引入方式
内联样式:
- 在 HTML 元素中使用 style 属性来定义样式,例如:
<p style="color: red; font-size: 16px;">Hello, World!</p>
内部样式表:
- 使用
<style>
标签在 HTML 文件的头部或任意位置定义样式,例如:
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
外部样式表:
- 将样式定义在一个独立的 CSS 文件中,然后在 HTML 文件中通过
<link>
标签引入,例如:
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
@import:
- 在 CSS 文件中使用 @import 来引入其他 CSS 文件,例如:
@import url("styles.css");
三大选择器
元素选择器(Element Selector):
- 特点:最基本的选择器,通过标签名称选择元素。
- 示例:p 选择所有段落元素,h1 选择所有一级标题元素。
- 应用:常用于为整个文档中特定类型的元素应用样式。
p{color:red}
类选择器(Class Selector):
- 特点:通过类名选择元素,以 . 开头。
- 示例:.example 选择所有具有 example 类的元素。
- 应用:允许为多个元素应用相同的样式,提高样式的重用性。
.highlight{background-color:yellow;font-weight:bold;}
<p class="highlight">This is a highlighted paragraph.</p>
ID 选择器(ID Selector):
- 特点:通过 ID 名称选择元素,以 # 开头。
- 示例:#header 选择具有 header ID 的元素。
- 应用:用于标识文档中唯一的元素,通常用于特定元素的样式定制。
#header{background-color:lightblue;color:white;}
<div id="header">This is the header.</div>
浮动
- 在CSS中,浮动(float)是一种布局属性,用于控制元素在页面中的位置。
- 通过浮动,可以使元素向左或向右移动,同时允许其他内容环绕在其周围。
常见的浮动属性包括:
- float: left;:元素向左浮动,使其靠左对齐,并允许其他内容环绕在右侧。
- float: right;:元素向右浮动,使其靠右对齐,并允许其他内容环绕在左侧。
- clear: both;:清除浮动,防止浮动元素影响其父元素的高度。
浮动元素可能会导致一些布局问题,如父元素高度塌陷(父元素无法自动撑开以容纳浮动元素)。为了解决这些问题,可以使用清除浮动的方法,例如在父元素的最后添加一个空的元素并设置clear: both;。
例子
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
border: 1px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
float: left;
margin: 10px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
定位
- CSS中的定位属性用于控制元素在页面中的位置。主要的定位属性有:
- Static(静态定位):元素按照它们在文档流中的顺序进行定位。这是默认值,通常不需要显式设置。
- Relative(相对定位):相对于元素在文档流中的初始位置进行定位,通过设置top、right、bottom、left属性来调整元素的位置,不会影响其他元素的布局。
- Absolute(绝对定位):相对于最近的已定位祖先元素(父元素或更高级元素)进行定位,如果没有已定位的祖先元素,则相对于最初的包含块定位。通过设置top、right、bottom、left属性来确定元素的位置,会脱离文档流其他元素会忽略它的位置。
- Fixed(固定定位):相对于浏览器窗口进行定位,当用户滚动页面时,元素始终会停留在相同的位置。也是脱离文档流的定位方式。
- Sticky(粘性定位):元素在跨越特定阈值前为相对定位,之后为固定定位。通常用于创建导航栏等元素,在用户滚动页面时固定在页面的某个位置。
- 这些定位属性可以通过CSS的position属性进行设置,如:position: static | relative | absolute | fixed | sticky;
盒子模型
- CSS盒子模型是用来描述网页上的元素在页面中所占空间的模型。一个元素的盒子包括内容区域、内边距、边框和外边距四个部分。
- 内容区域 (Content): 盒子的内容部分,包括文本、图片或其他媒体内容。
- 内边距 (Padding): 内边距是内容区域与边框之间的空间,可以用来控制内容与边框之间的距离。
- 边框 (Border): 边框包围在内容区域和内边距外部,用来界定元素的边界。
- 外边距 (Margin): 外边距是盒子与其他元素之间的空间,用来控制元素与周围元素之间的距离。
- 在CSS中,可以通过设置不同的属性来控制盒子模型的各个部分,例如:
- width 和 height:控制内容区域的宽度和高度。
- padding:设置内边距。
- border:设置边框样式、宽度和颜色。
- margin:设置外边距。