CSS是一种用于网页样式设计的语言，主要用于描述网页内容的布局、字体、颜色、背景和其它显示特性。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文件中设置样式，然后在HTML文档的<head>标签中通过<link>标签引用。
<!-- 在HTML文档中 -->
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
/* 在styles.css文件中 */
p {
color: green;
}CSS选择器：
CSS选择器用于选择需要添加样式的元素。常见的选择器有标签选择器、类选择器、ID选择器和属性选择器等。
/* 标签选择器 */
p {
color: orange;
}
/* 类选择器 */
.center {
text-align: center;
}
/* ID选择器 */
#logo {
width: 200px;
}
/* 属性选择器 */
input[type="text"] {
background-color: yellow;
}CSS盒模型：
CSS盒模型由content、padding、border和margin组成。
div {
width: 300px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}CSS布局：
CSS布局可以通过多种方式实现，如浮动布局、定位布局和弹性布局。
/* 浮动布局 */
.float-left {
float: left;
}
.float-right {
float: right;
}
/* 定位布局 */
.relative-position {
position: relative;
top: 10px;
left: 20px;
}
/* 弹性布局 */
.flex-container {
display: flex;
}CSS特效：
CSS可以用来实现各种视觉特效，如阴影、渐变、变换等。
/* 阴影特效 */
div {
box-shadow: 5px 5px 10px grey;
}
/* 渐变特效 */
.gradient-background {
background: linear-gradient(to right, red, yellow);
}
/* 变换特效 */
.rotate-30deg {
transform: rotate(30deg);
}CSS媒体查询：
CSS媒体查询可以根据不同的屏幕尺寸或设备应用不同的样式。
/* 屏幕宽度小于600px时 */
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}CSS优先级：
当多个选择器应用于同一元素时，需要确定哪个选择器的样式会被