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

项目代码

零、 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 按照 上右下左 顺时针方向指定*/

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spring Cloud笔记 —— 什么是Spring Cloud？

Spring Cloud笔记 —— 什么是Spring Cloud？

引言&#xff1a; 在写这篇博客之前&#xff0c;其实吧&#xff0c;博主很久之前有过一段时间的Spring Cloud的案例项目开发经验&#xff0c;就是一个案例项目开发而已&#xff0c;也说不上有多高大上&#xff0c;那个时候&#xff0c;我其实也是从众而已罢了&#xff0c;毕竟现…
阅读更多...
Java 设计模式系列：代理模式

Java 设计模式系列：代理模式

文章目录 介绍静态代理基本介绍应用实例静态代理优缺点 动态代理基本介绍JDK 中生成代理对象的 API Cglib 代理基本介绍实现步骤 介绍 1&#xff09;代理模式&#xff1a;为一个对象提供一个替身&#xff0c;以控制对这个对象的访问。即通过代理对象访问目标对象 2&#xff09…
阅读更多...
JOSEF 快速中间继电器 KZJ-4H-L DC220V 导轨安装

JOSEF 快速中间继电器 KZJ-4H-L DC220V 导轨安装

快速中间继电器KZJ-4H-LDC220V导轨安装导轨安装是广泛用于电力系统&#xff0c;能够断货开或开通大负载&#xff0c;并且具有较强的断弧能力&#xff0c;适用于交流50/60Hz。电压24380V,直流电压24280V自动控制电路中以增加保护和控制回路的触点数量与触点容量。 KZJ系列快速中…
阅读更多...
leetcode 209. 长度最小的子数组（优质解法）

leetcode 209. 长度最小的子数组（优质解法）

代码&#xff1a; //时间复杂度 O(N) ,空间复杂度 O(1) class Solution {//采用滑动窗口的方法解决public int minSubArrayLen(int target, int[] nums) {int numsLengthnums.length;int minLengthInteger.MAX_VALUE;int left0;int right0;int sum0;while (right<numsLengt…
阅读更多...
详解原生Spring框架下的方法切入点表达式

详解原生Spring框架下的方法切入点表达式

&#x1f609;&#x1f609; 学习交流群&#xff1a; ✅✅1&#xff1a;这是孙哥suns给大家的福利&#xff01; ✨✨2&#xff1a;我们免费分享Netty、Dubbo、k8s、Mybatis、Spring...应用和源码级别的视频资料 &#x1f96d;&#x1f96d;3&#xff1a;QQ群&#xff1a;583783…
阅读更多...
C++/Qt读写xml文件

C++/Qt读写xml文件

今天介绍C/Qt如何读写xml文件&#xff0c;xml文件一般用于作为配置文件使用。 C C读写xml文件需要借助第三方来实现&#xff0c;比较好用的有tinyxml2和pugixml&#xff0c;对应的网址链接。 tinyxml2 pugixml 以tinyxml2为例&#xff0c;下载后进行解压可以看到以下文件&…
阅读更多...
Python---格式化输出与%百分号----涉及转义符 \ 反斜杠的使用

Python---格式化输出与%百分号----涉及转义符 \ 反斜杠的使用

相关链接Python--格式化输出中的转义符号----\t 制表符&#xff08;空格的&#xff09;和\n&#xff08;换行的&#xff09;_唯元素的博客-CSDN博客 Python---字符串&#xff08;用单、双引号、 三单/双引号定义。反斜杠 \ 转义&#xff0c;单在双内/双在单内 &#xff09;-CS…
阅读更多...
【电路笔记】-串联和并联电阻

【电路笔记】-串联和并联电阻

串联和并联电阻 文章目录 串联和并联电阻1、概述2、串联和并联电阻示例13、串联和并联电阻示例2 电阻器可以无限数量的串联和并联组合连接在一起&#xff0c;形成复杂的电阻电路。 1、概述 在之前的教程中&#xff0c;我们学习了如何将各个电阻器连接在一起以形成串联电阻器网…
阅读更多...
混沌系统在图像加密中的应用（基于哈密顿能量函数的混沌系统构造1.5）

混沌系统在图像加密中的应用（基于哈密顿能量函数的混沌系统构造1.5）

混沌系统在图像加密中的应用&#xff08;基于哈密顿能量函数的混沌系统构造1.5&#xff09; 前言一、自治非哈密顿系统的构造、动态特性分析1.相关理论基础2.两个四维自治非哈密顿系统3.数值分析 python代码 前言 续接混沌系统在图像加密中的应用&#xff08;基于哈密顿能量函…
阅读更多...
重生奇迹MU再生原石

重生奇迹MU再生原石

通过坎特鲁提炼之塔的NPC艾尔菲丝提炼成功就可以可获得再生宝石。 重生奇迹mu里的再生原石的用法&#xff1a; 1、打怪获得再生原石去提炼之塔&#xff08;进入坎特鲁遗址的141188位置的传送台&#xff09;。 2、找到&#xff08;艾儿菲丝&#xff09;把原石提炼成再生宝石。…
阅读更多...
MySQL安全相关——TDE和数据脱敏功能介绍

MySQL安全相关——TDE和数据脱敏功能介绍

MySQL作为一款广泛使用的开源关系型数据库管理系统(RDBMS)&#xff0c;其安全性一直是开发者和企业关注的重点。在MySQL中&#xff0c;有一些与安全相关的功能&#xff0c;其中包括Transparent Data Encryption(TDE)和数据脱敏。本文将对这些功能进行介绍。 一、Transparent Da…
阅读更多...
深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能

深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能

大家好，我是微学AI，今天给大家介绍一下深度学习实战63-利用自适应混合金字塔网络实现人脸皮肤美颜效果，快速部署与实现一键美颜功能。在本文中，我将介绍一种新颖的自适应混合金字塔网络(ABPN)，该网络可以实现对超高分辨率照片的快速局部修饰。该网络主要由两个组件组成：一…
阅读更多...
最简单的梅花吉凶表

最简单的梅花吉凶表

以下是梅花易数吉凶表&#xff0c;使用方式&#xff1a; 随机报2组数字&#xff1a;第1个数除8得余数作为上爻&#xff0c;第2个数除8得余数作为下爻&#xff0c;然后对照以下表格&#xff0c;得到吉凶预测结果。 说明&#xff1a;经过个人不断实践&#xff0c;[大吉转大吉] …
阅读更多...
基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍IIC通信简单介绍掉…
阅读更多...
Android : SQLite 增删改查—简单应用

Android : SQLite 增删改查—简单应用

示例图&#xff1a; 学生实体类 Student.java package com.example.mysqlite.dto;public class Student {public Long id;public String name;public String sex;public int age;public String clazz;public String creatDate;//头像public byte[] logoHead;Overridepublic St…
阅读更多...
分享一个判断曲线的趋势的Demo

分享一个判断曲线的趋势的Demo

需求背景 最近在处理数据&#xff0c;横坐标是时间&#xff0c;纵坐标是价格&#xff0c;需要判断一段时间内&#xff0c;由这些点绘制成的曲线的走势&#xff0c;比如趋势朝上&#xff0c;趋势朝下&#xff0c;水平调整这三种趋势。尝试了不少方法&#xff0c;下面这个效果还…
阅读更多...
以热爱的态度对待生活，就是最自己的温柔

以热爱的态度对待生活，就是最自己的温柔

粉色系拼接款羽绒服 90白鸭绒&#xff0b;连帽立领设计 防风又保暖&#xff0c;柔软蓬松舒适感十足 衣服上加了时尚的字母印花元素 袖口做了魔术贴设计 下摆也做了可调节抽绳 防风保暖五部做到实处哦 宽松版型&#xff0c;很耐穿保暖性又很强 简单大方&#xff0c;搭配…
阅读更多...
Flutter：视频下载案例

Flutter：视频下载案例

前言 最近在研究视频下载&#xff0c;因此打算一边研究一边记录一下。方便以后使用时查看。 使用到的库有&#xff1a; permission_handler 11.1.0 &#xff1a;权限请求 flutter_downloader 1.11.5&#xff1a;文件下载器 path_provider 2.1.1&#xff1a;路径处理 视频…
阅读更多...
基于springboot 图书馆管理系统

基于springboot 图书馆管理系统

qq&#xff08;2829419543&#xff09;获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;springboot 前端&#xff1a;采用vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xf…
阅读更多...
网络编程之套接字

网络编程之套接字

端口 && IP 在学习套接字编程之前&#xff0c;我们必须了解一下前缀知识。首先是IP和端口的作用。 在这之前&#xff0c;我们要明白一件事。那就是把数据从一台主机发送到另一台主机&#xff0c;是目的吗&#xff1f;&#xff1f;&#xff1f;当然不是&#xff01;&a…
阅读更多...
最新文章

Copyright @ 2022~2023