html中怎么链接css（html表和连接css的方法）
导读：HTML <caption>...
HTML
<caption></caption> 表头 <table></table> 表格 <tr></tr> 行 <td></td> 行内格 <tfoot></tfoot> table中：aligh="center leht right" 对其方式[左 ，中 ，右] rowspan="" 合并行 colspan="" 合并列 空格   两个空格   三个空格 【表单标签】 <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;绝对定位
/*绝对定位会脱离原来的文档流 绝对定位是根据页面左上角进行位置移动*/ position: absolute; /*绝对定位*/ left: 30px; top: 30px;创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！