JavaWeb——CSS3的使用

1. CSS概述

2. CSS引入方式

3. CSS颜色显示

4. CSS选择器

1. CSS概述

CSS，全称为“Cascading Style Sheets”，中文译为“层叠样式表”。

CSS是一种用于描述HTML或XML（包括SVG、MathML等衍生技术）文档样式的计算机语言。它被设计出来主要是为了分离文档的内容（written in HTML or a similar markup language）与文档的呈现样式（如更详细的布局和设计），并且有多种样式可以应用于在不同设备上浏览的网页。这种分离可以提高内容的可访问性，提供更多的布局和视觉效果的控制，并允许控制样式信息的复杂性，而不需要结构化的文档内容通过杂乱的样式信息进行展示。

具体来说，CSS能够：

对网页中元素的位置进行像素级的精确控制排版，使得设计师可以精确地确定元素的位置和大小。
支持几乎所有的字体和字号样式。这意味着设计师可以自由选择他们想要的字体样式，为网页设计提供更丰富的视觉效果。
拥有对网页对象和模型样式编辑的能力。设计师不仅可以改变元素的颜色、字体，还可以对其进行更复杂的3D变换、动画等效果。

一个有CSS和没有CSS的代码对比示例：


<!DOCTYPE html>  
<html>  
<head>  
    <title>没有CSS的示例</title>  
</head>  
<body>  
    <h1>欢迎来到我的网站</h1>  
    <p>这是一个没有CSS的段落。</p>  
    <p>这是另一个没有CSS的段落。</p>  
</body>  
</html>


<!DOCTYPE html>  
<html>  
<head>  
    <title>有CSS的示例</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            background-color: #f2f2f2;  
        }  
        h1 {  
            color: #336699;  
            text-align: center;  
        }  
        p {  
            font-size: 16px;  
            line-height: 1.5;  
            color: #666666;  
        }  
    </style>  
</head>  
<body>  
    <h1>欢迎来到我的网站</h1>  
    <p>这是一个使用CSS美化的段落。</p>  
    <p>这是另一个使用CSS美化的段落。</p>  
</body>  
</html>

2. CSS引入方式

在HTML中，有三种常见的方式来引入CSS样式：

名称	语法描述	示例
行内样式	在标签内使用style属性，属性值是css属性键值对	中国新闻网
内嵌样式	定义
外联样式	定义标签，通过href属性引入外部css文件

内联样式（Inline Styles）：直接在HTML元素中使用style属性来定义CSS样式。这种方式直接在元素上应用样式，不需要额外的样式表文件。例如：

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

内部样式表（Internal Stylesheet）：在HTML文档的部分使用

JavaWeb——CSS3的使用

1. CSS概述

2. CSS引入方式

中国新闻网