潭州学院html学习(day03)
一.img图像标签
图片的格式=名称加后缀名
图片的后缀名:
1. jpg: 常用格式
2 .png:常用格式 透明图片 ( 背景由灰白格子交错形成,但在页面在中不会显示出来)
3.gif: 常用格式 (由多张图片快速循环播放)
img标签:
1.img标签向网页中嵌入一幅图片。
2.从技术上讲,<img>标签并不会在网页中插入图片,而是从网页上链接图像.<img>标签创建的是被引用图片的占位空间。
3.<img>标签有标签属性:src,alt,title,width,height
- src:<img src="url"/>(url:图片路径)
- height:图片的高度
- width:图片的宽度
- alt:图片加载失败显示的文字
- title:鼠标放在图片上显示的文字
图片特征:
1.图片有间隙
2.行块级特征:支持宽高,可以在一行显示,解析空格
路径:
绝对路径,从磁盘开始
D:\360安全浏览器下载\1.jpg
缺点:只能从自己的磁盘开始,在别人的电脑上路径就不一样了
相对路径:相对于html文件
下级目录:‘/’
上级目录:'../'
从域名出发:http://www.baidu.com
vertical-align:top/middle/bottom
1.只作用行级或者行块级元素
2.作用域img可以去掉图片间隙,无论设置什么值都可以
3.当使用这个元素去使行级,块级上下对齐时,两者都要设置
测试代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 200px; height: 560px; vertical-align: bottom; } span { font-size: 50px; /*vertical-align: bottom;*/ /*vertical-align: middle;*/ vertical-align: bottom; } </style> </head> <body> <img src="D:\360安全浏览器下载\1.jpg" > <img src="C:\Users\Mike\WebstormProjects\untitled\images\2.png" > <img class="img" src="../images/1.jpg" alt="帅哥图片" > <img class="img" src="../images/2.png" alt="Modric"> <!--<img src="https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=false&word=%E7%BE%8E%E5%A5%B3%E5%9B%BE%E7%89%87&hs=2&pn=2&spn=0&di=86886938381&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=3036260638%2C1523624176&os=656762631%2C3826627602&simid=3361867176%2C200536846&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=girl&bdtype=0&oriquery=%E7%BE%8E%E5%A5%B3%E5%9B%BE%E7%89%87&objurl=http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F006LDoUHzy7auXu0wVp67%26690&fromurl=ippr_z2C%24qAzdH3FAzdH3Fks52_z%26e3Bftgw_z%26e3Bv54_z%26e3BvgAzdH3FfAzdH3Fks52_808lmvv8na8adxcgr_z%26e3Bip4s&gsm=0&islist=&querylist="> --> <span>今天是2018年7月18号</span> </body> </html>
二.标签的嵌套
标签嵌套注意的点:
1. 不能交叉嵌套,如:<li><a href=""></li></a>
2. p,h所有标签不能嵌套
3. 行级标签不能嵌套块级标签(a标签除外)
三.样式概述
css样式(层叠样式表)
对于元素(可视标签),进行装饰,如背景色,边框线。字体等等
对元素版位的控制,如元素的宽高,元素之间的距离,位置等等
书写
定义:css规则由两个主要的部分构成,选择器以及一条或多条声明
声明:具体要添加修改的样式,由属性,冒号,属性值和分号组成。
颜色书写:
英文单词:red,green,deeppink;
十六进制:#ffffff(#fff)白色、#000000(#000)黑色 #cccccc(#ccc)灰色 十六进制颜色都是六位,如果六位的值都一样,可简写为三位
rgb:如:rgb(0,0,0) 其中三个值的范围是0-255
rgba:如:rgb(0,0,0,0.5) 最后一个参数(0.5)是透明度
测试代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> .c1{ width: 100px; /*元素内容宽度*/ height: 100px; /*元素内容高度*/ /*background: #ff69b4; !*元素背景*!*/ background: rgb(255,105,180); /*元素背景*/ /*color: #000; !*元素字体颜色*!*/ color: rgba(0,0,0,0.5); /*元素字体颜色*/ font-size: 20px; /*元素字体大小*/ font-weight: bold; /*元素字体加粗*/ } </style> </head> <body> <div class="c1">今天是2018年7月18号</div> </body> </html>
四.样式的分类
1.行内样式:在style标签里面书写的;
2.内部样式:在style标签里面书写的(style标签放在head里面)
3.外部样式:新建css文件,使用link引入html文档(link标签放在head里面) <link rel="stylesheet" href="css/index.css">
测试代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> .c1{ width: 100px; /*元素内容宽度*/ height: 100px; /*元素内容高度*/ /*background: #ff69b4; !*元素背景*!*/ background: rgb(255,105,180); /*元素背景*/ /*color: #000; !*元素字体颜色*!*/ color: rgba(0,0,0,0.5); /*元素字体颜色*/ font-size: 20px; /*元素字体大小*/ font-weight: bold; /*元素字体加粗*/ } </style> <link rel="stylesheet"href="images/css/index.css"> </head> <body> <div class="c1">今天是2018年7月18号</div></br><!--内部样式--> <div style="color:red">今天是2018年7月18号</div></br><!--行内样式--> <div class="c2">今天是2018年7月18号</div><!--外部样式--> </body> </html>
样式的优先级: 行内样式 > 内部样式 = 外部样式
注意:内部样式和外部样式优先级一样,在选择器优先级相同的情况下,看后加载,后加载的会覆盖先加载的样式
五.基本选择器
* {margin: 0;padding: 0;}
1.通配符选择器(*)
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/basic-selectors © w3cplus.com
通配符选择器,选中页面中所有的标签,优先级最低。通常用来样式初始化
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/css3/basic-selectors © w3cplus.com
2.标签(元素选择器)
div{
width: 100px;
height: 100px;
background: #ccc;
}
3.类选择器
可以多次使用
写法:在标签里面<div class="类名"></div>
在样式里面 .类名{}
.box1{
background: purple;
}
4.id选择器
只能使用一次
写法:
在标签里面 <div id="id名称"></div>
在样式里面 #id名
#id1{
background: hotpink;
}
5. 后代选择器
选择复合条件的后代元素
父级元素+空格+子元素
.box2 p{
color: greenyellow;
}
6.子元素选择器
子元素选择器:选择亲儿子
.box3>div>div{}
父级元素>亲儿子元素
7.群组选择器
群组选择器:可以同时选中多个元素 元素1,元素2,元素3...
box1,.box2,.box3{} /* 同时选中box1 box2 box3 */
.box3 p,.box4 p{} /* 同时选中box3下面的p和box4下面的p */
.box3,.box4 p{} /* 同时选中box3和box4下面的p */
测试代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> .c1 { width: 100px; /*元素内容宽度*/ height: 100px; /*元素内容高度*/ /*background: #ff69b4; !*元素背景*!*/ background: rgb(255, 105, 180); /*元素背景*/ /*color: #000; !*元素字体颜色*!*/ color: rgba(0, 0, 0, 0.5); /*元素字体颜色*/ font-size: 20px; /*元素字体大小*/ font-weight: bold; /*元素字体加粗*/ } p{ background-color: fuchsia; } #id1{ background-color: green; } .box1 p{ background-color: gold; } </style> <link rel="stylesheet"href="images/css/index.css"> </head> <body> <div class="c1">今天是2018年7月18号</div></br><!--内部样式--> <div style="color:red">今天是2018年7月18号</div></br><!--行内样式--> <div class="c2">今天是2018年7月18号</div><!--外部样式--> <div id="id1">今天是2018年7月18号</div> <p>今天是2018年7月18号</p> <div class="box1"> <p>今天是2018年7月18号</p> </div> </body> </html>