Document

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

2023-09-01
dfer
424
前端 css html CSDN

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。

特性

层叠：当有多个样式应用于同一元素时，CSS会使用一种“层叠”机制来确定哪个样式应该优先。这基于来源、特异性和声明的顺序。
盒模型：在CSS中，每个元素被视为一个矩形盒子，由内容、内边距（padding）、边框（border）和外边距（margin）组成。
响应式设计：使用如 media queries 的功能，您可以为不同的设备和视窗大小创建特定的样式。

盒子模型

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

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

内容 (Content): 这是元素的实际内容，可以是文字、图片或其他媒体内容。它的尺寸可以用 width 和 height 属性来控制。
内边距 (Padding): 这是内容周围的空间，位于内容与边框之间。它可以用 padding 属性（如 padding-top、padding-right、padding-bottom 和 padding-left）来控制。
边框 (Border): 这是围绕内容和内边距的实际边框。它可以用 border 属性（如 border-width、border-color 和 border-style）来控制。
外边距 (Margin): 这是元素周围的空间，位于边框之外。它是元素与其他元素之间的间隙。它可以用 margin 属性（如 margin-top、margin-right、margin-bottom 和 margin-left）来控制。

盒子模型的特点：

当你设置一个元素的 width 和 height 属性，你实际上是设置内容的宽度和高度，而不是整个盒子的尺寸。
要得到元素整体的实际宽度和高度，你需要将内容、内边距和边框的宽度和高度加起来。
外边距不包括在元素的总宽度和高度中，但它影响元素在页面上的位置，特别是与其他元素之间的间距。
在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页面样例，它会包含以下内容：

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

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 分组和嵌套选择器

上一篇：【吐血总结】优质开发

下一篇： htmlcss