Java网页搭建--CSS入门

最新推荐文章于 2023-06-28 22:29:16 发布

原创最新推荐文章于 2023-06-28 22:29:16 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

从网页搭建入门java web 专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了CSS的基础知识，包括CSS的作用、语法、声明块、与HTML的关联方式、样式优先级以及选择器的使用。内容涵盖了内联样式、外联样式、类选择器、ID选择器、伪类和伪元素，以及布局和盒子模型。通过实例展示了如何设置背景、文本、字体、列表和表格样式，并讲解了两行三列和三行两列的布局实现。

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

CSS：层叠样式表，使得相同的页面在不同的浏览器当中呈现出相同的样式

CSS用来做什么：

CSS基础语法：

CSS声明：

CSS声明块：可以同时使用CSS属性

将CSS样式与HTML进行关联：

CSS声明练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS声明</title>
    <style>
        body {
            background-color: lightblue;
        }
    </style>
</head>
<body>

</body>
</html>

输出结果：页面纯蓝色

定义CSS的两种方式：

CSS的内联样式：只对当前标签有效

格式要求：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何定义CSS样式1</title>
</head>
<body>
<p style="color:lightcoral;font-weight: bold;">
    这是第一个段落内容
</p>
<p >
    这是第二个段落内容
</p>
</body>
</html>

输出结果：

CSS外联样式：

方式1:

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何定义CSS样式2</title>
    <style>
        p{
            color: lightblue;
            font-weight:bolder;
        }
    </style>
</head>
<body>
<p >
    这是第一个段落内容
</p>
<p >
    这是第二个段落内容
</p>
</body>
</html>

输出结果：

方式2:将CSS文件和html文件相分离

CSS文件：

p {
    color: red;
    font-weight: bolder;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>如何使用CSS样式</title>
    <link type="text/css" rel="stylesheet" href="04.css">
</head>
<body>
<p>
    这是一个段落内容
</p>
</body>
</html>

输出结果：

CSS使用的优先级别：
内联样式优先级高于外联样式，两种外联方式的优先级别一样，但要根据其位置表现出不同的优先级别，在后面的优先级别高于在前面的

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式使用的优先格式</title>
    <style>
        p {
            color: green;
            font-weight:bolder;
        }
    </style>
</head>
<body>
<p style="color: red;font-weight: bolder;">
    这是一个段落内容
</p>
</body>
</html>

输出结果：字体为红色

CSS选择器：

类和元素选择器最常用

ID选择器：#ID ID唯一不重复

class选择器：.类名

元素选择器：元素名

属性选择器：[title] [title=title名字]

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <style>
        /* id选择器，不可重复 */
        #p {
            color: lightcoral;
            font-weight: bold;
        }
        /* class选择器 */
        .myclass {
            color: lightgreen;
            font-weight: bolder;
        }
        /* 元素选择器 */
        span {
            color: lightblue;
            font-weight: normal;
        }
        /* 属性选择器 */
        [title] {
            color: lightgray;
            font-weight: lighter;
        }
    </style>
</head>
<body>
<p id="p">这是一个段落内容.</p>
<p class="myclass">这是一个段落内容.</p>
<span>这是一段文本内容.</span>
<p title="this is p.">这是一个段落内容.</p>
</body>
</html>

输出结果：

CSS基于关系的选择器：

A E

A > E

B + E

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        span {
            background-color: orange;
        }

        div span {
            background-color: DodgerBlue;
        }
    </style>
</head>
<body>
<div>
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>
<span>Span 3.</span>
</body>
</html>

输出结果：

编程练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 补充代码 -->
    <style>
        div span {
            color :red;
        }
        div span1 {
            color :green;
        }
    </style>
</head>
<body>

<div>
  <h3>图书排行榜</h3>
    <span>  三体</span>
    </br>
    <span>  盗墓笔记</span>
    </br>
    <span>  三生三世</span>
</div>

<div>
    <h3>游戏排行榜</h3>
    <span1>1、英雄联盟</span1>
    </br>
    <span1>2、DOTA</span1>
    </br>
    <span1>3、魔兽世界</span1>
</div>
</body>
</html>

输出结果：

子元素选择器：只选择了下面一层
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style>
        span { background-color: red; }
        div > span {
            background-color: DodgerBlue;
        }
    </style>
</head>
<body>
<div>
  <span>Span 1. In the div.
    <span>Span 2. In the span that's in the div.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>
</body>
</html>

输出结果：

相邻元素选择器：选择在其下方的一个兄弟元素
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相邻兄弟选择器</title>
    <style>
        #one + li {
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li id="one">One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</body>
</html>

输出结果：

CSS的伪类：主要用来改变链接在不同情况下的状态

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        body { background-color: #ffffc9 }
        a:link { color: blue } /* 未访问链接 */
        a:hover { color:rebeccapurple } /* 用户鼠标悬停 */
        a:visited { color: purple } /* 已访问链接 */
        a:active { color: orangered } /* 激活链接 */
    </style>
</head>
<body>
<p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="#">慕课网 imooc.com</a>.</p>
</body>
</html>

输出结果：想看就自己去运行

伪元素：显示效果和元素一样，但是并不是html里的元素

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        q::before {
            content: "«";
            color: blue;
        }
        q::after {
            content: "»";
            color: red;
        }
    </style>
</head>
<body>
<q>一些引用</q>, 他说, <q>比没有好。</q>.
</body>
</html>

输出结果：

CSS选择器的优先级别：

ID选择器 > 类选择器 > 属性选择器 > 伪类>元素选择器 > 伪元素

CSS设置样式：
背景样式：

文本样式：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本</title>
    <style>
        /* 设置文本颜色 */
        #p1 {
            color: lightcoral;
        }
        /* 设置文本左对齐 */
        #p2 {
            text-align: left;
        }
        /* 设置文本居中对齐 */
        #p3 {
            text-align: center;
        }
        /* 设置文本右对齐 */
        #p4 {
            text-align: right;
        }
        /* 设置链接样式去掉下划线 */
        a {
            text-decoration: none;
        }
        /* 设置文本的缩进 */
        #p5 {
            text-indent: 50px;
        }
    </style>
</head>
<body>
<p id="p1">这是一个段落内容.</p>
<p id="p2">这又是一个段落内容.</p>
<p id="p3">这又是一个段落内容.</p>
<p id="p4">这又是一个段落内容.</p>
<a href="#">这是一个链接</a>
<p id="p5">这还是一个段落内容.</p>
</body>
</html>

输出结果：

编程练习：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 补充代码 -->
    <style>
        p{ background-image:url("http://climg.mukewang.com/5a9d25b50001b0e603600214.jpg");
            background-position: center;
            width: 100%;
            height: 200px;
            background-repeat: no-repeat;
        }
        h3{text-indent: 2em;
        }
    </style>
</head>
<body>
<div >
    <p></p>
    <h2 align="center">超文本标记语言</h2>
    <h3> HTML(HyperText Markup Languae)是超文本标记语言。他是标准通用标记语言下的一个应用， 也是一种规范，一种标准,它通过标记符号来标记要显示的网页中的各个部分。 网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容 (如：文字如何处理，画面如何安排，图片如何显示等) </h3>
</div>
</body>
</html>

输出结果：

字体样式：

列表：

表格样式：

CSS布局：

两行三列布局：

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两行三列布局</title>
    <style>
        html, body {
            margin: 0;
        }
        header {
            height: 100px;
            background-color: lightblue;
        }
        #container {
            height: 500px;
            background-color: lightgreen;
        }
        nav {
            float: left;
            width: 150px;
            background-color: lightyellow;
            height: 100%;
        }
        aside {
            float: right;
            width: 100px;
            background-color: orange;
            height: 100%;
        }
        article {
            overflow: hidden;
            background-color: lightcoral;
            height: 100%;
        }
    </style>
</head>
<body>
<header></header>
<div id="container">
    <nav></nav>
    <aside></aside>
    <article></article>
</div>
</body>
</html>

示意图

三行两列布局：
测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三行两列布局</title>
    <style>
        html, body {
            margin: 0;
        }
        header {
            height: 100px;
            background-color: lightblue;
        }
        #container {
            height: 500px;
            background-color: lightgreen;
        }
        footer {
            height: 100px;
            background-color: lightslategray;
        }
        nav {
            float: left;
            width: 150px;
            background-color: lightyellow;
            height: 100%;
        }
        article {
            /*margin-left: 150px;*/
            overflow: hidden;
            background-color: lightcoral;
            height: 100%;
        }
    </style>
</head>
<body>
<header></header>
<div id="container">
    <nav></nav>
    <article></article>
</div>
<footer></footer>
</body>
</html>

输出结果：