Java Web——01HTML和CSS

其他 2021-01-29 10:16:10 阅读次数: 0

文章目录

HTML和CSS

HTML

1、B/S软件的结构 （Browser Server）

在这里插入图片描述

2、前端的开发流程

在这里插入图片描述

3、网页的组成部分

页面是由三部分组成的，分别是内容（结构）、表现、行为。

  • 内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容，我们使用html技术来展示。
  • 表现，指的是这些内容在页面上的展示形式。比如说，布局，颜色，大小等等。一般使用CSS技术实现。
  • 行为，指的是页面中元素与输入设备交互的相应。一般使用JavaScript技术实现。

4、HTML简介

Hyper Text Markup Language （超文本标记语言）简写：HTML
HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

5、创建HTML文件

1.创建一个web工程（静态的web工作）
在这里插入图片描述
我这里用2019.3版本运行，新建一个static web文件
在这里插入图片描述
新建一个html标签
在这里插入图片描述
右侧选择浏览器运行
在这里插入图片描述
在这里插入图片描述

运行界面如下：
在这里插入图片描述
注：Java文件是需要先编译，再由java虚拟机跑起来。但HTML文件不需要编译，直接由浏览器进行解析执行。

6、html文件的书写规范

<!DOCTYPE html> <!--约束，声明--->
<html lang="zh_CN"><!--html标签表示html的开始 lang=“zh_CN”表示中文， html标签中一般分为两部分，分别是：head和body   -->
<head> <!-- 表示头部文件信息，一般包含三部分：内容，title标签，css样式，js代码   -->
    <meta charset="UTF-8"> <!--  表示当前页面使用UTF-8字符集  -->
    <title>Hello，world</title> <!--表示标题-->
</head>
<body> <!--body标签是整个html页面显示的主体内容-->
    hello，world    
</body>
</html>
  • HTML注释
    快捷键：
    ctrl+shift+/ 在字段后注释
    ctrl+/ 将整行字段注释

7、HTML标签介绍

  1. 标签的格式：
    <标签名>封装的数据</标签名>

  2. 标签名大小写不敏感。

  3. 标签拥有自己的属性

    • 分为基本属性：bgcolor = “green” //</body bgcolor = “green”> 可以修搞简单的样式效果
    • 事件属性：onclick = “alert(‘你好！’);” 可以直接设置事件响应后的代码。

  4. 标签又分为，单标签和双标签。

    • 单标签格式：<标签名/> 如：br换行 hr水平线
    • 双标签格式：<标签名>…封装的数据…</标签名>
      在这里插入图片描述
标签的语法：
<!-- ①标签不能交叉嵌套 -->
正确：<div><span>早安，尚硅谷</span></div>
错误：<div><span>早安，尚硅谷</div></span>
<hr />
<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<div>早安，尚硅谷</div>
错误：<div>早安，尚硅谷
<hr />
<!-- ii.没有文本内容的标签： -->
正确：<br />
错误：<br>
<hr />
<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，尚硅谷</font>
错误：<font color=blue>早安，尚硅谷</font>
错误：<font color>早安，尚硅谷</font>
<hr />
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 --> <br/>
错误：<!-- <!-- 这是错误的 html 注释 --> -->
<hr />

注意事项：
1.html 代码不是很严谨。有时候标签不闭合，也不会报错。

8.常用标签介绍

8.1 font字体标签

定义和用法：

  • font 标签是字体标签,它可以用来修改文本的字体,颜色,大小(尺寸)
    • color 属性修改颜色（rgb(x,x,x) 或 #xxxxxx 或 colorname ）
    • face 属性修改字体（字体名称列表）
    • size 属性修改文本大小（1到7）
<font color="red" face="宋体" size="5">字体标签</font>

8.2 特殊标签

在这里插入图片描述
其他常用的特殊字符：
在这里插入图片描述

8.3 标题标签 < h1> - < h6>

  • 定义和用法：
    < h1> - < h6> 标签可定义标题。< h1> 定义最大的标题。< h6> 定义最小的标题。
    由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
  • 可选属性：
    • align规定标题中文本的排列
      • lift 左对齐(默认)
      • center居中
      • right 右对齐

8.4 超链接 a标签

定义和用法

< a> 标签可定义锚。一个锚有两种用法：

  • 通过使用 href 属性，创建一个到另外一个文档的链接
  • 通过使用 name 或 id 属性，创建一个文档内部的书签
  • target 属性 在何处打开目标 URL。
    • _blank - 在一个新的未命名的窗口载入文档
    • _parent - 把文档载入父窗口或包含了超链接引用的框架的框架集
    • _self - 在相同的框架或窗口中载入目标文档
    • _top - 把文档载入包含该超链接的窗口,取代任何当前正在窗口中显示的框架

注释：被链接的页面通常被显示在当前的浏览器窗口中，除非您规定了其他的 target。

8.5 列表标签 ul ol il 用法

分为无序标签和有序标签：

  • ul 无序列表标签
<ul>
	<li>Coffee</li>
	<li>Tea</li>
</ul>

在这里插入图片描述

  • ol 有序列表标签
<ol>
    <li>Coffee</li>
    <li>Tea</li>
</ol>

在这里插入图片描述
li标签
定义和用法
< li> 标签定义了列表项目。< li> 标签可用在有序列表 (< ol>) 和无序列表 (< ul>) 中。

8.6 img标签

定义和用法

  • img 标签是图片标签,用来显示图片
    • src 属性可以设置图片的路径
    • width 属性设置图片的宽度
    • height 属性设置图片的高度
    • border 属性设置图片边框大小
    • alt 属性设置当指定路径找不到图片时,用来代替显示的文本内容

在 JavaSE 中路径也分为相对路径和绝对路径.

  • 相对路径:从工程名开始算
  • 绝对路径:盘符:/目录/文件名

在 web 中路径分为相对路径和绝对路径两种

  • 相对路径:
    . 表示当前文件所在的目录
    … 表示当前文件所在的上一级目录
    文件名 表示当前文件所在目录的文件,相当于 ./文件名 ./ 可以省略
  • 绝对路径:
    正确格式是: http://ip:port/工程名/资源路径
    错误格式是: 盘符:/目录/文件名

在这里插入图片描述

8.7 表格标签 table tr th td

定义和用法

  • < table> 标签可定义表格。在 < table> 标签内部，你可以放置表格的标题、表格行、表格列、表格单元以及其他的表格。
    在这里插入图片描述

  • < tr> 在表格中定义一行。
    在这里插入图片描述

  • < th>定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体。
    在这里插入图片描述

  • < td> 定义表格中的一个单元格
    在这里插入图片描述

<body>
<table align="center" border="1" width="300" height="300" cellspacing="0">
    <tr>
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>

在这里插入图片描述

8.8 跨行跨列表格

定义和用法

  • colspan 属性设置跨列
  • rowspan 属性设置跨行
<body>
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
    </tr>
</table>
</body>

在这里插入图片描述

8.9 iframe框架标签

  • ifarme 标签它可以在一个 html 页面上,打开一个小窗口,去加载一个单独的页面.
    • ifarme 和 a 标签组合使用的步骤:
      1 在 iframe 标签中使用 name 属性定义一个名称
      2 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
      在这里插入图片描述

8.10 表单标签

定义和用法

  • form 元素可为用户输入创建表单。
    表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。
    在这里插入图片描述

  • form标签就是表单

      文件输入框 		input type = text     value设置默认显示内容
  密码输入框		input type = password   value设置默认显示内容
  单选框			input type = radio   name属性可以对其进行分组 checked="checked"表示默认选中
  重置按钮		input type = reset   value 属性修改按钮上的文本
  提交按钮		input type = submit   value 属性修改按钮上的文本
  按钮			input type = button   value 属性修改按钮上的文本
  文件上传域		input type = file 
  隐藏域			input type = hidden  当我们需要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）
     
     select 标签是下拉列表框
     option 标签是下拉列表框中的选项  selected="selected" 设置默认选中
   
     textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
         rows 属性设置可以显示几行的高度
         cols 属性设置每行可以显示几个字符宽度

<body>
	<form>
	用户名称：<input type="text" value="默认值"/><br/>
	用户密码：<input type="password" value="abc"/><br/>
	确认密码：<input type="password" value="abc"/><br/>
	性别：<input type="radio" name="sex"/>男
		 <input type="radio" name="sex" checked="checked" />女<br/>
	兴趣爱好：<input type="checkbox"/> C
             <input type="checkbox"/> C++
             <input type="checkbox"/> Java
             <input type="checkbox"/> JavaScript
	国籍：<select>
		     <option>---请选择国籍---</option>
             <option selected="selected">中国</option>
             <option>美国</option>
             <option>韩国</option>
	</select><br/>
	自我评价：<textarea rows="10" cols="20">爱你呦</textarea>
		<input type="reset" /> <!--重置按钮-->
    	<input type="submit" /> <!--提交按钮-->
	</form>
</body>

表单格式化后：

<body>
    <!--
        需求 1:创建一个个人信息注册的表单界面。包含用户名，密码，确认密码。性别（单选），
        兴趣爱好（多选），国籍（下拉列表）。
        隐藏域，自我评价（多行文本域）。重置，提交。

        form标签就是表单
            input type = text 是文件输入框    value设置默认显示内容
            input type = password 是密码输入框  value设置默认显示内容
            input type = radio 单选框  name属性可以对其进行分组 checked="checked"表示默认选中
            input type = reset 重置按钮  value 属性修改按钮上的文本
            input type = submit 提交按钮  value 属性修改按钮上的文本
            input type = button 按钮  value 属性修改按钮上的文本
            input type = file 文件上传域
            input type = hidden 隐藏域 当我们需要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候同时发送给服务器）

            select 标签是下拉列表框
            option 标签是下拉列表框中的选项  selected="selected" 设置默认选中

            textarea 表示多行文本输入框 (起始标签和结束标签中的内容是默认值)
                rows 属性设置可以显示几行的高度
                cols 属性设置每行可以显示几个字符宽度
    -->
    <form>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" value="abc"/>
                </td>
            </tr>
            <tr>
                <td> 确认密码：</td>
                <td>
                    <input type="password" value="abc"/>
                </td>
            </tr>
            <tr>
                <td> 性别：</td>
                <td>
                    <input type="radio" name="sex" checked="checked"/>男
                    <input type="radio" name="sex"/>女
                </td>
            </tr>
            <tr>
                <td> 兴趣爱好:</td>
                <td>
                    <input type="checkbox"/> C
                    <input type="checkbox"/> C++
                    <input type="checkbox"/> Java
                    <input type="checkbox"/> JavaScript
                </td>
            </tr>
            <tr>
                <td>国籍: </td>
                <td>
                    <select>
                        <option>---请选择国籍---</option>
                        <option selected="selected">中国</option>
                        <option>美国</option>
                        <option>韩国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td> 自我评价：</td>
                <td>
                    <textarea rows="10" cols="20">爱你呦</textarea>
                </td>
            </tr>
            <tr>
                <td>  <input type="reset" /> <!--重置按钮--> </td>
                <td align="center">  <input type="submit" /> <!--提交按钮--></td>
            </tr>
        </table>
<!--            <input type="button"/>-->
<!--            <input type="file" />-->
    </form>
</body>

在这里插入图片描述

我们需要接受到里面填写的数值：

  • 表单提交的时候，数据没有发送给服务器的三种情况：
    1.表单项没有name属性
    2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
    3.表单项不在提交的form标签中

  • GET请求的特点是：
    1.浏览器地址栏中地址是：action属性[+?+请求参数]
    请求参数的格式是：name=value&name=value
    2.不安全
    3.它有数据长度的限制（非ASCII或者长度超过100个需要用post）

  • POST请求的特点是：
    1.浏览器地址栏中只有action属性值
    2.相对于GET请求更安全
    3.理论上没有数据长度的限制

修改后：

<body>
    <!--
      form标签是表单标签
        action 属性设置提交的服务器地址
        method 属性设置提交的方式(默认值)

    表单提交的时候，数据没有发送给服务器的三种情况：
        1.表单项没有name属性
        2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
        3.表单项不在提交的form标签中

    GET请求的特点是：
        1.浏览器地址栏中地址是：action属性[+?+请求参数]
            请求参数的格式是：name=value&name=value
        2.不安全
        3.它有数据长度的限制（非ASCII或者长度超过100个需要用post）

    POST请求的特点是：
        1.浏览器地址栏中只有action属性值
        2.相对于GET请求更安全
        3.理论上没有数据长度的限制

    -->
    <form action="http://www.baidu.com" method="get">
        <input type="hidden", name="action"  value="login"/>
        <h1 align="center">用户注册</h1>
        <table align="center">
            <tr>
                <td>用户名称：</td>
                <td>
                    <input type="text" name="username" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" name="passname" value="abc"/>
                </td>
            </tr>
            <tr>
                <td> 确认密码：</td>
                <td>
                    <input type="password" name="repassname" value="abc"/>
                </td>
            </tr>
            <tr>
                <td> 性别：</td>
                <td>
                    <input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" checked="checked" value="girl"/>女
                </td>
            </tr>
            <tr>
                <td> 兴趣爱好:</td>
                <td>
                    <input name="hobby" type="checkbox" value="c"/> C
                    <input name="hobby" type="checkbox" value="c++"/> C++
                    <input name="hobby" type="checkbox" value="java"/> Java
                    <input name="hobby" type="checkbox" value="js"/> JavaScript
                </td>
            </tr>
            <tr>
                <td>国籍: </td>
                <td>
                    <select name="country" >
                        <option value="none">---请选择国籍---</option>
                        <option value="china" selected="selected">中国</option>
                        <option value="america">美国</option>
                        <option value="korea">韩国</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td> 自我评价：</td>
                <td>
                    <textarea name="desc" rows="10" cols="20">爱你呦</textarea>
                </td>
            </tr>
            <tr>
                <td>  <input type="reset" /> <!--重置按钮--> </td>
                <td align="center">  <input type="submit" /> <!--提交按钮--></td>
            </tr>
        </table>
<!--            <input type="button"/>-->
<!--            <input type="file" />-->
    </form>
</body>

在这里插入图片描述
结果：在这里插入图片描述

https://www.baidu.com/?action=login&username=%E7%88%B1%E4%BD%A0%E5%91%A6&passname=abc&repassname=abc&sex=boy&hobby=c%2B%2B&hobby=java&country=china&desc=%E7%88%B1%E4%BD%A0%E5%91%A6123

8.11 其他标签 div span p

  • div 标签 默认独占一行
    < div> 可定义文档中的分区或节（division/section）。
    在这里插入图片描述
    注释：浏览器通常会在 div 元素前后放置一个换行符。

  • span 标签 它的长度是封装数据的长度
    < span> 标签被用来组合文档中的内联元素。

  • p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
    < p> 标签可定义一个段落。
    在这里插入图片描述

<body>
        <!--需求 1：div、span、p 标签的演示
            div 标签 默认独占一行
            span 标签 它的长度是封装数据的长度
            p 段落标签 默认会在段落的上方或下方各空出一行来（如果已有就不再空）
        -->
        <div>div 标签 1</div>
        <div>div 标签 2</div>
        <span>span 标签 1</span>
        <span>span 标签 2</span>
        <p>p 段落标签 1</p>
        <p>p 段落标签 2</p>
</body>

在这里插入图片描述

CSS

1.CSS技术介绍

CSS 是 Cascading Style Sheet 的缩写。
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.CSS语法规则

在这里插入图片描述

选择器：浏览器根据“选择器”决定受 CSS 样式影响的 HTML 元素（标签）。
属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并
由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的
最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如：
p{
    
    
	color:red;
	font-size:30px;  /*30像素*/
}

注：一般每行只描述一个属性

CSS注释：/* 注释 */

3.CSS和HTML的结合

3.1 第一种：在标签的 style 属性上设置”key:value value;”，修改标签样式

<body>
	<!--需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。-->
	<div style="border: 1px solid red;">div 标签 1</div>
	<div style="border: 1px solid red;">div 标签 2</div>
	<span style="border: 1px solid red;">span 标签 1</span>
	<span style="border: 1px solid red;">span 标签 2</span>
</body>

问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。

3.2 第二种：在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式

格式如下：

xxx {
    
    
Key : value value;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
		/* 需求 1：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。*/
        div{
     
     
            border: 1px solid red;
        }
        span{
     
     
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <!--需求 1：分别定义两个 div、span 标签，分别修改
        每个 div 标签的样式为：边框 1 个像素，实线，红色。
    -->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

问题：这种方式的缺点。
1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

3.3 第三种：把 css 样式写成一个单独的 css 文件，再通过 link 标签引入即可复用

使用 html 的<link rel="stylesheet" type="text/css" href="./styles.css" />标签 导入 css 样
式文件。
CSS文件内容：

	div{
    
    
	border: 1px solid yellow;
	}
	
	span{
    
    
	border: 1px solid red;
	}

html 文件代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
    <!--需求 1：分别定义两个 div、span 标签，分别修改
        每个 div 标签的样式为：边框 1 个像素，实线，红色。
    -->
    <div>div 标签 1</div>
    <div>div 标签 2</div>
    <span>span 标签 1</span>
    <span>span 标签 2</span>
</body>
</html>

4.CSS选择器

4.1 标签名选择器

标签名选择器的格式是：

标签名{
    
    
	属性：值;
}

标签名选择器，可以决定哪些标签被动的使用这个样式。

需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 选择器</title>
    <style type="text/css">
        div{
     
     
            border: 1px solid yellow;
            color: blue;
            font-size: 30px;
        }
        span{
     
     
            border: 5px dashed blue;
            color: yellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
<!-- 需求 1：在所有 div 标签上修改字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
并且修改所有 span 标签的字体颜色为黄色，字体大小 20 个像素。边框为 5 像素蓝色虚线。
-->
	<div>div 标签 1</div>
	<div>div 标签 2</div>
	<span>span 标签 1</span>
	<span>span 标签 2</span>
</body>
</html>

在这里插入图片描述

4.2 ID选择器

id 选择器的格式是：

#id 属性值{
    
    
属性：值;
}

id 选择器，可以让我们通过 id 属性选择性的去使用这个样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ID 选择器</title>
	<style type="text/css">
		#id001{
     
     
			color: blue;
			font-size: 30px;
			border: 1px yellow solid;
		}
		#id002{
     
     
			color: red;
			font-size: 20px;
			border: 5px blue dotted ;
		}
	</style>
</head>
<body>
	<!-- 需求 1：分别定义两个 div 标签，
	第一个 div 标签定义 id 为 id001 ，然后根据 id 属性定义 css 样式修改字体颜色为蓝色，
	字体大小 30 个像素。边框为 1 像素黄色实线。
	第二个 div 标签定义 id 为 id002 ，然后根据 id 属性定义 css 样式 修改的字体颜色为红色，字体大小 20 个像素。
	边框为 5 像素蓝色点线。
	-->
	<div id="id002">div 标签 1</div>
	<div id="id001">div 标签 2</div>
</body>
</html>

在这里插入图片描述

4.3 class 选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{
    
    
属性：值;
}

class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>class 类型选择器</title>
	<style type="text/css">
		.class01{
     
     
			color: blue;
			font-size: 30px;
			border: 1px solid yellow;
		}
		.class02{
     
     
			color: grey;
			font-size: 26px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<!--需求 1：修改 class 属性值为 class01 的 span 或 div 标签，字体颜色为蓝色，字体大小 30 个像素。边框为 1 像素黄色实线。
		需求 2：修改 class 属性值为 class02 的 div 标签，字体颜色为灰色，字体大小 26 个像素。边框为 1 像素红色实线。
	-->
	<div class="class02">div 标签 class01</div>
	<div class="class02">div 标签</div>
	<span class="class02">span 标签 class01</span>
	<span>span 标签 2</span>
</body>
</html>

在这里插入图片描述

4.4 组合选择器

组合选择器的格式是：

选择器 1，选择器 2，...，选择器 n{
    
    
属性：值;
}

组合选择器可以让多个选择器共用同一个 css 样式代码。

需求 1：
修改 class=“class01” 的 div 标签 和 id=“id01” 所有的 span 标签，字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>class 类型选择器</title>
    <style type="text/css">
        .class01 , #id01{
     
     
            color: blue;
            font-size: 20px;
            border: 1px yellow solid;
        }
    </style>
</head>
<body>
    <!-- 需求 1：修改 class="class01" 的 div 标签 和 id="id01" 所有的 span 标签，
    字体颜色为蓝色，字体大小 20 个像素。边框为 1 像素黄色实线。
    -->
    <div id="id01">div 标签 class01</div> <br />
    <span >span 标签</span> <br />
    <div>div 标签</div> <br />
    <div>div 标签 id01</div> <br />
</body>
</html>

在这里插入图片描述

5.常用样式

  1. 字体颜色
    color：red；
    颜色可以写颜色名如：black, blue, red, green 等
    颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，#00F6DE，如果写十六进制值必
    须加#
  2. 宽度
    width:19px;
    宽度可以写像素值：19px；
    也可以写百分比值：20%；
  3. 高度
    height:20px;
    高度可以写像素值：19px；
    也可以写百分比值：20%；
  4. 背景颜色
    background-color:#0F2D4C
  5. 字体样式：
    color：#FF0000；字体颜色红色
    font-size：20px; 字体大小
  6. 红色 1 像素实线边框
    border：1px solid red;
  7. DIV 居中
    margin-left: auto;
    margin-right: auto;
  8. 文本居中：
    text-align: center;
  9. 超连接去下划线
    text-decoration: none;
  10. 表格细线
table {
    
    
border: 1px solid black; /*设置边框*/
border-collapse: collapse; /*将边框合并*/
}
td,th {
    
    
border: 1px solid black; /*设置边框*/
}
  1. 列表去除修饰
ul {
    
    
list-style: none;
}

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>06-css 常用样式.html</title>
    <style type="text/css">
        div{
     
     
            color: red;
            border: 1px yellow solid;
            width: 300px;
            height: 300px;
            background-color: green;
            font-size: 30px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        table{
     
     
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
     
     
            border: 1px red solid;
        }
        a{
     
     
            text-decoration: none;
        }
        ul{
     
     
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
    <li>11111111111</li>
</ul>
<table>
    <tr>
        <td>1.1</td>
        <td>1.2</td>
    </tr>
</table>
<a href="http://www.baidu.com">百度</a>
<div>我是 div 标签</div>
</body>
</html>

在这里插入图片描述

声明：以上内容均为学习笔记无任何其他用途，尚硅谷所学知识。

猜你喜欢

转载自blog.csdn.net/diviner_s/article/details/112258234
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
Java基础复习_day13_Collection集合
2018.11.16 c语言学习经验
且看Java内置四大核心函数式接口
小程序云开发中数据库的数据分段和显示图片
python的函数
Web-JS进阶
【干货】C++常用代码积累笔记大全
Spring的ioc操作 与 IOC底层原理
构建之法20191121-11 Scrum立会报告+燃尽图 07
Spring boot之Hello World访问404
每日归档
更多
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022