关于divcss的使用详细介绍

红太狼 2024-04-03 09:30 100阅读 0赞

第一步：

先建立index.html和css.css两个文件。

放在同一目录里

\[建议编辑工具用dreamweaver以后简称dw\]

第二步：

在index.html里的<head></head>之间放入

<link href="css.css" rel="stylesheet" type="text/css" />

这段代码是外部css调用，注意：href="css.css"这是路径

因为index.html和css.css在同一目录。

第三步：

在css.css文件里编定样式。

可以用dw

用dw打开你的css.css → 窗口 → css样式 → 一般在你的右边出现css样式 → 点全部，下面会出现一个css.css → 点右键选择转到代码，这样在左边出现一个空白的板面这是因为你还没在里面编辑

第四步：

开始编定你要的样式了：

样式分两种

一种是点 . 一种是\#号

先说. 如

.abc \{\}

点开头后面的abc是你自己定义的，为了直观大括号里我没有什么东西是因为只定义了样式名称，内容如高，宽没有定义，这样又回到右边的css样式编辑器里

这时在css.css下面出现了一个.abc的名字，你可以双击或右键选择编辑，这样会出现一个对话框。

下面说说对话框里的一些功能

分类：第一个类型是定义字体，大小，一些相关东西，一看就知道了，

第二个是背景不用说了，你一就明白了，

第三个是区块，这个自己研究一下，

第四个是方框，这个就是定义宽和高了，浮动选择一般为左对齐，下面的就是相当于，用table的，填充和间距和

第五个边框，边框，就是定义这个框的边线，大少颜色之类的，自己研究，

其它的，有少复杂，自己用多了就会知道了，

说了这么多，来个例子吧：

从出来对话框说起，

选择第二个，背景为红色\[\#FF0000\]

选择第四个，定义宽为500px，高为300px，浮动为左对齐，点确定。

样式如下

.abc \{

background-color: \#FF0000;

width: 500px;

height: 300px;

float: left;

\}

样式出来了，接下来就是diV的调用了，下面是index.html里面：

<html>

<head>

<link href="css.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="abc">

</div>

</body>

</html>

上面就可以浏览看出页面有一个500X300的红色块了

class="abc"现在说明一下.和\#号了

用.abc就用class="abc"

用\#abc就用id="abc"

他们区别就是级别不一样，\#号比点要级高，而且\#号是唯一的，

先说级别：

如果diV用\#号，定义了字为12号，黑色(id="abc">)

<div id="abc">我是真灵无限

</div>

上面的六个字，为12黑色的字，

但是我想要真灵无限四个字为14号，红色(class="123")

这样定成

<div id="abc">我是<div class="123">真灵无限</div>

</div>

这样是没有用的，因为高级的\#已经定义了，字的大小和颜色，所以要反过来，

<div class="abc">我是<div id="123">真灵无限</div>

</div>

这样才能有效果

再说说\#号的唯一性，如果定义了\#abc和.123这两个样式

那么id="abc"在一个页面只能出现一次，

而class="123"可以在多个div里面调用，

这就是id和class的区别！

打了这么多，相信基本的样式可以应用了。

原文地址：[https://www.weidianyuedu.com/content/1720707687230.html][https_www.weidianyuedu.com_content_1720707687230.html]

[https_www.weidianyuedu.com_content_1720707687230.html]: https://www.weidianyuedu.com/content/1720707687230.html

发表评论取消回复

表情：

评论列表（有 0 条评论，100人围观）

还没有评论，来说两句吧...

相关阅读

相关 DIVCSS使用要点是什么

css 兼容要点：doctYPe 影响 css 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, ie 不行 FF

爱被打了一巴掌/ 2024年04月03日 09:31/ 0 赞/ 94 阅读

相关关于divcss的使用详细介绍

第一步：先建立index.html和css.css两个文件。放在同一目录里 \[建议编辑工具用dreamweaver以后简称dw\] 第二步：在index.ht

红太狼/ 2024年04月03日 09:30/ 0 赞/ 101 阅读

相关关于推荐系统的详细介绍

简介推荐系统是一种信息过滤系统，能够自动预测用户对特定产品或服务的偏好，并向其提供个性化的推荐。它通常基于用户的历史行为、个人喜好、兴趣和偏好等，通过数据挖掘和机器学习

女爷i/ 2024年03月26日 19:09/ 0 赞/ 82 阅读

相关关于Kubernetes的详细介绍

当谈论容器编排和管理时，Kubernetes（通常简称为K8s）是一个非常重要的工具。它是一个开源的容器编排平台，用于自动化部署、扩展和操作容器化应用程序。Kubernetes

秒速五厘米/ 2024年03月23日 22:49/ 0 赞/ 54 阅读

相关关于CMake的使用介绍

> 我第一次听说CMake，是听师弟说的（很聪明和厉害的师弟），说Pixhawk的代码都是CMake编译的。当时没听说过，觉得这个软件应该很厉害吧，但很疑惑软件不是用IDE就可

ゞ浴缸里的玫瑰/ 2023年05月30日 09:09/ 0 赞/ 107 阅读

相关 linux目录详细介绍,关于Linux系统下的/dev目录详细介绍

小编这次给大家说说Linux系统下的/dev目录，通过查阅相关资料后。小编得出了以下具体内容：首先小编要说说Dev到底是什么！！！dev是设备(device)的英文缩写。/

喜欢ヅ旅行/ 2023年01月20日 08:21/ 0 赞/ 215 阅读

相关 composer 使用的详细介绍

本文章是在已经安装好`composer`前提下使用的: packagist 是 Composer 的主要资源库 1. 编写`composer.json`文件(文件放在那

一时失言乱红尘/ 2022年05月27日 07:44/ 0 赞/ 210 阅读

相关 Oracle数据库关于索引的使用详细介绍

Oracle数据库关于索引的使用详细介绍 2018-04-28 10:29:08 收藏 [我要投稿][Link 1] 索引是由[Orac

喜欢ヅ旅行/ 2022年03月31日 06:48/ 0 赞/ 410 阅读

相关关于CyclicBarrier的使用介绍

关于CyclicBarrier的使用介绍前言：假如周末聚会，先到的人要等待还没有达到的人，要等到人到齐了之后才能开始吃饭，那么对于这种场景，用代码如何表示呢… 1.

àì夳堔傛蜴生んèń/ 2022年03月07日 06:13/ 0 赞/ 195 阅读

相关关于Semaphore的使用介绍

关于Semaphore的使用介绍 1.什么是Semaphore Semaphore是一个计数信号量，通常用于限制对某些资源访问的线程数量，Semaphore管理一系

左手的ㄟ右手/ 2022年03月06日 20:40/ 0 赞/ 212 阅读