一 html基础
1.什么是html
超级文本标记语言
</> 标记分两种:单标记 双标记 标记的特点: 要闭合 大小写不敏感 有属性 单标记语法 <标记名 属性名="属性值"/> 双标记语法<前标记名 属性名="属性值"></后标记名>
html模板
1: 版本控制
2: html文档区域
3: 文档包含头部(head)和身体(body)
4: 头部包含编码格式(meta utf-8)和标题(title)
文本格式必须为html后缀
2.html中边界的设置
border: 给当前标记设置边界
border-width: 给当前标记设置边界粗细
border-color: 给当前标记设置边界颜色
border-style: 给当前边界设置边界的类型
solid 实线
dotted 点装线
dashed 虚线
组合写法: border:border-width border-color border-style
3.<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>模板</title> <!-- style标记是在html文档中创建一块书写css的区域--> <style> div{ border: 10px red solid; } span{ border: 2px blue solid; } </style> </head> <body> <!--body内部只允许包含标签--> <div>我是div</div> <span>我是span</span> </body> </html>讯享网
二 html选择器
讯享网1.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*基础选择器-标签选择器*/ /* tags{ }*/ </style> </head> <body> <div></div> </body> </html> 2.id选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*基础选择器-id选择器*/ /*#id名称{}*/ /*特点：唯一性*/ /*优点：可以逐个控制标记，互相的样式的不影响*/ /*缺点：唯一性，冗余代码多。*/ /*使用场景：JS钩子*/ #liergou{ border: 3px red solid; } #wangdamao{ border: 10px black dashed; } #datupiaozi{ border: 6px gold dotted; } </style> </head> <body> <div id="liergou">我是div1</div> <div id="wangdamao">我是div2</div> <div id="datupiaozi">我是div3</div> <!-- id一定要唯一 --> <span id="liergou">我是span</span> </body> </html> 3.类选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*基础选择器-类选择器*/ /*.class名称{}*/ /*一个标记可以起多个class名，建议不超过7个*/ /*所有的div都需要3px red solid,但是第三个div,要求颜色是蓝色的*/ /*优点：可以减少代码冗余，把相同样式的标记总结在一起*/ /*缺点：会略微的破坏html结构*/ .hongse{ border: 3px red solid; } .wangermazi{ border: 5px gold dotted; } .lanse{ border: 3px blue solid; } </style> </head> <body> <div class="hongse zhangsan lisi wangermazi">我是div1</div> <div class="hongse">我是div2</div> <div class="lanse">我是div3</div> <div class="hongse">我是div4</div> </body> </html> 4.后代选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选择器</title> <style> /*基础选择器-后代选择器*/ #div1 .div5{ border: 1px red solid; } </style> </head> <body> <div id="div1"> <div> <div> <div> <div class="div5"> wo shi div5 </div> </div> </div> </div> </div> </body> </html> 5.选择器的优先级 /*选择器的优先级*/ /*1：标签(名)选择器*/ /*2：id选择器*/ /*3：class选择器*/ /*4：后代选择器*/ /*优先级*/ /*1：相同选择器，样式冲突的情况下，后面覆盖前面*/ /*标签(名)选择器优先级是1*/ /*类选择器的优先级是10*/ /*id选择器的优先级是100*/ /*style行间样式的优先级是1000*/
三 html css引入方式和样式
1.常用引入方式
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 引入外部文件的标记 可以引入多个样式表--> <link rel="stylesheet" href="index.css"/> </head> <body> <div>我是div</div> </body> </html>
index.css
div{
border: 10px red solid;
}
2.文本样式
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <link rel="stylesheet" href="index.css"> </head> <body> <!-- 文本颜色 color:颜色值; --> <!-- 文本位置 text-align:left(靠左对齐，默认) | right(靠右对齐) | center(居中对齐); --> <!-- 字号大小 font-size:;单位是px --> <!-- 文本修饰 text-decoration:underline(下划线)| line-through(中划线)--> <div> 我是div </div> </body> </html>
index.css
div{
border: 1px red solid;
width: 400px;
height: 400px;
color: yellow;
text-align: right;
font-size: 40px;
text-decoration: line-through;
}
3.样式-尺寸
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>尺寸</title> <link rel="stylesheet" href="index.css"/> </head> <body> <!-- width:样式标签的宽度 单位是px--> <!-- height:样式标签的高度 单位是px --> <!-- 尺寸样式 块级标签支持，行级标签不支持 --> <div>我是div</div> </body> </html> index.css div{ border: 10px red solid; width: 200px; height: 200px; }
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/60056.html