Java Web

【黑马程序员新版JavaWeb基础教程，Java web从入门到企业实战完整版】

6 HTML & CSS


文章目录

  • Java Web
  • 6 HTML & CSS
  • 6.2 CSS
  • 6.2.1 概述
  • 6.2.2 CSS 导入方式
  • 6.2.3 CSS 选择器
  • 6.2.4 CSS 属性


6.2 CSS
6.2.1 概述

CSS 是一门语言，用于控制网页表现。

CSS → Cascading Style Sheet（层叠样式表）。

【举个栗子】

新建模块

javafx css文件目录 javaweb引入css文件_CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

<div>Hello CSS~</div>

</body>
</html>

浏览器效果

javafx css文件目录 javaweb引入css文件_前端_02

6.2.2 CSS 导入方式

css 导入方式其实就是 css 代码和 html 代码的结合方式。

CSS 导入 HTML有三种方式：

  • 内联样式：在标签内部使用style属性，属性值是css属性键值对
<div style="color: red">Hello CSS~</div>

给方式只能作用在这一个标签上，如果其他的标签也想使用同样的样式，那就需要在其他标签上写上相同的样式。复用性太差。

  • 内部样式：定义<style>标签，在标签内部定义css样式
<style type="text/css">
	div{
		color: red;
    }
</style>

这种方式可以做到在该页面中复用。

  • 外部样式：定义link标签，引入外部的css文件
    编写一个css文件。名为：demo.css，内容如下:
div{
	color: red;
}

在html中引入 css 文件。

<link rel="stylesheet"  href="demo.css">

这种方式可以在多个页面进行复用。其他的页面想使用同样的样式，只需要使用 link 标签引入该css文件。

【举个栗子】

02-导入方式.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>


    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>

    <div style="color: red">hello css</div>

    <span>hello css </span>

    <p>hello css</p>
</body>
</html>

demo.css

p{
    color: red;
}

浏览器效果

javafx css文件目录 javaweb引入css文件_前端_03

6.2.3 CSS 选择器

css 选择器就是选取需设置样式的元素（标签）

如：

div {
	color:red;
}

上代码中的 div 就是 css 中的选择器。

【三种选择器(当然不是只有这三种)】

  • 元素选择器
    格式：
元素名称{color: red;}

例子：

div {color:red}  /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
  • id选择器
    格式：
#id属性值{color: red;}

例子：

html代码如下：

<div id="name">hello css2</div>

css代码如下：

#name{color: red;}/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为红色*/
  • 类选择器
    格式：
.class属性值{color: red;}

例子：

html代码如下：

<div class="cls">hello css3</div>

css代码如下：

.cls{color: red;} /*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为红色*/

【举个栗子】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div {
            color: red;
        }

        #name {
            color: blue;
        }

        .cls {
            color: pink;
        }
    </style>


</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>

浏览器效果

javafx css文件目录 javaweb引入css文件_前端_04

6.2.4 CSS 属性

CSS 文档

https://www.w3school.com.cn/cssref/index.asp

javafx css文件目录 javaweb引入css文件_css_05