admin 管理员组

文章数量: 887021


2023年12月19日发(作者:常量定义const)

Div+css

一,什么是CSS

CSS全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表又被我们称为CSS样式,CSS样式又被作为一种能制作出各种样式网页的技术统称。

二.DIV+CSS

简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。首先认识DIV是用于搭建html网页结构(框架)标签,像

等html标签一样,再认识CSS是用于创建网页表现(样式/美化)样式表统称,通过css来设置div标签样式,这一切常常我们称之为div+css。

表格

以前html直接设置高度 width="300"这种方式嵌入表格标签内,而且无需带单位,默认以px(像素)为单位。

例子:

我的高度为100px
我高度为50px

分别设置了高度为100px和50px的两行表格

DIV的布局方法

CSS 代码

.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}

Html body内代码:

演示,内容

测试内容高度超出演示实例,divcss5实例

完整CSS html最小高度实例代码:

"/TR/xhtml1/DTD/">

CSS 高度实例

演示,内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例,实例

CSS 宽度

传统Html 宽度属性单词:width 如width="300";

CSS 宽度属性单词:width 如width:300px;

HTML宽度与DIV+CSS对比

1、传统html中宽度width="300",即设置对应元素宽度为300px(像素)。而宽度值后无需跟单位,默认情况下以像素(px)为单位。

如:我的宽度为300px

即:设置了对应表格td的宽度为300px.

2、div css中宽度设置width:300px;,即设置对应CSS样式为300px,这里需要跟单位。

如:#header{ width:300px;}

即:定义header CSS选择器样式为300px宽度。

而在标签运用:

CSS 宽度自适应

常常我们看见一个网页宽度随浏览器宽度改变而自动改变,宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。

如果网页总宽度为80%即width:80%;,将使此宽度知道自适应宽度为浏览器80%。当然前提是设置最外层没有宽度限制条件下。

DIV CSS 自适应宽度例子:

CSS样式代码:

Html中body div代码:

我是80%自适应宽度

CSS边框

CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性

Html表格控制边框:

border="1" bordercolor="#000000"

说明:控制表格边框宽度为1px,颜色为黑色,默认为实线样式边框

DIV CSS边框:

border-color:#000; border-style:solid; border-width:1px;

说明:以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框。

边框样式包括

设置上边框:border-top:

设置下边框:border-bottom :

设置左边框:border-left:

设置右边框:border-right :

边框显示样式:

border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

参数值解释:

none : 无边框。与任何指定的border-width值无关

hidden : 隐藏边框。IE不支持

dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线

dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线

solid : 实线边框

double : 双线边框。两条单线与其间隔的和等于指定的border-width值

groove : 根据border-color的值画3D凹槽

ridge : 根据border-color的值画菱形边框

inset : 根据border-color的值画3D凹边

outset : 根据border-color的值画3D凸边

例子:

设置上边框为1px实线黑色边框。

border-top-color:#000; border-top-style:solid; border-top-width:1px;

或简写 border-top:#000 solid 1px;

完整DIV CSS实例:

实例内容设置CSS 命名为yangshi的css 选择器,设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。

CSS 代码:

div,body{ border:0; margin:5px; padding:0;}/* 初始化网页样式 */

.yangshi{ border:1px solid #000; width:200px; height:50px;}/* 设置对象样式 */

HTML中对应DIV代码:

divcss5实例-CSS 边框实例

这是一个 CSS 实例

CSS 背景

background CSS手册查询-background手册

background-color 设置颜色作为对象背景颜色

background-image 设置图片作为背景图片

background-repeat设置背景平铺重复方向

background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。

background-position 设置或检索对象的背景图像位置。

图片背景样式(固定、滚动)

实现这个效果使用CSS单词是background-attachment 当然通常情况下背景默认是固定的如果是自己使用CSS background简写则如上图。

background-attachment使用解析:

background-attachment:fixed; 背景固定

background-attachment:scroll 背景图像是随对象内容滚动

浮动 float

float的作用:通过css定义float(浮动)让div样式层块,向左或向右(靠)浮动。

float语法:

float : none | left |right

参数值:

none : 对象不浮动

left : 对象浮在左边

right : 对象浮在右边

效果图:如下。Css样式实例内容,我们让文字和图片在一个固定宽度div层内,让蓝色背景文字内容居右,小图片居左。

网站,测试内容

例子:

1、首先我们设置一个最外层的宽度为300px,高度为200px的css命名为box的css选择器代码如下(知识点px是什么意思)

.box{width:300px; height:200px;}

2、设置box内的文字内容部分css样式命名为yangshi,并设置背景为蓝色,宽度为120px,居右浮动

.yangshi{ width:120px; float:right; background:#0066FF;}

3、设置图片居左浮动div+css样式

img { float: left;}

4、body内的div布局,代码如下

网站,测试内容

说明:这里img标签是链接外部图片,图片名为

接下来我们演示使用div+css让这里小图片居右(上个例子是居左),蓝色背景文字内容区居左。这里我们只需要改变yangshi的float:right;为float:left和图片css样式img { float: left;}为img { float: right;}

CSS代码如下:

.box{width:300px; height:200px;}

.yangshi{ width:120px; float:right; background:#0066FF;}

img{ float:left;}

CSS 文字 css font

DIV+Css开发中设置字体常用css属性单词英文css font

font、font-family(字体)、

font-size(字大小)、

font-style(字样式)、

font-weight(加粗)、

text-decoration(下划线)、

font-variant(字母大小写)、

text-transform(英文大小写)、

letter-spacing(间隔)

例子:

加粗

Html常规加粗标签

以前html直接对对象加粗的标签如下:

两者效果相同。

加粗实例,代码如下:

我被加粗

我也被加粗了

我未被加粗

CSS 加粗基础技巧实例

CSS 代码

.yangshi1{ font-weight:bold}

.yangshi2{ font-weight:800}

Div html代码:

我被加粗

我也被加粗了

我未被加粗

Padding 属性

Padding属性包含了

padding left :左补距离(设置距左内边距)

;padding top:头顶补距离(设置距顶部内边距)

;padding right :右补距离(设置距右内边距)

;padding bottom :底补距离(设置距低内边距)。

其二维构建图可见CSS属性二维图。

Padding 解析图

padding left用法:

padding-left:10px; 这个意思距离左边补距10像素,可跟百分比如(padding-left:10%; 距离左边补10%的距离);

padding right用法:

padding-right:10px; 这个意思距离右边补距10像素,可跟百分比如(padding-right:10%; 距离右边补10%的距离);

padding top用法:

padding-top:10px; 这个意思距离顶边补距10像素,可跟百分比如(padding-top:10%; 距离顶边补10%的距离);

padding bottom用法:

padding-bottom:10px; 这个意思距离低边补距10像素,可跟百分比如(padding-bottom:10%;

距离底边补10%的距离);

注意padding中间的链接“ - ”号,设置距离值时用“ : ”并赋予值,并以“ ; ”结束,并且全部用小写半角字母。

CSS 注解

作用:css注解(css 注释)可以帮助我们对自己写的CSS文件进行说明,如说明某段CSS代码是什么地方、功能、样式等说明,以便我们以后维护具有一看即懂的方便性,同时在团队开发网页是时候合理适当的注解有利于团队看懂css样式是对应html哪里的,以便顺利快速开发div css网页。

CSS注解是以“/*”斜杠一个星号开始,以“*/”星号斜杠结束,注解说明内容放到“/*”“*/”中间。

css注解——div+CSS注释示例如下:

/* css注解实例css注释实例 */

/* body定义 */

body{ text-align:center; margin:0 auto;}

/* 头部css定义 */

#header{ width:960px; height:120px;}

CSS超链接

超链接的代码

DIV+CSS

解析如下:

href 后跟被链接地址目标网站地址这里是/

target

_blank -- 在新窗口中打开链接

_parent -- 在父窗体中打开链接

_self -- 在当前窗体打开链接,此为默认值

_top -- 在当前窗体打开链接,并替换当前的整个窗体(框架页)

CSS可控制超链接样式 css链接样式 如下

a:active是超级链接的初始状态

a:hover是把鼠标放上去时的状况

a:link 是鼠标点击时

a:visited是访问过后的情况

超链接样式案例

1、通常对全站超链接样式化方法

a{color:#333;text-decoration:none; } //对全站有链接的文字颜色样式为color:#333;并立即无下划线text-decoration:none;

a:hover {color:#CC3300;text-decoration:underline;}//对鼠标放到超链接上文字颜色样式变为color:#CC3300;并文字链接加下划线text-decoration:underline;

2、通过链接内设置类控制超链接样式css方法

案例超链接代码CSS

对应CSS代码

i{color:#333;text-decoration:none; }

i:hover {color:#CC3300;text-decoration:underline;}

通过这样的设置可以控制链接内的css类名为“yangshi”超链接的样式

3、通过对应超链接外的父级的css类的css样式来控制超链接的样式

案例超链接代码

CSS

对应CSS代码

.yangshi a{color:#333;text-decoration:none; }

.yangshi a:hover {color:#CC3300;text-decoration:underline;}

这里值得注意的是i与.yangshi a的样式css代码区别

字体(font-family)

CSS运用实例代码:

.divcss5{ font-family:黑体;}

我也是黑体字体

Html的文字字体设置代码:

我是黑体字

边距 margin

CSS优化

CSS代码优化地方:

1、border(CSS边框)简写:

border-top:1px solid #000;border-bottom:1px solid #000;border-left:1px solid

#000;border-right:1px solid #000;

可以简写为:border:1px solid #000;

2、padding(CSS padding)简写:

padding-top:1px;padding-right:2px;padding-bottom:3px;padding-left:4px;

可简写为:padding:1px 2px 3px 4px;

padding-top:1px;padding-right:1px;padding-bottom:1px;padding-left:1px;

可简写为:padding:1px;

3、margin简写

margin-top:1px;margin-right:2px;margin-bottom:3px;margin-left:4px;

可简写为:margin:1px 2px 3px 4px;

margin-top:1px;margin-right:1px;margin-bottom:1px;margin-left:1px;

可简写为:margin:1px;

4、background简写

background-color:#000;可以简写为background:#000;

background-image:url(图片地址)

可简写为:background:url(图片地址)

5、font简写

font-size:12px; line-height:12px; font-family:Arial, Helvetica, sans-serif;

可简写为:font:12px/12px Arial, Helvetica, sans-serif;

二、CSS重用优化

这里主要介绍是CSS代码的共用属性提取来达到节约代码、维护方便

CSS实例如下:

.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}

.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}

他们都有相同高度、宽度、浮动、文字大小,而只有内容居左居右不同

我们就可以提取他们相同属性

优化后:

.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}

.yangshi_b{text-align:right; }

CSS ID与CSS CLASS

Css id 知识

一个网页里ID只能使用一次。当然即使一个id在一个网页内被使用多次,其CSS样式仍然可以实现生效,但是一般规定W3C标准是使用一次

id 选择器以 "#" 来定义,命名CSS选择器。

定义命名css id选择器例子:

#yangshi1{color:#F00;}定义红色实例

#yangshi2{color:#0F0;}定义绿色

对应html中div引用

我颜色为红色

我颜色为绿色

一个div标签的定义只能使用一个id如:

测试内容

测试内容

两个都是不正确的,并且CSS样式属性也不能生效- 成为CSS 失效之一。

CSS class 知识

与CSS ID 不同 class 可以在网页中多次用到。

Class 选择器定义以“.”来定义。定义css class选择器例子:.yangshi1{color:#F00;} 定义文字为红色.yangshi2{font-size:28px;}定义文字大小为18px

对应html中div+css引用:

我颜色为红色

我字体大小为28px

我颜色为红色文字大小为28px

以上即是“yangshi1”“yangshi2”类的正确使用方法

图片 img

图片实例

Img{padding:0; border:0;}

列表 LI

li不能单独使用,需要与

      配合使用,使用范例:

      1. div+css范例
      2. div+css范例之li

      • div+css范例
      • div+css范例之li

      此内容来自:唐山小鱼网络工作室

      更多内容请访问


本文标签: 样式 宽度 设置 边框 内容

更多相关文章

linux笔记--文件内容操作和历史命令

4月前

[db:摘要]

win10电脑恢复默认字体样式

4月前

[db:摘要]

Dell G3 3579更换固态硬盘,保留C盘内容

3月前

[db:摘要]

python 一个word文档的某页内容复制到另一个word文档的第二页

3月前

[db:摘要]

知云翻译选中不连续内容

3月前

[db:摘要]

关于腾讯云服务器备案全流程 内容

3月前

[db:摘要]

腾讯视频播放内容下载流程

3月前

作者:蓝眼泪 这里用徐州市邳州市宣传视频下载作为参考 1 登录hotbox官网 https:www.urlgot hotbox账号 账户 136841202qq 密码 xxx 2 粘贴视频网址 https:

word 文字超出表格边框怎么办

3月前

问题: ​​填写word中的表格时,文字会超出表格 解决​方法: ​1. ​开启标尺功能:视图->标尺 ​2. 通过调节标尺的3个滑块进行调节 ​

计网 - 内容分发网络 : CDN 回源的工作机制初探

3月前

文章目录 PreCDN 是什么?内容的分发回源小结QA请简述 CDN 回源是如何工作的?如果你的应用需要智能 DNS 服务,你将如何实现? Pre 我们使用的电商、直播、社

Win11如何更改字体样式?Win11更改字体样式的方法

2月前

很多小伙伴在使用电脑的时候都喜欢将使用的字体模样改为自己喜欢的,不过也有不少小伙伴在升级到Win11系统之后就不知道怎么去更改系统的字体样式,因此就为大家带来一个更改Win11系统字体方法。 还

如何清除计算机c盘的多余内容,怎么删除C盘多余的文件|电脑c盘哪些可以删除...

2月前

网上有不少用户在选购电脑的时候,会选择1TB以上的硬盘,因为那样可以存储更多的东西。但是在安装操作系统的时候,C盘的分区,也就是系统盘&#xff

python 打开浏览器访问地址并输入内容

2月前

import timefrom selenium import webdriverfrom selenium.webdrivermon.keys import Keysimport oschromedriver"C:

Python网络爬虫抓不到全部的html内容怎么办

2月前

一种行之有效的解决方案是使用Selenium webdriver。 详情请参考我的另一篇博文。 Python使用Selenium Webdriver爬取网页所有内容

网页右边没有滚动条,内容超出也看不到怎么办?

2月前

遇到的问题:博主正在进行vue组件开发,将主页面添加了组件之后,发现在浏览器中打开内容超出但没有滚动条 解决方法:我们可以找一下css中的设置&

Chatgpt页面内容错位

2月前

问题如图: 提问题后: 有在加载答案,但是内容显示不出来 原因:样式问题(或其他) 解决方法:空白处右键-检查-删除overf

Mozilla Firefox正在尝试集成ChatGPT等帮助用户总结或改写网页内容

2月前

Mozilla基金会开启了一项新计划:在接下来几个月里尝试在Firefox浏览器里集成 ChatGPT 等 AI 服务,帮助用户在网页上总结内容或者改写内容等。Firefox浏览器集成的 AI 服

解决 谷歌 浏览器 黄色 背景 的 css 样式

2月前

解决 谷歌 浏览器 黄色 背景 的 css 样式 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fi

Linux-实现从windows复制内容到vmware虚拟机Linux系统上

1月前

实现从windows复制内容到vmware虚拟机Linux系统上 一、获取安装包二、以root身份,打开终端命令窗口三、在根目录下新建一个opt目录,专门存放安装包四、将安装包VMwareTools-10.0.0-2977863.tar.

中间显示内容_爱色丽i1 studio显示器校色详细流程

1月前

在编辑小任对顾客技术支持的经验中发现,一上来就说显示器的校色软件不会用并要求小编上门技术支持的顾客,一般是两种顾客:没有太多电脑使用经验的老人家,和还没有安装软件但先设想了校色操作很难的顾客。因此小编除了告知“使用说明书”已

Word文档复制粘贴内容跳到下一页问题的解决方法

19天前

Word文档复制粘贴内容跳到下一页问题的解决方法 在日常办公和学习中,Word文档作为最常用的文字处理工具之一,承担着大量的文字编辑和排版任务。然而,有时用户在进行复制粘贴操作时,会遇到内容突然跳到下一页的情况,这不仅影响了文档的整洁性,

发表评论

全部评论 0
暂无评论