Web前端---- CSS和JavaScript基础

最新推荐文章于 2024-09-22 11:17:00 发布

码农C风

最新推荐文章于 2024-09-22 11:17:00 发布

阅读量966

点赞数 2

分类专栏： JAVAweb 文章标签： javascript 前端 html css

本文链接：https://blog.csdn.net/a23452/article/details/121687538

版权

JAVAweb 专栏收录该内容

53 篇文章 3 订阅

订阅专栏

Java学习打卡：第85天

javaWeb — CSS和Javascript基础

Java养成计划（打卡第85天)

CSS和JavaScript

前面大概提及了以下web中的HTML，但是有的东西没有介绍的很详细，但是后面会做一个综合的Web项目，会详细介绍< div> < form>等标签的用法，会详细讲解布局；jsp和serverlet学习之后，将Vue看看之后，就学习一下后端的常用框架，包括SSM和spring boot ，到时候就多做一些综合的项目来练手；到时候再反过来学习其他规划的底层；因为会用之后才能够在学底层的时候想到原因

CSS

HTML 是hype text markup language；超文本标记语言；那么CSS是什么呢？ cascade 层叠，瀑布喷流

CSS是cascading style sheet 层叠样式表语言【专门由来修饰HTML，让HTML更美观】不是编程语言（变量，数据类型，控制语句），只是层叠样式表，依附于HTML
所以进行CSS开发的时候，新建的是html文件

嵌入CSS样式

内联定义： style

其实内敛定义的方式关键就是内联【放在开始标签的内部】，使用的关键的词是style

任何一个标签都可以使用cascading style sheet层叠样式表修饰
<标签名 sytle = "样式名:样式值;样式名:样式值;样式名:样式值;……">……</标签名>

其实上面的标题的hr就使用了CSS的style

这里的的sytle的很多属性和HTML的原来的属性有些类似

这里可以用内联方式来修饰一个div标签，div相当于一个盒子

<div id="div1" style="background-color:#CCCC33;width:300px;height:300px;position:absolute;top:100px;left:100px;border-style:solid;border-color:red">
    ……
</div>

这里可以解释以下这里的属性，color就是颜色，width就是标签的宽度，height为标签的高度；position可以选择相对或者绝对；top是代表离上边界的距离，left代表离左边界的距离;border是设置边框的所有的属性，这里的属性有很多，可以在帮助文档中了解

<!doctype html>

内联定义的方式style

用户名
男女

这里的格式在typora上因为可以完整支持HTML是可以显示的，但是博客上不支持

内部样式块对象

HTML中使用CSS的第二种方式就是在head标签中指定一个内部样式块，也就是style标签，标签的type设置为text/css；设置后，该标签内部就是CSS的专用域，注释的写法和java中一样；

之前说过HTML中每一个标签都有一个id属性，设置的目的其一就是CSS中内部样式块使用id选择器#id就可以设置样式
HTML中每一个标签都有class标签；当两个类型不同的标签calss相同的时候，它们属于同一类；方便内部样式快的类选择器模式

选择器name()中，不加那么就是标签名，如果加上#代表是id名；如果加上.代表是类名，这是三种不同的选择器

<!doctype html>
<html>
    <head>
        <title>第二种方式使用CSS</title>
        <style type="text/css">
        	/*
            	这里面的注释方式和java中是一致的consistency
            那么到底该使用什么方式来修饰HTML中的标签呢？
            */
            /*
            选择器{
            	样式名:样式值;
            	样式名:样式值;
            	样式名:样式值;
            	……
            }
            
            常见的选择器有三种：
            标签选择器
            id选择器
            class选择器
            
            
            标签选择器
            	标签名()
            比如div{                 所以缺陷很明显，会将body中所有的div都设置为这里的样式
            	……
            }
            
            想让样式只设应用于一个标签，那么就要使用标签选择器
            #id名{
            	……
            }
            
            
            那如何让不同类型的标签一起修改为同一种样式呢？这个时候使用类选择器；就是将同类的标签的class设置为相同的值
            .类名{
            	……
            }
            */
        </style>
    </head>
</html>

注意，这里的定义的块都是大括号，不是小括号，参照java就知道是大括号了；

这里举个例子

上面用style写的代码可以改为

<!doctype html>
<html>
	<head>
		<title>链入外部样式表文件</title>
		<style type="text/css">
			div{
			background-color: navajowhite;
			width: 300px;height: 300px;
			position: absolute;
			top: 100px;
			left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			<form action="study.html" method="get">
				用户名<input type = "text" name = "username" value = "张三" maxlength="3" readonly/> <br>
				<input type="radio" name = "gender" value = "boy"/>男 <input type= "radio" name = "gender" value = "girl"/>女 <br>
				<input type="submit"value="注册"/><br>
			</form>
		</div>
	</body>
</html>

//这里可以将选择器换成另外的写法，方法是一样的，就不再赘述

链入外部链式表文件 link 独目标签

除了使用内联的方式或者内部样式块对象，那么是否可以将css修饰的部分单独放在文件中再引入？

这是可行的，所以第三种方式就是链入外部样式表文件

这里的方式就是创建一个CSS文件，其中放上第二种的块语句，就是三种选择器加上属性和值的文件

那么怎么链接外部的CSS文件？这里使用的标签是link，还是在head中

<!doctype html>
<html>
	<head>
        <title>链入外部样式表</title>
        
        <link rel = "stylesheet" type= "text/css" href ="路径">
    </head>
</html>

然后只要在路径中把CSS文件编写

#div1{
    background-color: navajowhite;
	width: 300px;height: 300px;
	position: absolute;
	top: 100px;
	left: 100px;
}

这样就可以达到和上面相同的效果，这种就是降低耦合，易扩展，就类似JDBC使用classforname使用配置文件properties

//查看CSS可以发现有很多的样式属性
border是一个复合属性
可以将所有的子属性一起呈现

<head>
    <style type = "text/css">
        #div1{
            border:solid 1px red;           //就相当于将三个子属性一起设置了
        }
    </style>
</head>

类选择器的优先级高于标签选择器 id > calss > 标签也就是 # > . > 无越具体越高，具体点当然就听

常用的样式

隐藏样式 display none

none表示隐藏，block表示显示

网页上会有一种效果就是点击之后显示，不点击就隐藏；这种隐藏的样式就要借助display ；这也是众多样式中的一种

#chinacities{
	display:none;
}

之前还介绍的常用的样式就是border，可以整个复合属性一起写出，border-color border-style border-width

字体属性font

这里和html中原来的标签是相同的名称，但是这里的只是样式属性

font size设置字体的大小 color设置字体的颜色

文本装饰样式 text-decoration

在html中，可以直接使用标签来装饰字体，可是那样子会很麻烦，不需要使用ins，del，b等标签，直接使用文本样式

当该样式的值为none的时候，代表不装饰，underline代表下划线，overline代表上划线，blink代表闪烁，line-through代表贯穿线

#div{
	text-decoration:underline;
}

这里的underline就可以为div中的字体加上下划线，同时可以使用none为有下划线的比如超链接a给去掉下划线

列表样式 list-style-type

这个就是之前分享ul的时候的type，比如可以将列表的前面的点去掉，那么就让该属性为none，其余的可以分别设置desc，square，circle

鼠标悬停样式 :hover

其实hover就是一个宏观的样式，并且只是鼠标悬停的时候才会变化，其他的时候不会变化

比如需求是鼠标悬停时字体变大，字体变为红色

<head>
    <style type="text/css">
        #div:hover{
            color:"red";
            font-size:20px;
        }
    </style>
</head>

注意： :的两边都不能有空格

内外边距 margin padding

之前说过的一个标签就是div，盒子套盒子，如果有多个div，想让内部的div距离外部的div有一定的边距离，这时就要使用内外边距 margin 边距 padding 填补

这样可以让布局更加精美，那么就要使用内外补丁

对外面的div来说，使用padding就是内补丁，就会挤压内部的div移动
对里面的div来说，使用margin 就是外补丁，挤压外部的空间也可以使div移动

因为默认情况下起始的位置都是最开始的行的位置，并且内外的div的起始左上角的位置都是相同的，这个时候对于div就要使用补丁来修饰

浮动样式float

浮动样式就是可以让元素左右浮动，比如图片，那么就可以让文字包围了图片，排版效果更好，其有3个值，left，right，none

image{
    float:right;
}

这样就可以让图片浮动，就不会显示出一大片难看的空白了

定位样式 position

定位样式上面提到过，可以绝对定位，也可以相对定位，加上top和left就可以定位一个div的位置

div{
    postion:absolute;
    top:100px;
    left:300px;
}

鼠标悬停样式cursor

cursor 光标，cusor就是鼠标悬停的时候的显示效果，有很多值，比如hand，not-allowed

span{
	cursor:pointer;
}

pointer和hand是一样的，但是hand会出现兼容问题。

起始CSS就是为了html服务的，最主要的核心就是html嵌入cascading style sheet的方式，CSS文件存在的意义就是和properties一样方便使用外链接导入的方式来修饰html中的各种标签

这里的样式是次要的，很多样式，记忆是不现实的，只要多用就顺利的记住了，所以之后学完之后会多写几个网页，希望能唯美一点吧~🌳

JavaScript

JavaScript简称JS，是一种脚本语言，和java不同，java是一种非脚本语言，需要编译；脚本语言也称为解释型语言，不需要编译，直接执行即可。而C等为编译型语言，java为半编译半解释，因为JVM的关系。

脚本语言的特点：目标程序以普通文本的形式保存，而不是一个.c，.java之类的文件（先编译生成一个记事本无法打开的文件），使用记事本就可以直接打开【phython也是一种脚本语言】

JavaScript和java没有任何关系。JavaScript运行在浏览器中，浏览器中有执行JS代码的内核，浏览器打开就可以直接解释执行；Java运行在JVM中

JavaScript是一种编程语言，也具有语言所具有的变量，数据类型和控制语句，专门操作HTML页面中的节点，使网页产生一个动态效果

JavaScript包括：ECMAscript DOM BOM

java的学习包括三部分：SE EE ME ； JavaScript的学习也包括3块：核心语法ECMAscript ；BOM和DOM

ECMAscript ： ECMAscript使ECMA指定的262标准，JavaScript和Jscript都遵守这个标准。ECMAscript是JavaScript的核心语法
DOM 【document object model 文档对象模型】：之前提到过HTML的所有的节点组成了一棵树,DOM编程就是操作一个网页中的所有结点，DOM的规范由W3C指定
BOM 【browser object model 浏览器对象模型】： DOM是操作网页中的元素，BOM是操作浏览器本身，比如前进，后退，地址栏，关闭窗口，弹窗，由于浏览器不同，目前还缺少规范

了解过Java界面编程就知道界面的layou就像利用CSS进行HTML布局，那么JavaScript起到的效果就像界面中的事件和监听响应

JavaScript的目的就是实现动态网页，那么这是如何将JavaScript嵌入到HTML中呢？

HTML中嵌入JS的first way 行间事件

JavaScript是一种事件驱动型的编程语言，通常都是在发生某个事件的时候才会执行某段代码；事件的类型很多，比如鼠标单击click，鼠标经过事件mouseover，并且js中任何一个事件都有对应的事件句柄。例如click对应onclick，mouseover对应onmouseover

所有的事件句柄都是以标签的属性的形式存在的，也就是说button的input就有一个属性为onclick，只要该事件被触发，那么该句柄的JS代码就会被执行，句柄后的JS代码浏览器负责执行

这里的浏览器其实就是一个监听器，onclick代码不是浏览器打开的时候执行，只是将其注册给句柄

事件发生的三要素：事件源，事件，监听器

<input type="button" value="hello" onclick="……js代码"/>

在HTML中嵌入JS的第一种就是依靠行间事件，为了便于理解，这里来一个需求

比如网页上有一个type为button的普通按钮，现在的需求是点击按钮，可以弹出对话框，显示Hello Cfeng

这里其实就类似界面中的事件的编写了，这里的实现就要依靠JS

那么如何实现：

JS的BOM中有一个对象为window，专门管理的弹窗，该对象有个方法/函数alert【提示】，这个函数专门用来弹出对话框

<input type="button" value="hello" onclick="window.alert('hello cfeng');"/>

在这里插入图片描述

这里的效果正常的，JS代码的含义就是当onclick的时候，就会执行window的alert函数

JS中的字符串可以使用单引号或者双引号，可以以分号结尾或者不以其结尾

这里需要注意的其他的点是

window.是可以省略的，也就是可以直接使用alert就可以了
可以给onclik注册多个事件，弹窗可以弹出多个

<input type="button" value="hello" onclick="window.alert('hello cfeng') 
															window.alert('miss')
															window.alert('baby')"/>

这里的效果就是弹出窗口之后点击确定，窗口中的内容切换成另外的内容……

事件和事件的差别就是在于on，有on就变成了事件的句柄

说了这么多，其实嵌入JS代码的第一种方式就是在行的标签中通过事件句柄的方式来插入js的代码

嵌入的second way - 脚本块

除了事件触发的时候通过行间事件执行的JS代码，也可以直接编写一个script的脚本块，script是一个标签，这个标签中的域就是JS的代码域，当浏览器打开的时候，会按照HTML的顺序，该域中的js代码会自上而下执行

格式就是在body标签中插入script脚本块

<html>
    <head>
        <title>插入JS的第二种方式，脚本块</title>
    </head>
    <body>
        <input type="button" value="按钮1"/>
        <script type="text/javascript">
        	/*这里编写JS代码，在页面打开的时候自上而下的顺序依次执行 */
            alert('hello');   //这里就不触发了，直接执行
            alert('cfeng');
            alert('lisi');
        </script>
        <input type="button" value="按钮2"/>
    </body>
</html>

注意html代码的执行也是有顺序的

这里在打开浏览器，没有点击完确定的时候，只会显示按钮1的，因为script中的执行需要交互，所以停止执行，下面的标签还么有开始画

这里的脚本块可以在任何的位置，只要按照顺序执行就可以。发在页面最开头，背景就是什么都不画

脚本块的位置随意，没有要求，一个页面中可以有多个脚本块

嵌入JS的third way - 引入外部独立的JS文件

这里和CSS中的第三种方式也是一样的，避免对复杂网页的修改，易扩展

引入外部文件的格式

引入还是使用的script，这里加了路径，中间就不是JS域了，不能写JS代码

<script type="text/javascript" src="路径"></script>

注意这里的引入的路径是src，而CSS是href；

而外部的JS文件中都是JS代码

//这里编写的就是JS文件
alert('hello');
alert('cfeng');

引入的时候遵循自上而下的顺序逐行执行；可以多次引入，引入一次，执行一次；

其实这里和CSS真的是很相似的，第一种都是行执行，第二种就是块执行，第三种就是文件引入执行；CSS引入是href，并且多了一个rel = stylesheet，引入的标签是link；

接下来会详细介绍JS的ECMAscript即基本语法🌲