欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

html的基本介绍、css的简单介绍、图片间隙问题的解决、边框的简单介绍

程序员文章站 2022-03-27 16:01:50
一、HTML1、简单介绍（1）HTML描述页面一种语言；通过标记描述；（2）标记：尖括号包围的关键字；（3）语法：​ 成对出现；​ HTML元素：<开始标签>内容1、div–搭结构(1)div可以看作是一个容器语法:
内容
(2)应用：装东西----定义类开始标签空格隔开 class=“类名（自己起-字母和数字的组合）”

一、HTML

1、简单介绍

（1）HTML描述页面一种语言；

通过标记描述；

（2）标记：尖括号包围的关键字；

（3）语法：

​ 成对出现；

​ HTML元素：<开始标签>内容</闭合标签>

1、div–搭结构

(1)div可以看作是一个容器

语法:

<div>内容</div>

(2)应用：

装东西----定义类

开始标签

空格隔开 class=“类名（自己起-字母和数字的组合）”

 <div class="box">内容</div>

2、img图片

<img  src="" >

二、css装修

1、找元素—通过class名

以点进行标识

​ .类名------》.box

2、定义样式（描述特征）

(1)语法：找到的元素{样式声明}

(2)一条声明：属性名：属性值；

多组声明：分号隔开

<style>
    .box{
        width:290px;
        height:207px;
        border:1px solid #e5e5e5;
        }
</style>

（3）位置：

head内部；

（4）格式：

<style>
        /* 找到元素 */
        .box{
            /* 宽度 */
            width:290px;
            /* 高度 */
            height:207px;

            /* 边框 */
            border:1px solid #e5e5e5;

        }
 </style>

3、注释

作用：解释说明代码

【不会】被浏览器计息期显示到预览效果

快捷方式：

ctrl+/

4、文字的设置

font-size 文字大小的设置；

font-weight 文字粗细的设置；

color 文字颜色的设置；

text-align 文字水平居中；

line-height 单行文字的垂直居中可以设置行高和高一致可以实现；

<style>
    .box{
            font-size: 18px;
            text-align: center;
            font-weight: bold;
            line-height: 70px;
            background-color: cornflowerblue;
    }
</style>

5、图片间隙问题的解决

vertical-align:bottom（取消图片与下方文字中间的间隙）

6、边框的设置—border

(1)边框的尺寸、边框的线条、边框的颜色-------border:width color solid;

(2)分别设置边框的四边：

border-top:width solid color;

border-right:width solid color;

border-bottom:width solid color;

border-left:width solid color;

7、案例操作步骤

准备：

1.搭结构，找body,写div

2.找head,写style;

3.起类名，规定具体的样式

HTML中

css中 .名字

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 2.准备开始写样式 -->
    <style>

     .xiaohong{
        width:290px;
        height:209px;
            /*空格隔开， 边框宽度 边框样式 颜色*/
        border:1px solid red;
    }

    </style>

</head>
<body>
	<!-- 1. 搭框架 -->
	 <div class="xiaohong">这是一个div</div>
</body>

三、拓展内容

1.鼠标滑过

要滑过的元素：hover{样式}

2、缩放

transform:scale(1.2)

小括号里表示要放大的倍数

3.溢出隐藏

内容发生超出的盒子{overflow:hidden;}

4.过渡

要产生过渡效果的元素{transtion:0.5s;}

0.5表示从一种状态到另一种状态过程持续的时间

四、ps(尝试)

（1）打开（文件-打开----直接拖拽）

（2）信息面板f8—窗口-信息

（3）放大缩小画布

ctrl+

ctrl-

（4）量取宽度

（5）移动选区

空格+鼠标左键拖动

（6） 移动画布

空格

（7）取色

前景色小方块—左键点击（拾色器）

快捷键

ctrl+s保存；

ctrl+shift+s另存；

本文地址：https://blog.csdn.net/yangyanqin2545/article/details/109273724

相关标签： css html css3

上一篇： 微信小程序云开发之模糊搜索

下一篇： nas系统及本地网盘软件推荐

推荐阅读