【Java Web学习笔记】 2 - CSS入门

news2025/2/28 21:23:34

项目代码

零、 CSS引出

CSS 教程 官方教学文档

1.在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，费心费力。所以CSS就出现了。

2.使用CSS将HTML页面的内容与样式分离提高web开发的工作效率（针对前端开发）

3.CSS可以让html元素 + 样式 分离

一、CSS快速入门

1.引入案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 快速入门</title>
    <!--
        1. 在head标签内，出现了 <style type="text/css"></style>
        2. 表示要写css内容
        3. div{} 表示对div元素进行样式的指定, div就是一个选择器(元素/标签选择器)
        4. width: 300px(属性); 表示对div样式的具体指定, 可以有多个
        5. 如果有多个，使用; 分开即可, 最后属性可以没有; 但是建议写上
        6. 当运行页面时，div就会被 div{} 渲染，修饰
        7. 小经验：在调试css时，可以通过修改颜色，或者大小来看
        8. css的注释是 /* */ ,快捷键 ctrl+/
    -->
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<!--先使用传统的方法-->
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<div>hello, 天津</div>
<br/>
<div>hello, 深圳</div>
<br/>
</body>
</html>

2.基本语法

1. CSS语法可以分为两部分: (1)选择器 (2)声明

2.声明由属性和值组成，多个声明之间用分号分隔选择器

3.最后一条声明可以不加分号(建议加上)

4.一般每行只描述一个属性

5. CSS注释: /*注释内容*/

二、CSS常用样式

1.颜色color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <!-- 为了讲课方便，我们就在这里写css样式 -->
    <style type="text/css">
        /*
            说明:
            颜色可以写颜色名 比如 green，
            也可以写 rgb 值 比如 rgb(200,200,200)
            和十六进制表示值 比如 #708090
            color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
         */
        div {
            /*有三种方式，指定颜色
                1. 英文  //color: red
                2. 16进制 #ff7d44 [使用最多]  //color: #ff7d44;
                3. 三原色 rgb(1,1,1)  //color: rgb(255, 222, 1);
            */
            color: rgb(255, 222, 1);
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

2.边框border widht height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div {
            /*width: 300px; 具体的像素*/
            width: 50%; /*百分比*/
            height: 100px;
            border: 1px dashed blue;
        }
    </style>
     
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

3.背景颜色background-color

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: #ff7d44;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

4.字体样式font-family

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 微软雅黑;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

5.div居中 margin-left/right:auto;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

6.文本居中text-align:center;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本居中显示</title>
    <style type="text/css">
        /*
            说明:
            1. font-size: 指定大小，可以按照像素大小
            2. font-weight : 指定是否是粗体
            3. font-family : 指定字体类型
            4. margin-left margin-right 如果设置为auto, 表示左右居中
            5. 表示文本居中
         */
        div {
            border: 1px solid black;
            width: 300px;
            font-size: 40px;
            font-weight: bold;
            font-family: 华文新魏;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

7.超链接去下划线text-decoration:none;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接去掉下划线</title>
    <!--
        1. decoration 修饰
    -->
    <style type="text/css">
        a {
            text-decoration: none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击到百度</a>
</body>
</html>

8.表格细线border-collapse:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度： width
            设置边框： 给 td, th 指定即可 border: 1px solid black;

            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align=center colspan="3">星期一菜谱</td>
    </tr>

    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>

</body>

</html>

9.列表去修饰list-style:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表去修饰</title>
    <style type="text/css">
        ul {
            /*说明:list-style:none表示去掉默认的修饰*/
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>西游记</li>
    <li>水浒传</li>
</ul>
</body>
</html>

三、CSS的三种使用方式

方式1:在标签的style属性上设置CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在标签的 style 属性上设置CSS样式</title>
</head>
<body>
<div style="width: 300px;height: 100px;background-color: red">hello, 北京</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 上海</div>
<br/>
<div style="width: 300px;height: 100px;background-color: red">hello, 天津</div>
<br/>
</body>
</html>

方式2:在head标签中，使用style标签来定义需要的CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在 head 标签中，使用 style 标签来定义需要的 CSS 样式</title>
    <style type="text/css">
        div {
            width: 300px;
            height: 100px;
            background-color: beige;
        }
        span {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div>hello, 北京</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

方式3:把CSS样式写成单独的CSS文件，再通过link标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入外部的css文件</title>
    <!--
        1. rel : relation 关联
        2. href 表示要引入的css文件的位置，可以是web的完整路径
        3. type="text/css" 可以有，也可以不写
        4. 推荐使用第3种
    -->
    <link rel="stylesheet" href="./css/my.css" />
</head>
<body>
<div>hello, 北京~</div>
<br/>
<div>hello, 上海</div>
<br/>
<span>hello, span</span>
</body>
</html>

四、CSS选择器

1.元素选择器（作用全部）

1.最常见的CSS选择器是元素选择器。换句话说，文档的元系就是最基本的选择器。

2. CSS元素/标签选择器通常是某个HTML元素，比如p、 h1、a等

3.比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!-- 为了讲课方便，我们就在这里写css样式
        说明：元素选择器会修饰所有的对应的元素
    -->
    <style type="text/css">
        h1{
            color: beige;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
<h1>韩顺平教育</h1>
<h1>韩顺平教育2</h1>
<h1>韩顺平教育3</h1>
<p>hello, world~</p>
</body>
</html>

2.ID选择器（作用一个）

1. id选择器可以为标有特定id的HTML元素指定特定的样式。

2. id选择器以"#"来定义。

3.比如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id 选择器</title>
    <!-- 为了讲课方便，我们就在这里写css样式
        1. 使用id选择器，需要先在要修饰元素指定id属性, id值是程序员自己指定
        2. id是唯一的，不能重复
        3. 在<style> 标签中指定id选择器时，前面需要有 #id值
    -->
    <style type="text/css">
        #hsp1 {
            color: gold;
        }
        #css2 {
            color: green;
        }
    </style>
</head>
<body>
<h1 id="hsp1">韩顺平教育</h1>
<p id="css2">hello, world~</p>
</body>
</html>

3.class选择器（作用部分）

1. class类选择器，可以通过class属性选择去使用这个样式

2.基本语法

三个里面用两个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <!-- 为了讲课方便，我们就在这里写css样式
    1. 使用class选择器，需要在被修饰的元素上，设置class属性,属性值程序员指定
    2. class属性的值，可以重复
    3. 需要在 <style></style> 指定类选择器的具体样式, 前面需要是 .类选择器名称
    -->
    <style type="text/css">
        .css1 {
            color: red;
        }
        .css2 {
            color: sandybrown;
        }
    </style>
</head>
<body>
<div class="css1">韩顺平教育</div>
<div class="css1">韩顺平教育8</div>
<p class="css2">hello, world~</p>
</body>
</html>

4.组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 为了讲课方便，我们就在这里写css样式 -->
    <style type="text/css">
        /*
            组合选择器的基本语法:
            选择器 1，选择器 2，选择器 n{ 属性：值; }
         */
        .class01,#id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="class01">韩顺平教育</div>
<p id="id01">hello, world~</p>
</body>

</html>

5.优先级说明

优先级 行内样式 > id选择器 > class选择器 > 元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级说明</title>
    <!--
        1. 优先级 行内样式 > id选择器 > class选择器 > 元素选择器
    -->
    <style type="text/css">
        .cls1 {
            color: green;
        }
        div {
            color: brown;
        }
        #id1 {
            color: yellow;
        }
        p {
            width: 400px;
            height: 100px;
            border: solid red;
            /*border-width 按照 上右下左 顺时针方向指定*/
            border-width: 20px 2px 8px 8px;
        }
    </style>
</head>
<body>
<h1>选择器的优先级说明</h1>
<div style="color: red" id="id1" class="cls1">韩顺平教育</div>
<p>p段落</p>
</body>
</html>

五、课堂练习

CSS 测验

 /*border-width 按照 上右下左 顺时针方向指定*/

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1278150.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于springboot,vue高校图书馆管理系统

基于springboot,vue高校图书馆管理系统

开发工具&#xff1a;IDEA 服务器&#xff1a;Tomcat9.0&#xff0c; jdk1.8 项目构建&#xff1a;maven 数据库&#xff1a;mysql5.7 系统分前后台&#xff0c;项目采用前后端分离 前端技术&#xff1a;vueelementUI 服务端技术&#xff1a;springbootmybatisredis 本项…
阅读更多...
【送书活动三期】解决docker服务假死问题

【送书活动三期】解决docker服务假死问题

工作中使用docker-compose部署容器&#xff0c;有时候会出现使用docker-compose stop或docker-compose down命令想停掉容器&#xff0c;但是依然无法停止或者一直卡顿在停止中的阶段&#xff0c;这种问题很让人头疼啊&#xff01; 目录 问题描述问题排查问题解决终极杀招-最粗暴…
阅读更多...
会声会影2023序列号免费永久序列号和激活码下载使用（附破解补丁）

会声会影2023序列号免费永久序列号和激活码下载使用（附破解补丁）

前言 会声会影2023破解版免费下载是经过修改的视频剪辑软件&#xff0c;它能够免费为您提供很多功能。会声会影2023免费下载提供超过 1500 种独特的效果&#xff0c;可让您提升自我。会声会影破解版是用于是制作独一无二的视频的最强大、功能最全的软件。 它是一个简单而快速的…
阅读更多...
Socket 编程

Socket 编程

1&#xff1a;针对 TCP 应该如何 Socket 编程&#xff1f; 服务端和客户端初始化 socket&#xff0c;得到文件描述符&#xff1b; 服务端调用 bind&#xff0c;将 socket 绑定在指定的 IP 地址和端口; 服务端调用 listen&#xff0c;进行监听&#xff1b; 服务端调用 accept&am…
阅读更多...
【大模型】更强的 ChatGLM3-6B 来了，开源可商用

【大模型】更强的 ChatGLM3-6B 来了，开源可商用

【大模型】更强的 ChatGLM3-6B 来了&#xff0c;开源可商用 简介ChatGLM3-6B 环境配置环境搭建安装依赖 代码及模型权重拉取拉取 ChatGLM3-6B拉取 ChatGLM3-6B 模型权重及代码 终端测试网页测试安装 gradio加载模型并启动服务 参考 简介 ChatGLM3-6B ChatGLM3-6B 是 ChatGLM …
阅读更多...
C语言-指针_02

C语言-指针_02

指针-02 1. 指针的指针 概念&#xff1a;指针变量中存储的是指针的地址&#xff0c;又名 二维指针 语法&#xff1a; 数据类型 **p;示例&#xff1a; #include <stdio.h> int main(int argc, char const *argv[]) {int num 10;int *p1 &num;int **p2 &p1…
阅读更多...
最新发布 Spring Boot 3.2.0 新特性和改进

最新发布 Spring Boot 3.2.0 新特性和改进

一、Spring Boot 简介 Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。这个框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 以下是Spring Boot的一些主要特点&#xf…
阅读更多...
159.库存管理（TOPk问题！）

159.库存管理（TOPk问题！）

思路&#xff1a;也是tok的问题&#xff0c;与上篇博客思路一样&#xff0c;只不过是求前k个小的元素&#xff01; 基于快排分块思路的代码如下&#xff1a; class Solution { public:int getkey(vector<int>&nums,int left,int right){int rrand();return nums[r%…
阅读更多...
Ext4文件系统解析（一）

Ext4文件系统解析（一）

1、前言 熟悉Linux操作系统的都应该或多或少的了解或者使用过Ext4文件系统。 接下来&#xff0c;会简单介绍Ext4文件系统的一些特性和工作原理。 2、常用概念 在介绍Ext文件系统之前&#xff0c;先简单描述一些相关概念。 块(Block)&#xff1a;Ext文件系统存储分配的基本单…
阅读更多...
第一百八十七回 DropdownButton组件

第一百八十七回 DropdownButton组件

文章目录 1. 概念介绍2. 使用方法2.1 DropdownButton2.2 DropdownMenuItem 3. 示例代码4. 内容总结5. 经验分享 我们在 上一章回中介绍了"DropdownMenu组件"相关的内容&#xff0c;本章回中将介绍 DropdownButton组件.闲话休提&#xff0c;让我们一起Talk Flutter吧…
阅读更多...
STM32DAC输出可调电压、三角波、正弦波

STM32DAC输出可调电压、三角波、正弦波

STM32DAC输出可调电压、三角波、正弦波 DAC简介输出可调电压输出正弦波输出三角波 本期内容我们将学习stm32DAC的原理和使用方法 DAC简介 DAC&#xff0c;全称&#xff1a;Digital-to-Analog Converter&#xff0c;指数字/模拟转换器。可以将数字量转换为模拟量进行输出&#…
阅读更多...
FL Studio21.2汉化永久中文语言包

FL Studio21.2汉化永久中文语言包

FL Studio21.2这款软件在国内被广泛使用&#xff0c;因此又被称为"水果"。它提供音符编辑器&#xff0c;可以针对作曲者的要求编辑出不同音律的节奏&#xff0c;例如鼓、镲、锣、钢琴、笛、大提琴、筝、扬琴等等任何乐器的节奏律动。此外&#xff0c;它还提供了方便快…
阅读更多...
2023年12月03日新闻简报（国内国际）

2023年12月03日新闻简报（国内国际）

新闻简报 每天三分钟&#xff0c;朝闻天下事。今天是&#xff1a;2023年12月03日&#xff0c;星期日&#xff0c;农历十月廿一&#xff0c;祝工作愉快&#xff0c;身体健康&#xff0c;生活喜乐&#xff1a; &#x1f449;&#x1f449;国内新闻 1、1日凌晨&#xff0c;四川…
阅读更多...
蓝桥杯day04——采购方案

蓝桥杯day04——采购方案

1.题目 小力将 N 个零件的报价存于数组 nums。小力预算为 target&#xff0c;假定小力仅购买两个零件&#xff0c;要求购买零件的花费不超过预算&#xff0c;请问他有多少种采购方案。 注意&#xff1a;答案需要以 1e9 7 (1000000007) 为底取模&#xff0c;如&#xff1a;计…
阅读更多...
基于c#+mysql+winform学生成绩管理系统-实践作业

基于c#+mysql+winform学生成绩管理系统-实践作业

基于c#mysqlwinform学生成绩管理系统-实践作业 一、系统介绍二、功能展示四、其它1.其他系统实现五.获取源码 一、系统介绍 分老师与学生两个界面&#xff1b; 老师能查看学生信息并评价&#xff0c;添加&#xff0c;删除学生&#xff1b; 老师能查看学生成绩并修改&#xff0…
阅读更多...
【PTA-C语言】实验三-循环结构I

【PTA-C语言】实验三-循环结构I

如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 实验三-循环结构I 7-1 求交错序列前N项和 &#xff08;分数 15&#xff09;7-2 寻找250&#xff08;分数 15&#xff09;7-3 最大公约数和最小公倍数&#xff08;分数 15&#xff09;7-4 统计字符&#xff0…
阅读更多...
css中元素水平居中的方式

css中元素水平居中的方式

文章目录 前言水平居中&#xff1a;垂直居中方法一: text-align: centerdisplay: table-cell方法二:父元素静态定位子元素通过相对定位来实现方法三:通过静态和相对定位方法四 css图片居中用text-align:center无效怎么回事&#xff1f;如何让图片在DIV中水平和垂直两个方向都居…
阅读更多...
C语言中的格式化输出符号：%d %c %p %x等

C语言中的格式化输出符号：%d %c %p %x等

文章目录 概览%d%c%d和%c的区别%p%x %X输出浮点数参考 概览 C语言中的格式化输出符号有很多&#xff0c;以下是一些常见的&#xff1a; %d 或 %i&#xff1a;用于输出十进制整数。 %u&#xff1a;用于输出无符号十进制整数。 %f&#xff1a;用于输出浮点数。 %s&#xff1a;用…
阅读更多...
mac修改默认shell为bash

mac修改默认shell为bash

1. 打开系统偏好设置 2. 点击用户群组 3. 按住ctrl&#xff0c;点击用户名 4. 点击高级选项&#xff0c;修改登录shell 参考&#xff1a;在 Mac 上将 zsh 用作默认 Shell - 官方 Apple 支持 (中国)
阅读更多...
AI 绘画 | Stable Diffusion 电商模特

AI 绘画 | Stable Diffusion 电商模特

前言 上一篇文章讲到如何给人物更换背景和服装。今天主要讲电商模特，就是服装电商们的固定服装产品图片如何变成真人模特穿上的固定服装产品效果图。如果你掌握了 《AI 绘画 | Stable Diffusion 人物 换背景|换服装》，这篇文章对你来说，上手会更轻松。 教程 提取服装蒙版…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023