Day73 前端知识提要——CSS
CSS (Cascading Style Sheets) 是用于描述网页样式的语言，可以控制网页的布局、颜色、字体大小等外观特性。
CSS 主要有以下几种使用方法：
- 内联样式：直接在 HTML 元素的
style属性中写入 CSS 代码。
<p style="color: blue;">这是一个蓝色的段落。</p>- 内部样式表：在 HTML 文档的
<head>部分使用<style>标签包含 CSS 代码。
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>这是一个红色的段落。</p>
</body>- 外部样式表：创建一个 CSS 文件（比如
styles.css），然后在 HTML 文档的<head>部分使用<link>标签引入。
<!-- 在<head>部分引入styles.css文件 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
/* styles.css 文件内容 */
p {
color: green;
}- CSS 选择器：用于选择需要应用样式的 HTML 元素。
/* 类选择器 */
.center {
text-align: center;
}
/* ID 选择器 */
#header {
background-color: yellow;
}
/* 元素选择器 */
p {
margin: 0;
}
<!-- 使用类选择器 -->
<p class="center">居中文本。</p>
<!-- 使用ID选择器 -->
<div id="header">页头。</div>
<!-- 使用元素选择器 -->
<p>段落。</p>- CSS 继承：子元素自动继承父元素的某些样式。
/* 父元素样式 */
div {
color: black;
}
<div>
<p>段落文本将继承黑色。</p>
</div>- CSS 特殊性：解决样式冲突时，特定选择器具有更高优先权。
/* 权重相同时，后定义的样式会覆盖先定义的样式 */
p {
color: red;
}
/* ID 选择器具有更高特殊性 */
#header {
color: blue;
}
<p id="header">这是蓝色的文本。</p>- CSS 盒模型：描述如何计算网页元素的尺寸和布局。
/* 外边距（margin）、边框（border）、内边距（padding）和内容（content） */
div {
margin: 10px;
border: 1px solid black;
padding: 20px;
content: 100px;
}
<div>内容区域。</div>- CSS 布局：使用不同的布局技术，如浮动（floats）、绝对定位（absolute positioning）、弹性盒（flexboxes）等。
/* 简单的浮动布局 */
.float-left {
float: left;
}
.float-right {
float: right;
}
<div class="float-left">左浮动。</div>
<div class="float-right">右浮动。</div>- CSS 媒体查询：根据设备屏幕大小应用不同的样式规则。
评论已关闭