CSS(Cascading Style Sheets)是一种用于描述网页外观的样式表语言。以下是全面的 CSS 知识点:
一、CSS 基础概念
-
定义:CSS 用于控制 HTML 或 XML 文档的呈现方式,包括布局、颜色、字体、大小等。
-
层叠性和继承性:多个样式规则可以层叠应用于同一元素,同时某些样式属性可以从父元素继承到子元素。
二、CSS 语法
-
选择器:用于指定要应用样式的 HTML 元素。常见选择器有:
- 元素选择器(如
p
选择所有<p>
元素)。 - 类选择器(以
.
开头,如.my-class
)。 - ID 选择器(以
#
开头,如#my-id
)。 - 后代选择器(如
div p
选择<div>
元素内部的所有<p>
元素)。 - 子选择器(如
div > p
选择<div>
元素的直接子元素<p>
)等。
- 元素选择器(如
-
属性和值:指定要设置的样式属性及其值,如
color: red;
设置文本颜色为红色。
三、CSS 引入方式
1.内联样式:在 HTML 元素的 style
属性中直接编写 CSS 样式。
<p style="color: blue;">This is blue text.</p>
2.内部样式表:在 HTML 文件的 <head>
标签中使用 <style>
标签定义 CSS 样式。
<head>
<style>
p {
color: green;
}
</style>
</head>
3.外部样式表:将 CSS 代码保存为一个独立的 .css
文件,然后在 HTML 文件的 <head>
标签中使用 <link>
标签引入。
<head>
<link rel="stylesheet" href="styles.css">
</head>
四、CSS 盒模型
- 组成:由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
计算实际尺寸:元素的实际宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度;实际高度同理。
五、CSS 布局
1.浮动(float):使元素向左或向右浮动,可用于实现多列布局。
.left-column {
float: left;
width: 30%;
}
.right-column {
float: right;
width: 70%;
}
2.定位(position):
· 相对定位(relative):相对于元素在正常文档流中的位置进行定位。
.box {
position: relative;
top: 20px;
left: 20px;
}
- 绝对定位(absolute):相对于最近的已定位祖先元素进行定位,如果没有已定位祖先元素,则相对于文档的初始包含块进行定位。
.absolute-box {
position: absolute;
top: 50px;
right: 50px;
}
- 固定定位(fixed):相对于浏览器窗口进行定位。
.fixed-box {
position: fixed;
bottom: 20px;
left: 20px;
}
- 弹性布局(Flexbox):
- 容器属性:
display: flex;
:将容器设置为弹性布局。flex-direction
:设置主轴方向(row、column 等)。justify-content
:设置主轴上的对齐方式(center、flex-start、flex-end 等)。align-items
:设置交叉轴上的对齐方式(center、flex-start、flex-end 等)。
- 项目属性:
flex-grow
:定义项目的放大比例。flex-shrink
:定义项目的缩小比例。flex-basis
:定义项目在主轴上的初始大小。
- 容器属性:
.flex-container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.flex-item {
flex-grow: 1;
}
- 网格布局(Grid):
- 容器属性:
display: grid;
:将容器设置为网格布局。grid-template-columns
:定义列的轨道大小和数量。grid-template-rows
:定义行的轨道大小和数量。grid-gap
:设置网格间隙。
- 项目属性:
grid-column
:指定项目在网格中的列位置。grid-row
:指定项目在网格中的行位置。
- 容器属性:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 10px;
}
.grid-item {
grid-column: 2 / 3;
grid-row: 1 / 2;
}
六、CSS 文本样式
- 字体属性:
font-family
:设置字体。font-size
:设置字体大小。font-weight
:设置字体粗细。font-style
:设置字体样式(normal、italic 等)。
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
- 文本对齐:
text-align
:设置文本的水平对齐方式(left、center、right 等)。vertical-align
:设置文本的垂直对齐方式(top、middle、bottom 等)。
.text-center {
text-align: center;
}
img {
vertical-align: middle;
}
- 文本装饰:
text-decoration
:设置文本的装饰(underline、overline、line-through 等)。
a {
text-decoration: none;
}
七、CSS 颜色和背景
-
颜色表示:
- 颜色名称(如
red
、blue
)。 - 十六进制值(如
#ff0000
表示红色)。 - RGB 值(如
rgb(255, 0, 0)
表示红色)。 - HSL 值(如
hsl(0, 100%, 50%)
表示红色)。
- 颜色名称(如
-
背景属性:
background-color
:设置背景颜色。background-image
:设置背景图片。background-repeat
:设置背景图片的重复方式(repeat、no-repeat、repeat-x、repeat-y)。background-position
:设置背景图片的位置。background-size
:设置背景图片的大小。
.box {
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
八、CSS 过渡和动画
1.过渡(transition):用于在元素的状态发生变化时实现平滑的过渡效果。
.button {
background-color: blue;
color: white;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: green;
}
2.动画(animation):可以创建更复杂的动画效果。
@keyframes move {
from {
left: 0;
}
to {
left: 200px;
}
}
.box {
position: relative;
animation: move 5s infinite;
}
九、CSS 响应式设计
1.媒体查询(media query):根据不同的设备特性(如屏幕宽度、分辨率等)应用不同的样式。
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
2.弹性布局和网格布局在响应式设计中的应用:可以根据不同的屏幕尺寸调整布局。
十、CSS 预处理器(如 Sass、Less)
1.变量:可以定义和使用变量来存储颜色、尺寸等常用值。
$primary-color: blue;
.button {
background-color: $primary-color;
}
2.嵌套:可以将 CSS 规则嵌套在其他规则中,提高代码的可读性和组织性。
.nav {
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
}
3.混合(mixin):可以定义可重用的样式块,并在需要的地方调用。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}