JAVAWeb02-CSS

最新推荐文章于 2024-07-24 21:48:20 发布
最新推荐文章于 2024-07-24 21:48:20 发布
阅读量330 收藏
点赞数
分类专栏： JavaWeb 文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42482333/article/details/130068763
版权

1. CSS

CSS 指的是层叠样式表 (Cascading Style Sheets)

1.1 概述

1.1.1 官方文档

地址: https://www.w3school.com.cn/css/index.asp

1.1.2 为什么需要 CSS

  1. 在没有 CSS 之前，我们想要修改 HTML 元素的样式需要为每个 HTML 元素单独定义样式属性，费心费力。所以 CSS 就出现了。
  2. 使用 CSS 将 HTML 页面的 内容与样式分离提高 web 开发的工作效率(针对前端开发)
  3. CSS 可以让 html 元素(内容) + 样式(CSS)分离，更好的控制页面
    在这里插入图片描述

1.2 CSS 快速入门

应用实例：simple_css.html, 使用 css 完成下面页面

  1. 需求: 创建: simple_css.html 完成如下网页显示
    在这里插入图片描述
<!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>

1.3 CSS 语法

  1. CSS 语法可以分为两部分： (1)选择器 (2)声明
  2. 声明由属性和值组成，多个声明之间用分号分隔
    在这里插入图片描述
  3. 说明：最后一条声明可以不加分号(建议加上)
  4. 一般每行只描述一个属性
  5. CSS 注释：/*注释内容*/, 类似 java
    在这里插入图片描述

1.4 常用样式-字体颜色

1.4.1 介绍

颜色可以写颜色名 比如 green，也可以写 rgb 值 比如 rgb(200,200,200)和十六进制表示值 比如 #708090
在这里插入图片描述
应用实例 color.html:

  1. 修改 color.html, 完成如下页面.
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色</title>
    <style type="text/css">
        /*
            说明:
            颜色可以写颜色名 比如 green，
            也可以写 rgb 值 比如 rgb(200,200,200)
            和十六进制表示值 比如 #708090
            color: rgb(255, 222, 1); //color: #ff7d44; //color: red;
         */
        div {
            /*有三种方式，指定颜色
                1. 英文
                2. 16进制 #ff7d44 [使用最多]
                3. 三原色 rgb(1,1,1)
            */
            color: #ff7d44;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.5 常用样式-边框 border

应用实例：border.html

  1. 修改 border.html, 完成如下页面.
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style type="text/css">
        div {
            /*width: 300px; 具体的像素*/
            width: 50%; /*百分比*/
            height: 100px;
            /*
			*  dashed 是虚线
			*  solid  是实线
			*/
            border: 1px dashed blue;
        }
    </style>
</head>
<body>
<div>hello world!</div>
</body>
</html>

1.6 常用样式-宽度 width/高度 height

宽度/高度像素值：100px； 也可以是百分比值：50%

应用实例:
参考1.5
在这里插入图片描述

1.7 常用样式-背景颜色

应用实例：bg.html

<!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>hello world!</div>
</body>
</html>

1.8 常用样式-字体样式

  1. font-size: 指定大小，可以按照像素大小
  2. font-weight : 指定是否粗体
  3. font-family : 指定类型

应用实例 font-style.html
在这里插入图片描述

<!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>hello world!</div>
</body>
</html>

1.9 常用样式-DIV 居中

应用实例:div-center.html
需求，修改 div-center.html, div 居中效果

<!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>hello world</div>
</body>
</html>

1.10 常用样式-文本居中

应用实例 text-center.html

需求，修改 text-center.html , 显示如下网页
在这里插入图片描述

<!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>hello world</div>
</body>
</html>

1.11 常用样式-超链接去下划线

应用实例 link_none.html

需求，修改 link_none.html, div 居中效果
在这里插入图片描述

<!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>

1.12 常用样式-表格细线

应用实例 table-collapse.html

需求，修改 table-collapse.html, 实现如下效果
在这里插入图片描述

<!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>

1.13 常用样式-列表去修饰

应用实例：ul-none.html

需求，修改 ul_none.html, 完成如下网页显示
在这里插入图片描述

<!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>

1.14 CSS 使用三种方式

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

应用实例

修改 1.use-css-style.html , 看使用效果
在这里插入图片描述

<!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>

问题分析:

  • 标签多了。样式多了，代码量庞大
  • 可读性差
  • CSS 代码没有复用性

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

应用实例

修改 2.use-css-style.html , 看使用效果
在这里插入图片描述

<!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>

问题分析：

  • 只能在同一页面内复用代码维护不方便，
  • 实际项目中会有很多页面，需要到对应页面去修改。工作量大

在这里插入图片描述

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

应用实例：

创建 test.css 和 修改 3.use-css-style.html

my.css

div {
    width: 200px;
    height: 100px;
    background-color: red;
}
span {
    border: 2px dashed blue;
}

3.use-css-style.html

<!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>
  • 第三种方式是我们推荐使用的

1.15 CSS 选择器

1.15.1 CSS 元素选择器

  1. 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。
  2. CSS 元素/标签选择器通常是某个 HTML 元素， 比如 p、h1、a div 等
  3. 比如:
    在这里插入图片描述

应用实例:

修改 element-selector.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素选择器</title>
    <!-- 
        说明：元素选择器会修饰所有的对应的元素
    -->
    <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>

1.15.2 ID 选择器

  1. id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
  2. id 选择器以 “#” 来定义。
  3. 比如:
    在这里插入图片描述

应用实例：

修改 id-selector.html, 演示使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id 选择器</title>
    <!-- 
        解读
        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>

1.15.3 class 选择器（类选择器）

  1. class 类选择器，可以通过 class 属性选择去使用这个样式
  2. 基本语法
    在这里插入图片描述

应用实例 :

修改 class-selector.html,演示如何使用
在这里插入图片描述

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

1.15.4 组合选择器

  1. 组合选择器可以让多个选择器共用同一个 css 样式代码
  2. 语法格式
    在这里插入图片描述

应用实例：

修改 all-selector.html, 演示如何使用
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*
            组合选择器的基本语法:
            选择器 1，选择器 2，选择器 n{ 属性：值; }
         */
        .class01,#id01 {
            width: 300px;
            height: 100px;
            border: 2px solid red;
        }
    </style>
</head>
<body>
<div class="class01">hello</div>
<p id="id01">hello, world~</p>
</body>

</html>

1.15.5 优先级说明

行内样式 > ID 选择器 > class 选择器 > 元素选择器

1.16 CSS 课后练习题

测试链接：https://www.w3school.com.cn/quiz/quiz.asp?quiz=css
错题：
在这里插入图片描述
在这里插入图片描述

程序员 DELTA
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb学习 - css样式
qq_45181415的博客
01-14 1095
CSS 概念： CSS (层叠样式表——Cascading Style Sheets，缩写为 CSS），简单的说，它是用于设置和布局网页的计算机语言.它主要的作用就是对HTML页面进行美化。 学习思路：选择器【用于找到标签】 和 属性【用于美化样式】 css引入html的三种方式： 引入方式 1.1 内联样式 了解,几乎不用,维护艰难 内联样式是CSS声明在元素的style属性中，仅影响一个元素： 格式： <标签 style="属性名:属性值; 属性名:属性值;">内容</标签&g
02-javaWeb-css$js.7z
07-02
css:渲染  和html元素的整合★ 选择器★ 属性(了解) 字体 文本 列表 背景 尺寸 浮动 分类 框模型(理解) 扩展: 颜色取值 javascript JS的输出 js和html整合 js中变量声明 js的数据类型 js:事件...
JavaWeb---CSS
weixin_65440201的博客
07-28 646
1.CSS：页面美化和布局控制 1. 1概念： Cascading Style Sheets 层叠样式表 1.2好处： 1.3CSS的使用：CSS与html结合方式 1. 内联样式 2. 内部样式 3. 外部样式 1.4css语法： 1.5选择器：筛选具有相似特征的元素 1. 5.1基础选择器： 1.5.2扩展选择器： 1.6 属性...
JavaWeb --- CSS
乌云的博客
02-28 730
CSS是「层样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
javaweb ---- CSS
m0_46523928的博客
06-01 128
HTML&CSS的理解概述： HTML&CSS的使用概述: HTML&CSS的测试代码：
尚硅谷 JavaWeb笔记 --- CSS
梦想也许遥不可及，但重要的是追梦的过程，用博客记录自己的成长，记录自己一步一步向上攀登的印记
02-14 515
文章目录CSS技术css技术介绍css语法规则:CSS 和 HTML 的结合方式第一种第二种第三种CSS选择器标签名选择器id选择器class选择器(类选择器)组合选择器 CSS技术 css技术介绍 CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 它可以使得页面更加的美观 css语法规则: 选择器 ：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。 属性 (property) 是你要改变的样式名，并且每个属性...
JavaWeb - CSS
qq_46120393的博客
05-25 531
1. 什么是CSS 2. CSS的基本语法规范 3. CSS的引入方式 4. 常用选择器     标签选择器     类选择器     id选择器     通配符选择器     后代选择器     子选择器     并集选择器     伪类选择器 5. 字体属性     字体样式     字体大小     字体粗细     字体倾斜 6. 文本属性     文本颜色     文本对齐     文本装饰     文本缩进     行高 7. 背景属性     背景颜色     背景图片     背景平铺   
Javaweb--CSS
2301_80462427的博客
03-16 623
一：概述一：概述CSS （Cascading Style Sheet（层叠样式表））是一门语言，用于控制网页表现。W3C标准规定了网页是由以下组成：结构：HTML表现：CSS行为：JavaScript二：CSS导入方式。
JavaWeb-CSS
qq_53098203的博客
12-09 125
JavaWeb-CSS
javaweb-css
coke20的博客
03-13 78
css的作用就把html的文字通过style的方式直接把它样式固定。有div划分区域，然后再在每个区域里设置各种东西。
JavaWeb--------CSS基础
詹煜彪9527
03-06 7721
一. 概念 CSS 指层叠样式表（Cascading Style Sheets）。使用 CSS 控制整个站点的样式和布局，帮助我们实行表现与结构分离的开发模式。CSS 是一种用来表现HTML或XML的标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。 语法和规则：CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。其中，CSS声明总是以分号(;)结束，声明组以大括号...
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-CSS语法介绍.avi
JavaWeb新版教程-html&CSS-L和CSS-css常用样式.avi
05-18
JavaWeb新版教程-html&CSS-L和CSS-css常用样式.avi
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计-附件资源
03-05
JavaWeb前端-CSS定位与DIV布局实战-新疆行知书网页设计-附件资源
CSS实现表格无限轮播
像鱼的博客
07-24 328
在React中，用CSS实现表格无线轮播
CSS学习笔记
ngczx的博客
07-23 671
CSS学习笔记
[css3] 如何设置边框颜色渐变
qq_14993591的博客
07-22 850
【代码】[css3] 如何设置边框颜色渐变。
CSS3 scale 适配
最新发布
m0_54007573的博客
07-24 507
CSS3 scale 适配
javaweb项目css样式失效
05-30
可能是由于以下几个原因导致CSS样式失效： 1. CSS文件路径错误：请确保你的CSS文件路径正确，否则浏览器无法加载CSS文件。 2. CSS文件命名错误：请确保你的CSS文件名正确，如果文件名不正确，浏览器将无法加载CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值