html表和连接css的方法

这篇具有很好参考价值的文章主要介绍了html表和连接css的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML

<caption></caption>	表头
<table></table>		表格
<tr></tr><td></td>			行内格
<tfoot></tfoot>
table中:aligh="center leht right"	 对其方式[左,中,右]
	rowspan=""					合并行
	colspan=""					合并列
	&nbsp;						空格
	&ensp;						两个空格
	&emsp;						三个空格

【表单标签】
<form></form>					表单‘
action="/java2212/login"指定后台服务器路径

<input />						输入框

	<input type="输入类型"/>
		text		文本输入
		password	密码框,密文
		radio		单选框,多框同name值
		checkbox	复选框,多框同name值
		date		日期
		range		范围滑动框
		file		文件
		email		邮箱
		button		可点击按钮
		submit		可点击提交
		reset		可点击重置
name值,用		

	value="默认值"
	
	name="" 暂时不用,java用name获取输入框的值
	
	placeholder="输入提示"			输入框提示

<select>				选项框
    <option></option>	 选项
</select>

<textarea></textarea>	可变大小文本域

【框架集标签】
cols将页面按照列分为几比几
rows将页面按照行分为几比几
<frameset cols="1,9">
	<frame src="frame-a.html">
    <frame stc="frame-b.heml">
</frameset>

【框架标签】
将a页面设置为target="namesss"
当a标签的页面内容指定在iframe内,就可以实现一个页面中的iframe实现可以打开多个页面
<iframe name="namesss" src="frame-a.hetm" width="900px" height="700px">
</iframe>

CSS

CSS叫层叠样式表,用来美化HTML,

也可以配合脚本动态的改变样式

提供代码复用,

与HTML代码分离,方便后期维护

使用方式

1、CSS样式与HTML标签在一起

在标签内,引入style

<!-- css与html在一起;在标签内使用style属性引入css -->
<div style="width: 400px;height: 400px;background-color: red;"></div>

2、css样式与html标签分离,但不出,使用

给标签id,css中用(#id名字)做连接

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d2{
				width: 600px;
				height: 600px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="d2"></div>
	</body>
</html>

3、css文件和html文件分离

1.得有html和css文件

2.在html中的head内中使用link引用css文件

语法格式

<link rel="stylesheet" href="css/Demo1.css">
<!-- rel中的stylesheet意思是样式表,固定写法 -->
<!-- href写入css文件的地址 -->

选择器

语法格式:

<style>
    选择器{
        属性:;
        属性:;
    }
<style>

标签选择器【重点】

指定标签类型,只要是这个标签就受影响

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>d1</div>
		<div>d2</div>
		<div>d3</div>
		<input />
	</body>

id选择器【重点】

用标签中定义的id来与css进行联系,一个id对应一个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			#d2{
				width: 300px;
				height: 300px;
				background-color: green;
			}
			#d3{
				width: 400px;
				height: 400px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- id属性,是全局属性,所有标签都可以定义,id值要唯一 -->
		<div id="d1">d1</div>
		<div id="d2">d2</div>
		<div id="d3">d3</div>
		<input />
	</body>
</html>

class选择器【重点】

和id格式基本一样,但class可以被多个标签同时调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
            /* style注释 
            .类名{}
            */
			.yuju1{
				background-color: antiquewhite;
			}
			.yuju2{
				font-size: 3	0px;
			}
		</style>
	</head>
	<body>
		<h1>岳阳楼</h1>
		<!-- 标签加class属性,可以同时设置多个clss值,中间空格隔开 -->
		<p class="yuju1 yuju2">岳阳楼上日衔窗,</p>
		<p>影到深潭赤玉幢。</p>
		<p class="yuju1">怅望残春万般意,</p>
		<p>满棂湖水入西江。</p>
	</body>
</html>

属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 	标签[属性=值]{
				
			} */
			input[type=text]{
				width: 350px;
				height: 35px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<form action="/java2212/login">
			用户名: <input type="text" value="" name="username" placeholder="首字母大写"/><br>
			密码: <input type="password" name="password"/><br>
			性别:<input type="radio" name="sex"/>男
			    <input type="radio" name="sex" />女<br>
			爱好:<input type="checkbox" name="hobby"/>学习
			    <input type="checkbox" name="hobby"/>敲代码
			    <input type="checkbox" name="hobby"/>睡觉<br>
			出生年月:<input type="date" name="birthday"/><br>
			年龄:<input type="range" name="age"/>18<br />
			头像:<input type="file" name="touxiang"/><br>
			邮箱:<input type="email"/><br>
		</form>
	</body>
</html>

层级选择器

	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 层级选择器 
			选择器1 选择器2 ...{}
			选择器之间是空格,递进关系,在选择器1的基础上,
			再进行选择器2的选择
			*/
			.d1 span{
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div class="d1">
			<p>d1-p</p>
			<span>d1-s2</span>
		</div>
		<div>
			<span>d2-s1</span>
			<span>d2-s2</span>
		</div>
	</body>

组合选择器

选择器1,选择器2{

}
两个选择器会同时生效,两个选择器是平级关系

css属性

文字属性

font-family: 宋体;			/*更改字体*/
font-size: 35px;			/*更改字体大小*/

文本属性

color: red;						/*字体颜色*/
text-align: center;				/*文本居中*/
text-indent: 20px;  			/*缩进*/

背景属性

backgrouond-color: 颜色;			/*更给背景颜色*/
background-image:url("图片地址")/*背景图片*/默认平铺background-repeat:no-repeat;		/*不平铺*/
repeat-x;  //   repeat-y;		/*x或y轴平铺*/
background-size:250px;			/*背景图片大小*/
background-position: bottom;	/*背景图片的地方*/

列表属性

.l1{
				list-style-image: url("img/数字-1.png");
    /*在列表中添加图片,比如[1]这样的序号小图片*/

尺寸属性【重点】

width:100px; 或者 100%;
height:100px; 或者 100%;

显示属性【重点】

display: none;				/*不展示*/
display: block;				/*显示: 按块显示*/
display: inline;			/*显示,按行内显示*/

浮动属性float

float: right;			/*浮动,会脱离当前的文档流*/

定位属性【重点】

相对定位

/*相对定位不会脱离原来的文档流
  加了定位就可以使用位置属性: left,right,top,bottom
  相对与父级进行位置移动*/
position: relative;			/*相对定位*/
left: 30px;
top: 30px;

绝对定位文章来源地址https://www.toymoban.com/news/detail-472988.html

/*绝对定位会脱离原来的文档流
  绝对定位是根据页面左上角进行位置移动*/
position: absolute; 		/*绝对定位*/
left: 30px;
top: 30px;

到了这里,关于html表和连接css的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包