HTML--CSS--图片和背景样式

图片样式

图片大小

最基本的应该就是对大小的管理

width:像素值; 宽度
height:像素值; 高度

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
        }
    style>
head>
<body>
    <img src="小猫.jpg">
body>
html>

图片边框

一样使用border进行定义

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 300px;
            height: 300px;
            border: 5px blue solid;
        }
    style>
head>
<body>
    <img src="小猫.jpg">
body>
html>

效果:
HTML--CSS--图片和背景样式_第1张图片

图片对齐

图片对齐和文本的对齐是一样的,也是用 text-align进行,但需要注意不能直接在 img定义,需要在父元素处定义
属性依然是:

left 左对齐
center 居中
right 右对齐

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*放在这里是不生效的*/
            text-align: right;
        }
        /*需要单独定义,在父元素中才能生效*/
        .myimg {text-align: center;}
    style>
head>
<body>
    <div class="myimg">
        <img src="小猫.jpg">
    div>
    <img src="小猫.jpg">
body>
html>

效果:
HTML--CSS--图片和背景样式_第2张图片

垂直对齐

用法:vertical-align:取值;
属性:

top 顶部对齐
middle 中部对齐
baseline 基线对齐
bottom 底部对齐

例子:

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }
        #a{vertical-align: top;}
        #b{vertical-align: middle;}
        #c{vertical-align: bottom;}
        #d{vertical-align: baseline;}        
    style>
head>
<body>
    <img id="a" src="小猫.jpg">
    <img id="b" src="小猫.jpg">
    <img id="c" src="小猫.jpg">
    <img id="d" src="小猫.jpg">
body>
html>

效果:
emm~~~貌似看起来就是这样,暂时想不到这个实际运用起来的时候的作用
HTML--CSS--图片和背景样式_第3张图片

文字环绕 float

属性:

left 元素向左浮动
right 元素向右浮动

例子:

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            /*float: left;*/
        } 
    style>
head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型p>
body>
html>

这时候,网页效果是:
HTML--CSS--图片和背景样式_第4张图片
当设定了文字环绕后

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
            float: left;
        } 
    style>
head>
<body>
    <img id="a" src="小猫.jpg">
    <p>怎么算是文字环绕型p>
body>
html>

效果:
HTML--CSS--图片和背景样式_第5张图片
emm~~~~~~
那我这样写可以吗?

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        img
        {
            width: 30px;
            height: 30px;
            border: 5px blue solid;
        }

    style>
head>
<body>
    <p>这算是手动的<img id="a" src="小猫.jpg">文字环绕型吗?p>
    <p>怎么算是文字环绕型p>
body>
html>

效果:
HTML--CSS--图片和背景样式_第6张图片
貌似也可以,强行把它夹在文字中间…

背景样式

属性:

background-image: url(); 图片背景
background-color: 颜色; 颜色背景
background-repeat: 属性; 背景图片如何重复铺陈
background-position: 值; 定义背景图片位置
background-attachment: fixed; 固定背景图片,使其不动

背景图片:

用法的话,放到div或父类内
值得注意的是,它不是直接把图片全显示在网页上,而是你网页有多大,他就铺多少,见下列代码和效果
#a{background-image: url(小猫.jpg);}

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        #a{background-image: url(小猫.jpg);}
    style>
head>
<body>
    <div id="a">
        <p>这是一句没有营养的话p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    div>
body>
html>

效果:
HTML--CSS--图片和背景样式_第7张图片

背景颜色:

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        #a{background-color: aqua;}
    style>
head>
<body>
    <div id="a">
        <p>这是一句没有营养的话p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    div>
body>
html>

效果:
HTML--CSS--图片和背景样式_第8张图片

背景图片重复

属性:

repeat 在水平方向和垂直方向上同时平铺(默认值)
repeat-x 只在水平方向上平铺
repeat-y 只在垂直方向上平铺
no-repeat 不平铺

如下例子:
定义了div的格式,背景图片
然后定义父类平铺

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            background-image: url(x.gif);
        }

        #a{background-repeat: repeat;}
    style>
head>
<body>
    <div id="a">
        <p>这是一句没有营养的话p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    div>
body>
html>

效果:
HTML--CSS--图片和背景样式_第9张图片

背景图片位置

用法:
background-position: 水平距离像素 垂直距离像素; 这里的距离指到网页左边界和上边界的距离
也可以用关键字,对应关系如下
其实就是几个关键字组合来定义位置,上下左右中
top 上
center 中
right 右
bottom 下
left 左
用的时候,关键字可以两两组合
如 right bottom 就代表右下

DOCTYPE html>
<html>
<head> 
    <title>这是一个标题title>
    <meta charset="utf-8"/>
    <style>
        div
        {
            width: 100px;
            height: 100px;
            background-position: 50px 50px;
            background-image: url(x.gif);
            background-repeat: no-repeat;
        }
        /* #a{background-repeat: no-repeat;} */
    style>
head>
<body>
    <div id="a">
        <p>这是一句没有营养的话p>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>
        
    div>
body>
html>

效果:
HTML--CSS--图片和背景样式_第10张图片

背景图片固定

用法:
background-attachment: fixed; 这样就是让背景图片固定在一处,网页滚动不随着变化,一般应该用不到
background-attachment: scroll; 随元素滚动,这个是默认的,所以这个应该基本用不到

你可能感兴趣的:(HTML学习,html,css,前端)