JavaWeb学习（三）

JavaWeb学习（三）：Web前端开发 —— CSS

目录

本文为个人学习记录，内容学习自 黑马程序员

概念

  • CSS（Cascading Style Sheet），层叠样式表，用于控制页面的样式

属性

属性的具体属性值直接查询官方文档 w3school 在线教程 ，下面仅列举部分内容

文本类属性 属性值 作用
color red, blue, green, ... 设置文本颜色
font-size 1px, 2px, 3px, ... 设置字体大小
text-decoration none, underline, overline, ... 设置文本装饰（如下划线、上划线、中划线）
text-indent 1px, 2px, 3px, ... 设置段落首行缩进
text-align center, left, right 设置文本对齐方式
line-height 1px, 2px, 3px, ... 设置行高
布局类属性 属性值 作用
width 像素值 或 百分比 设置元素宽度
height 像素值 或 百分比 设置元素高度
box-sizing content-box, border-box, ... 指定上面的宽高是盒子模型中 content 的宽高（默认），还是 border 的宽高
background-color red, blue, green, ... 指定盒子模型中 padding 以内的背景色
padding 像素值 或 百分比 内边距，分别为 上 右 下 左，如果全都一样可以简写成一个
border 1px solid red 第一个参数指定宽度，第二个参数指定线条类型，第三个参数指定颜色
margin 像素值 或 百分比 外边距，分别为 上 右 下 左，如果全都一样可以简写成一个

选择器

  • 用于选取需要设置样式的元素（标签）

    • 元素选择器

      格式：

      元素名称 {
    属性名: 属性值;
}

      示例：应用于所有一级标题的样式

      <style>
    h1 {
        color: red;
    }
</style>

    • id 选择器

      格式：

      #id属性值 {
    属性名: 属性值;
}

      示例：应用于特定 id 的一级标题的样式（id 在页面中不可重复）

      <style>
    #hid{
        color: red;
    }
</style>
<h1 id="hid">这是一级标题</h1>

    • 类选择器

      格式：

      .class属性值 {
    属性名: 属性值;
}

      示例：应用于特定 class 的一级标题的样式（class 在页面中可以重复）

      <style>
    .cls{
        color: red;
    }
</style>
<h1 class="cls">这是一级标题</h1>

  • 选择器优先级：id 选择器 > 类选择器 > 元素选择器

应用

  • 将 CSS 引入 HTML 的三种方式：

    • 行内样式：写在标签的 style 属性中（不推荐）

      <!-- 属性名: 属性值 -->
<h1 style="xxx: xxx; xxx: xxx">这是一级标题</h1>

    • 内嵌样式：写在 style 标签中（可以写在页面任何位置，但通常写在 head 标签内）

      <!-- 下面的样式适用于所有一级标题 -->
<style>
    h1 {
        xxx: xxx;
        xxx: xxx;
    }
</style>

    • 外联样式：写一个单独的 .css 文件中（需要通过 link 标签在网页中引入，link 标签可以写在页面任何位置）

      1. css 文件中

        h1 {
    xxx: xxx;
    xxx: xxx;
}

      2. html 文件中

        <!-- href中的内容为.css文件的路径 -->
<link rel="stylesheet" href="news.css">

扩展

颜色表示形式：

表示方式 表示含义 取值
关键字 预定义的颜色名 red, green, blue
rgb表示法 红绿蓝三原色，每项取值范围：0 ~ 255 rgb(0, 0, 0), rgb(255, 255, 255)
十六进制表示法 #开头，将数字转换成十六进制表示 #000000, #ff0000, 可简写成 #000, #f00

实例

对网页进行居中排版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>励志语录</title>
    <style>
        div {
            width: 60%;
            margin: 0 20% 0 20%;
        }
    </style>
</head>
<body>
    <div>
        1、目标的坚定是性格中最必要的力量源泉之一，也是成功的利器之没有它，天才会在矛盾无定的迷径中徒劳无功。
        2、当我觉得我倒霉了，我就会想：这是在挥洒我的霉运，挥洒之后，剩下的就全都是幸运了!
        3、各人有各人理想的乐园，有自己所乐于安享的世界，朝自己所乐于追求的方向去追求，就是你一生的道路。
        4、失败是什么?没有什么，只是更走近成功一步;成功是什么?就是走过了所有通向失败的路，只剩下一条路，那就是成功的路
        5、时光荏苒，我已在人生旅途上度过了十七个春秋，已迈入了风华正茂的青春年月，一个应用努力拼搏去点缀的青春年月。
        6、人生就像一杯没有加糖的咖啡，喝起来是苦涩的，回味起来却有久久不会退去的余香。
    </div>
</body>
</html>
posted @   victoria6013  阅读(3)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaWeb学习（二）
·  JavaWeb学习（四）
·  JavaWeb-CSS
·  JavaWeb开发-CSS基础
·  JavaWeb--CSS基础
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示