Linux应用实战之网络服务器（三）CSS介绍

最新推荐文章于 2024-08-16 23:06:16 发布

我系真滴菜

最新推荐文章于 2024-08-16 23:06:16 发布

阅读量954

点赞数 14

分类专栏： Linux应用实战文章标签： css 前端

本文链接：https://blog.csdn.net/cesheng3410/article/details/137111924

版权

Linux应用实战专栏收录该内容

5 篇文章 0 订阅

订阅专栏

0、前言

准备做一个Linux网络服务器应用实战，通过网页和运行在Linux下的服务器程序通信，这是第三篇，介绍一下CSS，优化上一篇文章中制作的HTML页面。

1、CSS常用语法

CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的标记语言。CSS语法规则相对简单且直观，它主要由选择器和声明块组成。

1.1 基本语法

CSS规则由两部分组成：选择器和一条或多条声明。

选择器 {  
  属性: 值;  
  属性: 值;  
  /* 更多属性 */  
}

选择器：用于选择你想要样式化的HTML元素。它可以是一个元素名、类名、ID名、伪类等。
声明块：在大括号 {} 中包含一条或多条声明。
声明：由属性和值组成，中间用冒号 : 分隔，并以分号 ; 结束。每个声明代表一个样式属性的设置。

1.2 选择器

元素选择器：基于HTML元素名来选择元素，如 p, div, span 等。
类选择器：使用 . 加上类名来选择元素，如 .myClass。
ID选择器：使用 # 加上ID名来选择元素，如 #myID。ID选择器具有更高的优先级。
属性选择器：基于元素的属性和属性值来选择元素，如 [type="text"]。
伪类选择器：用于选择HTML元素的特定状态，如 :hover 用于鼠标悬停时的状态，:active 用于元素被激活时的状态等。
组合选择器：可以使用逗号 , 来组合多个选择器，使它们共享相同的样式规则。

1.3 属性和值

1.3.1 文本

font-family: 设置字体类型，如Arial, Times New Roman, Microsoft YaHei等。
font-size: 设置字体大小，可以使用绝对单位（如px、pt）或相对单位（如em、%）。
color: 设置文本颜色，使用颜色名、十六进制、RGB、RGBA等。
text-align: 设置文本水平对齐方式，可选值有left、center、right、justify。
text-decoration: 设置文本装饰，可选值有none、underline、overline、line-through、blink。

1.3.2 背景

background-color: 设置背景颜色。
background-image: 设置背景图片。
background-repeat: 设置背景图片是否及如何重复，可选值有repeat、repeat-x、repeat-y、no-repeat。
background-position: 设置背景图片的位置。

1.3.3 盒模型

width 和 height: 设置元素的宽度和高度。
padding: 设置元素的内边距。
border: 设置元素的边框，可以包括border-width、border-color、border-style（如solid、dotted、dashed等）。
margin: 设置元素的外边距。

1.3.4 定位

position: 设置元素的定位方式，可选值有static、relative、absolute、fixed、sticky。
top、right、bottom、left: 与position属性一起使用，定义元素的位置。
z-index: 设置元素的堆叠顺序。

1.3.5 显示

display: 控制元素的显示方式，如block、inline、inline-block、none等。
visibility: 设置元素的可见性，可选值有visible、hidden。
opacity: 设置元素的透明度，取值范围从0（完全透明）到1（完全不透明）。

1.4 其他重要概念

继承与层叠，CSS中的样式可以通过继承从父元素传递到子元素，但并非所有属性都可以继承。层叠则是当多个样式规则应用于同一元素时，决定哪个规则优先的机制。层叠顺序由选择器的优先级和样式来源（如内联样式、ID选择器、类选择器、元素选择器等）决定。
盒模型，CSS盒模型是页面布局的基础，每个HTML元素都可以看作是由内容、内边距（padding）、边框（border）和外边距（margin）组成的矩形盒子。这些属性可以用来控制元素的尺寸和与其他元素之间的空间关系。
导入与外部样式表，CSS可以写在HTML文件的<style>标签内，也可以保存在单独的.css文件中，并通过HTML文件的<link>标签引入。此外，还可以使用@import规则在一个样式表中导入另一个样式表。

2、优化界面

使用css优化上一篇文章Linux应用实战之网络服务器（二）HTML介绍中设计的HTML界面。

2.1 登录界面优化

优化后代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
            padding: 20px;
        }

        h2 {
            color: #333;
        }

        form {
            max-width: 300px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            text-align: left;
            margin-bottom: 5px;
        }

        input {
            width: calc(100% - 10px);
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 3px;
            display: inline-block;
        }

        button {
            padding: 8px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <h2>Login</h2>
    <form>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username">
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br><br>
        <button type="submit">Login</button>
    </form>
</body>
</html>

显示效果：

2.2 查询界面优化

优化后代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Query Interface</title>
<style>
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100vh;
    margin: 0;
  }

  h2 {
    text-align: center;
  }

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  button {
    padding: 10px 20px;
    margin: 5px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  button:hover {
    background-color: #0056b3;
  }

  textarea {
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>
</head>
<body>
<h2>Query Interface</h2>
<div>
  <button onclick="queryData('query1')">Query 1</button>
  <button onclick="queryData('query2')">Query 2</button>
  <button onclick="queryData('query3')">Query 3</button>
  <button onclick="queryData('query4')">Query 4</button>
</div>
<textarea id="result" rows="10" cols="50" readonly></textarea>
</body>
</html>

显示效果：