【JavaWEB-前端基础】CSS快速应用

CSS(层叠样式表)是用于描述HTML和XML文档样式的语言。使用CSS,开发者可以控制文档的布局、颜色、字体以及许多其他视觉方面的特性。

基本语法

CSS由一系列的规则集组成,每个规则集定义了选择器选择的元素如何显示。

选择器 {
    属性1: 值1;
    属性2: 值2;
    ...
}

例如:

p {
    color: red;
    font-size: 16px;
}

设置CSS三种方式

在CSS (Cascading Style Sheets) 中,有三种主要的方式来为HTML元素设置样式:

1. 内联样式 (Inline Style):

这种方式是直接在HTML标签内部使用style属性来定义样式。它主要用于单个元素的特定样式。

例子:

<p style="color: red;">这是一个红色文字的段落。</p>

优点与缺点:

  • 优点:快速且方便于针对单个元素进行样式化。
  • 缺点:不易于维护,如果有大量的元素需要相同的样式,你需要为每个元素重复定义。并且,将样式与内容混合在一起违反了结构与表现的分离原则。

2. 内部样式表 (Internal Style Sheet):

这是在HTML文档的<head>部分使用<style>标签定义的样式。它主要用于单一文档,当我们希望在整个页面上应用统一的样式时。

例子:

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一个蓝色文字的段落。</p>
</body>

优点与缺点:

  • 优点:适用于单页面应用或只需要样式化特定页面的情况。
  • 缺点:如果你有多个页面需要共享相同的样式,这种方式会导致大量重复代码。

3. 外部样式表 (External Style Sheet):

这是最常用且推荐的方式。在这种方法中,CSS代码保存在一个外部.css文件中。然后,通过HTML文件中的<link>元素引入这个文件。

例子:
假设有一个外部样式文件名为 styles.css,内容如下:

p {
  color: green;
}

您可以在HTML文件中这样引用它:

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这是一个绿色文字的段落。</p>
</body>

优点与缺点:

  • 优点:高度可维护,易于组织和管理,适用于大型网站和应用,可以使多个页面共享相同的样式。
  • 缺点:需要额外的HTTP请求来加载CSS文件,但这通常可以通过浏览器缓存和现代的HTTP/2协议进行优化。

总之,选择哪种方法取决于项目的大小、复杂性和需求。在实践中,外部样式表经常被用于大型项目,因为它们提供了更好的组织和可维护性。

选择器

选择器用于确定哪些元素应用给定的样式规则:

  • 类型选择器:基于元素名称选择。
h1 {
    color: blue;
}
  • 类选择器:基于元素的class属性选择。
.highlight {
    background-color: yellow;
}
  • ID选择器:基于元素的id属性选择。
#header {
    background-color: gray;
}
  • 后代选择器:选择某个元素内部的其他元素。
article p {
    font-weight: bold;
}

还有更多高级选择器,如属性选择器、伪类选择器和伪元素选择器等。

属性和值

CSS定义了许多属性,允许你修改文档的各种视觉特性:

  • 布局属性:例如 margin, padding, border, width, height, display, position
  • 字体属性:例如 font-size, font-weight, font-family, text-align, line-height
  • 颜色和背景:例如 color, background-color, background-image
  • 高级视觉效果:例如 transform, transition, animation, box-shadow, gradient

特性

  1. 层叠:当有多个样式应用于同一元素时,CSS会使用一种“层叠”机制来确定哪个样式应该优先。这基于来源、特异性和声明的顺序。

  2. 盒模型:在CSS中,每个元素被视为一个矩形盒子,由内容、内边距(padding)、边框(border)和外边距(margin)组成。

  3. 响应式设计:使用如 media queries 的功能,您可以为不同的设备和视窗大小创建特定的样式。

盒子模型

CSS盒子模型是Web开发中的一个核心概念,它描述了HTML元素在页面上如何渲染和布局。每个元素被视为一个矩形的“盒子”,这个盒子具有多个不同的层和属性。

以下是盒子模型的几个主要组成部分:

  1. 内容 (Content): 这是元素的实际内容,可以是文字、图片或其他媒体内容。它的尺寸可以用 widthheight 属性来控制。

  2. 内边距 (Padding): 这是内容周围的空间,位于内容与边框之间。它可以用 padding 属性(如 padding-toppadding-rightpadding-bottompadding-left)来控制。

  3. 边框 (Border): 这是围绕内容和内边距的实际边框。它可以用 border 属性(如 border-widthborder-colorborder-style)来控制。

  4. 外边距 (Margin): 这是元素周围的空间,位于边框之外。它是元素与其他元素之间的间隙。它可以用 margin 属性(如 margin-topmargin-rightmargin-bottommargin-left)来控制。

盒子模型的特点:

  • 当你设置一个元素的 widthheight 属性,你实际上是设置内容的宽度和高度,而不是整个盒子的尺寸。

  • 要得到元素整体的实际宽度和高度,你需要将内容、内边距和边框的宽度和高度加起来。

  • 外边距不包括在元素的总宽度和高度中,但它影响元素在页面上的位置,特别是与其他元素之间的间距。

  • 在CSS3的box-sizing属性中,可以使用border-box值来更改盒子模型的行为,使得指定的宽度和高度包括内容、内边距和边框。

示例:

假设我们有一个元素的样式定义如下:

.box {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

该元素的总宽度计算为:200px (内容宽度) + 20px (左内边距) + 20px (右内边距) + 10px (左边框) + 10px (右边框) = 260px

外边距则决定了元素与其相邻元素之间的间距,但不计算为元素的总宽度。

理解盒子模型对于掌握CSS布局和确保页面元素正确对齐非常重要。

示例

为了涵盖多种CSS知识点,我创建一个简单的Web页面样例,它会包含以下内容:

  1. 外部样式引用。
  2. 字体和文本属性。
  3. 盒子模型属性。
  4. CSS选择器的各种类型。
  5. 伪类和伪元素。
  6. 布局与定位。
  7. 动画和转换。

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>我的CSS示例</h1>
        </header>
        <nav>
            <a href="#" class="active">首页</a>
            <a href="#">关于</a>
            <a href="#">联系</a>
        </nav>
        <main>
            <article>
                <h2>文章标题</h2>
                <p>这是一些示例文本。</p>
                <button>点击我</button>
            </article>
        </main>
        <footer>
            <p>版权 &copy; 2023</p>
        </footer>
    </div>
</body>
</html>

无CSS时的结果:
无CSS

CSS (styles.css):

/* 全局样式和字体 */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
}

/* 头部和导航 */
header {
    background: #50b3a2;
    color: white;
    padding: 20px;
    text-align: center;
}

nav {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

nav a {
    color: #f4f4f4;
    padding: 14px 20px;
    text-decoration: none;
    transition: background 0.3s;
}

nav a:hover {
    background: #555;
}

nav .active {
    background: #50b3a2;
}

/* 主内容 */
main {
    padding: 30px 0;
}

article {
    background: white;
    padding: 20px;
    margin-bottom: 20px;
}

button {
    background: #50b3a2;
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

button:hover {
    background: #333;
}

/* 页脚 */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 80%;
}

footer p::after {
    content: " - 感谢浏览";
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
    .container {
        width: 95%;
    }

    nav, header, footer {
        text-align: left;
    }
}

添加CSS输出结果:
有CSS

上述示例中,我用到了布局、颜色、选择器、伪类、伪元素、媒体查询、动画和转换等多种CSS知识点。

参考

第六节 CSS的简单应用
菜鸟教程–CSS 分组 和 嵌套 选择器