admin 管理员组文章数量: 887021
2023年12月18日发(作者:中职c语言入门教学视频)
Css+div总结的一些常用CSS标签及属性
CSS中的长度
绝对单位:几乎不用在网页中
in 英寸 1in = 2.54cm
cm 厘米 1cm = 0.394in
pt 磅 1in = 72pt
pc pica 1in = 6pc
相对单位:较常用
em 1em = 相应字体的font-size值
ex 1ex = 相应字体中的小写x字母的高度值,较难求得,一般取0.5em
px 最为常用的
CSS中的元素分类
display 设定元素所属类别,不可继承
none(设定为不显示在屏幕上)
block(块级元,包括 P,H1-H6,list,div,body)
inline(内联元,包括 a,em,span)
list-item(列表元,如 LI)
颜色与背景类
color 设置文字颜色
#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)
H1{color:red}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255,0,0)}
H1{color:rgb(100%,0%,0%)}
background-color 设置背景颜色,格式同上;不可继承,可用于所有元
BODY{background-color:red}
BODY{background-color:#f00}
BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)}
BODY{background-color:rgb(100%,0%,0%)}
background-image 设置背景图片,默认为none,不可继承,可用于所有元
url(imageURL) none
body{backround-image:url();}
background-repeat 设置背景图片是否重复排列,不可继承,用于所有元
repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列)
No-repeat(不重复排列,默认值)
BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;}
background-attachment 设定背景图片是否卷动,不可继承,用于所有元
scroll(随网页卷动,默认值) fixed(不随网页卷动)
BODY{background-attachment:fixed;}
background-position 设定背景图片或背景颜色开始显示的位置,不可继承,用于块级元和可替换元
top,buttom,left,right,center(用关键字)
70px 10px(用长度值)
50% 30%(用百分比)
BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;}
background 定义背景综合属性,不要求顺序,各属性值以空格分开
BODY{background:#ffcc00 url() fixed center}
字型类
font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。可继承,用于所有元
P{font-family:宋体,楷体,黑体,"Time New Rom";}
font-style 设定字型样式,可继承,用于所有元
Normal(正常,默认值) italic(斜体) objlique(直斜体)
P{font-style:italic;}
font-variant 需要特定的字体配合,可继承,用于所有元
Normal(默认) small-caps(如果是中文字型则将字型缩小显示,如果是英文则全部改为较小的大写)
H3{font-variant:small-caps;}
font-weight 设定字体粗细,可继承,用于所有元
Normal(默认) bold bolder lighter 900
由于浏览器支持程度不同,一般只用normal和bold两种属性
P{font-weight:bold;}
font-size 设定字体的大小,可继承,用于所有元
绝对大小:xx-small x-small small medium(默认值) large x-large xx-large;
相对大小:larger smaller
数字表示可用单位:磅(pt),像素(px),英寸(in),厘米(cm);
亦可用百分比表示
H2{font-size:36pt;}
P{font-size:200%;}
font 设定字型的综合属性,必须含有字体名称和字体大小,顺序如下
{font-style font-variant font-weight font-size /line-height
font-family;} P{bold 12pt/14pt impact,Arial;}
文字类
letter-spacing 设定文字间距,默认为0,可为负值,可继承,用于所有元
P{letter-spacing:5pt;}
text-decoration 设定文字加上下划线、删除线等效果,不可继承,用于所有元
none(无,默认值) underline(下划线) overline(上划线) line-through(删除线)
vertical-align 设定文字或图片垂直方向的对齐方式
baseline(默认值) sub(下标) super(上标) top(垂直向上对齐) middle(垂直居中) bottom(垂直向下对齐) 百分比(相对于行高,可为负值)
text-transform 转换英文字母大小写,可继承,用于所有元
none(默认值) capitalize(首字母大写) uppercase(所有英文字母大写)
lowercase(所有英文字母小写)
text-align 设置文字的水平对齐方式,可继承,用于块级元
left(左对齐) right(右对齐) center(水平居中) justify(左右对齐)
text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排,可为负值,可继承,用于块级元
line-height 设定行高,声明方式有标准行高、固定值表示法、百分比行高(相对于字体尺寸)、字型大小比例行高等,可继承,用于所有元
white-space 设定空白符处理方式,不可继承,用于块级元
pre(不忽略块中的空白符) nowrap(文字不在块中自动换行) normal(忽略空白符,默认值)
列表类
list-style-type 有序列表的编号方式(供标记使用),可继承
none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母
list-style-type 无序列表的符号样式(供使用),可继承
none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号
list-style-image 无序列表的自定义符号样式,可继承
url(图片名称) none(默认值)
UL{list-style-imag:url();}
list-style-position 设置列表清单符号缩排属性,可继承
outside(凸排,默认值) inside(缩排)
UL{list-style-imag:url(); list-style-position:outside;}
list-style 列表清单项目的综合设定,属性之间用空格隔开
UL{list-style-imag:url() inside;}
边界及其相关类
margin 标记元素边界值的综合设定,可为负值,不可继承,用于所有元。应用于块级元时,纵向相邻边界被压缩/重叠;应用于内联元时,不影响文本的行高。
亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值,其顺序为上、右、下、左边界,如:DIV{margin:12pt
15pt 20pt 16pt;}
声明3个值,其顺序为上、右、下,缺少的左边界取其对边(右),如:DIV{margin:12pt 15pt 16pt;}
声明2个值,其顺序为上、右,缺少的下、左边界取其对边,如:DIV{margin:12pt
15pt;}
声明1个值,则4个边界同一个值,如:DIV{margin:15pt;}
padding 设定标记内容与标记边框之间的留白的综合设定,不能为负值,不可继承,用于所有元。也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。
border-width 标记元素边框宽度的综合设定。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值
border-color 标记元素边框颜色的综合设定(规则类似于margin属性)。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值
border-style 标记元素边框样式的综合设定(规则类似于margin属性)。边框样式有none(默认值),dotted,dashed,solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值
border 标记元素4个边框的综合设定,可以分别声明边框宽度、边框样式、和边框颜色
DIV{border:5pt solid #ff0000;}
width 设定标记元素的宽度
height 设定标记元素的高度
float 设定标记元素与文字间的相对位置(文字绕排方式),不可继承,用于所有元
none:以默认方式显示
left:标记元素靠左,文字在右边绕排
right:标记元素靠右,文字在左边绕排
clear 设定标记元素与文字间的相对位置(与float不同的是标记元素两边都不绕排),不可继承,用于所有元
none:以默认方式显示;
left:标记元素靠左,右边无文字绕排;
right:标记元素靠右,左边无文字绕排;
定位
z-index 设定标记元素的堆叠层次,取值为整数,也可以是负数,数值大的在上层,不可继承,用于定位元
visibility 设定标记元素是否可见,不可继承,用于所有元
inherit:取默认值 visible:可见 hidden:不可见(隐藏) collapse
position 设定定位样式,不可继承,用于所有元
static(默认值) relative(相对定位) absolute(绝对定位) fixed inherit
目前最常用到的DIV相关属性有:height,width,list-style,UL,LI,margin,float,background,padding等…一小段例子:
#banner{height:90px;width=650px;list-style:none; margin-top:10px;
margin-left:10px; float:left; background:#DADADA;
margin-bottom:10px;background-image:url(../image/);}
height:90px; // 高度
width:650px; // 宽度
list-style:none; //设置该行文本不显示最前面的小黑点,若想显示设置
list-style:inside
margin-top:10px; // 设置上边距为10px;其他下左右同理。
float:left // 为整个元素靠左对齐。
background-image:url(../image/); // 背景图片。
font-family:verdana;字体
font-size:12px; 字体大小
background:#33ffdd; 背景颜色,颜色值是#cccccc;可以简写为#ccc;或者是#ddccee;这样简写为#dce;当从左到右的rrggbb值其中rr,gg,bb值三组都一样时就能简写
background:#33ffdd url() repeat-x left top; 背景图,其中repeat-x为水平重复 left top 为水平向左,垂直向上
border:1px solid #fff; 边框1px 实线 颜色值
float:left; 浮动向左,浮动的意思就是因为DIV只有一行,没有列,如果要想有一行二列,就是为这二个DIV设置浮动,才可以有列出来。以下是一行三列示例:
由这个小例子就可以知道,如果想象表格一个,就一个套一个,跟表格一样,关键能让DIV有列出来就好办了。
height:20px; 高度20px;
text-align:left; 文本对齐方式向左,还有居中,还有向右
font-weight:bold; 字体加粗
width:20px; 这是宽度
line-height:24px; 这是行高
overflow:auto; 滚动条自动,意思就是当内容越过设定的高度或者宽度时就会出现滚动条,这个适合任何地方,包括单元格,文本域,DIV, margin:3px 3px 3px 3px; 这个有多种写法四个都写的话,意思就是对象的外边距都为3px的意思,四个都写的时候顺序是 上、右、下、左 当四个都一样时可以简写为maring:3px; margin:3px 6px; 当只有二个时意思就是上下外边距为3px,左右外边距为6px;
padding:3px 3px 3px 3px; padding是内边距其他意思跟margin一样
color:对象颜色,适合用文本,表单,任何对象,img不适用.
img { border:0px;}意思是图像边框为0px,因为在有些情况下默认设置时有时候图像会有1px的边框,所以这个在默认设置是要设置的。
body { font-family:verdana; font-size:12px; background:#59606A
url(images/main_) repeat-x; margin:0px; padding:0px;}
form,input,select,submit,textarea { font-family:arial; font-size:12px;
padding:0px; margin:0px;}* html form { height:1%;}
img { border:0px;}
上面这段是默认设置,根据情况有所不同,默认设置意思就是当有网页内容时上面所设置的参数比如字体, 颜色,背景,背景颜色等等,还有外边距,内边距的设置,这些不是必要的,但是如果设置一些默认设置可以精简代码。
.t11-en-03 { font-size:12px!important; font-size:11px; }
!important这个意思是(更重要),当写上这个时,这个!important前面的参数设置在除IE外才有效果,后面的是在IE内核的浏览器的效果,适合于任何参数如:
.cor2 { color:#fff;!important; color:#f00; } 意思就是当在除IE外的浏览器上颜色是白色,在IE上的颜色是红色
以下是链接的设置:
a:link,a:visited { text-decoration:none;} 这个是简写,就是链接跟点击后的状态为一样时可以这样子写
a:hover { text-decoration:underline;} 这个是鼠标移上去的效果
text-decoration:underline; 这个是下划线的设置,这里是有下划线如果underline改为none;是没有下划线的意思在这里是给整体的网页设置链接样式
以下这个是给一个特定的对象设置
.aa65 a:link,.aa65 a:visited { text-decoration:none;}
.aa65 a:hover { text-decoration:underline;}
上面这里有.aa65意思就是说当一个对象绑定的.aa65的class时,里面的链接就会象上面设置的效果
DIV常用样式
1.定义DIV
分析一个典型的定义div例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
说明如下:
层的名称为sample,在页面中用
MARGIN是指层的边框以外留的空白,用于页边距或者与其它层制造一个间距。"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距,如果都一样,可以缩写成"MARGIN: 10px;"。如果边距为零,要写成"MARGIN: 0px;"。注意:当值是零时,除了RGB颜色值0%必须跟百分号,其他情况后面可以不跟单位"px"。MARGIN是透明元素,不能定义颜色。
PADDING是指层的边框到层的内容之间的空白。和margin一样,分别指定上右下左边框到内容的距离。如果都一样,可以缩成"PADDING:0px"。单独指定左边可以写成"PADDING-LEFT: 0px;"。PADDING是透明元素,不能定义颜色。
BORDER是指层的边框,"BORDER-RIGHT: #CCC 2px solid;"是定义层的右边框颜色为"#CCC",宽度为"2px",样式为"solid"直线。
如果要虚线样式可以用"dotted"。
BACKGROUND是定义层的背景。分2级定义,先定义图片背景,采用"url(../images/bg_)"来指定背景图片路径;其次定义背景色"#FEFEFE"。"no-repeat"指背景图片不需要重复,如果需要横向重复用"repeat-x",纵向重复用"repeat-y",重复铺满整个背景用"repeat"。后面的"right bottom;"是指背景图片从右下角开始。如果没有背景图片可以只定义背景色BACKGROUND: #FEFEFE
COLOR用于定义字体颜色,上一节已经介绍过。
TEXT-ALIGN用来定义层中的内容排列方式,center居中,left居左,right居右。
LINE-HEIGHT定义行高,150%是指高度为标准高度的150%,也可以写作:LINE-HEIGHT:1.5或者LINE-HEIGHT:1.5em,都是一样的意思。
WIDTH是定义层的宽度,可以采用固定值,例如500px,也可以采用百分比,象这里的"60%"。要注意的是:这个宽度仅仅指你内容的宽度,不包含margin,border和padding。但在有些浏览器中不是这么定义的,需要你多试试。
2盒模型
自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个
盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落、列表、标题、图片以及层
楚margin,background-color,background-image,padding,content,border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图,希望便于你的理解和记忆。
3.辅助图片一律用背景处理
用XHTML+CSS布局,有一个技术一开始让你不习惯,应该说是一种思维方式与传统表格布局不一样,那就是:所有辅助图片都用背景来实现。类似这样:
BACKGROUND: url(images/bg_) #FEFEFE no-repeat right bottom;
尽管可以用直接插在内容中,但这是不推荐的。这里的"辅助图片"是指那些不是作为页面要表达的内容的一部分,而仅仅用于修饰、间隔、提醒的图片。例如:相册中的图片、图片新闻中的图片,上面的3d盒模型图片都属于内容的一部分,它们可以用元素直接插在页面里,而其它的类似logo,标题图片,列表前缀图片都必须采用背景方式或者其他CSS方式显示。
这样做的原因有2点:
将表现与结构彻底相分离(参考阅读另一篇文章:《理解表现与结构相分
离》),用CSS控制所有的外观表现,便于改版。 使页面更具有易用性,更有亲和力。例如:盲人使用屏幕阅读机,用背景技术实现的图片就不会被朗读出来。
版权声明:本文标题:Css div 常用CSS标签及属性 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/free/1702828813h432423.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
更多相关文章
html前端使用腾讯地图入门教学:在地图上标记位置
本文教给大家如何使用JavaScript API进行基于LBS的基础开发:在地图上标记位置。提供地图服务的有高德地图、百度地图和腾讯地图,腾讯地图官网上的JavaScript API已升级到了JavaScript API GL,Javasc
Android Glide加载网络图片不显示,但浏览器能打开图片
使用Glide版本:4.8.0 implementation com.github.bumptech.glide:glide:4.8.0annotationProcessor com.github.bumptech
修复损坏图片的c语言,免费修复损坏的JPEG照片和图像
昨天新买了个U盘,把照片存进去后,刚开始是好的,退出放照片的文件夹之后,再重新进入,却显示照片已损坏?——来
新作:Sunny Screenshot 是 截图 & 钉图的跨平台软件,亦支持“OCR”和“图片翻译”功能
简 述: 仅纯粹 C 开发了一款 Sunny 截图软件,原生应用;支持 “截图 & 钉图”、“图片翻译”、“OCR提取文字” 等功能,多套皮肤和 Win10 的亚克力
解决Chrome浏览器插件安装报错‘Google已将XX标记为恶意扩展程序并阻止安装’
1.chrome版本: 2.步骤: 如图所示路径“设置-隐私设置和安全-安全” 3.接上一步进入‘安全’后将安全浏览级别设为“不保护(不建议)”&am
如何修复Win7照片查看器无法显示的图片
最近,经常碰到有人反映“手机下载的图片无法打开”的问题。具体表现为在Windows7中打开图片,提示“Windows 照片查看器无法显示此图片,因为计算机上的可用内存可能不足
计算机中桌面图标构成要素,谁能简述windows桌面的基本组成元素及其功能
任务栏、桌布(背景)、桌面图标(这些是最基础的)。 任务栏包括开始按钮、中英文切换按钮等,显示正在运行的程序。 桌布就是给你看的。 桌面图标方便你工作。 桌面(英文:Desktop)&#x
PIL Image模块 show函数不能正常显示图片
在win7下面使用PIL中Image的show()函数时,执行下列代码: from PIL import Image imgImage.open("G:\1.png")
Windows系统图片不显示缩略图如何解决
Windows系统图片不显示缩略图如何解决 文章目录 Windows系统图片不显示缩略图如何解决一、问题所在二、解决问题三、最后我想说 一、问题所在 最近学习的时候,突然出现了图片不显示缩略略图,
小白用chatgpt编写python 爬虫程序代码 抓取网页数据(js动态生成网页元素)
jS动态生成,由于呈现在网页上的内容是由JS生成而来,我们能够在浏览器上看得到,但是在HTML源码中却发现不了 一、注意:代码加入了常规的防爬技术 如果
Flutter 加载网络图片——Failed host lookup: ‘ 地址‘ (OS Error: No address associated with hostname, errno = 7)
Imagework加载网络图片无效的解决办法 按照学习教程使用Image组件时,发现教程中图片可以显示,而自己的demo却显示不出图片。将图片地址扔到浏览器可以正常访问,神奇
python爬取手机app图片_python 手机app数据爬取
今天向大家介绍app爬取。 @ 一:爬取主要流程简述 1.APP的爬取比Web爬取更加容易,反爬虫没有那么强,且大部分数据是以JSON形式传输的,解析简单。 2.在APP中想要查看请求与响应(类似浏览器的开发者工具监听到的各个网络请求和响应
spingboot+mybatis+bootstrap 学生信息管理系统+图片上传下载系统Demo
spingbootmybatisbootstrap 学生信息管理系统图片上传下载系统Demo 适合新手入门学习使用,功能包括:学生信息录入、查询、删除;图片上传、下载、展示
发表评论