CSS样式精要-优快云博客

本文介绍CSS的基本概念，包括层叠样式表的特点、选择器优先级、盒子模型等内容，并讲解了如何利用CSS实现网页布局和样式的精确控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

概念
特点
选择器优先级
CSS核心内容
CSS的其他样式
HTML

概念

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

特点

实现网页内容与样式的分离

选择器优先级

ID选择器（id）>类选择器（class）>HTML标签选择器

CSS核心内容

盒子模型

标准盒子模型
在这里插入图片描述
margin（画框） border（外边距） padding （内边距） content（内容）
一般都有上top右right下bottom左left 四个描述。

    border: 1px solid #00f; /*外边框的，边框宽度，样式，颜色*/
    padding: 5px; /*内边框的，宽度，*/
    margin: 5px; /*画框的*/

浮动

    float: right; /*盒子向右浮动*/
    clear: right; /*清除浮动*/

块级元素和行列元素

块级元素（div 单独一行），行列元素（一行罗列 span）或者是使用

<span class="menu">栏目二</span><!--行列元素-->
<div class="menu">栏目三</div><!--块级元素，单独一行-->

 display:block;/*加这个可以将行列元素变为块级元素*/

相对定位和绝对定位

position: relative; /*相对定位，盒子内部各个框框的相对位置是不变的*/
top: 80px;
left: 30px;

position: absolute; /*绝对定位,这个盒子对应外面的盒子的位置*/
top: 80px;
left: 30px;

CSS的其他样式

body {/*HTML标签的名称*/

}

.menu { /*栏目样式*/
    color: #00f; /*文字颜色*/
    background-color: #FFE7F7; /*背景颜色*/
    width: 150px;
    height: 60px;
    line-height: 60px; /*让文本垂直居中*/
}
.title{  /*新闻标题样式 */
    text-decoration :underline;/*下划线*/
}

#special {
    font-weight:bold;/*粗体*/
}

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title>CSS测试</title><!--标题-->

</head>
<body>
    <!--主体内容-->
    <span class="menu">栏目一</span><!--span这是一个容器，可以放内容也可以放格式-->
    <span class="menu">栏目二</span><!--行列元素-->
    <div class="menu">栏目三</div><!--块级元素，单独一行-->
    <font color="#00f">栏目一</font><!--颜色-->
   
</body>
</html>