潭州学院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

通配符选择器，选中页面中所有的标签，优先级最低。通常用来样式初始化


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>

潭州学院html学习（day03）

猜你喜欢