css样式属性-字体和隐藏
1、字体
font-family:字体;
<body>
<div style="font-family:宋体">宋体</div>
</body>
font-size:字号;
<body>
<div style="font-family:宋体; font-size:36px">宋体</div>
</body>
font-weight:bold/normal字体加粗还是正常
<body>
<div style="font-family:宋体; font-size:36px; font-weight:bold">宋体</div>
</body>
font-style:italic/normal 倾斜还是正常
<body>
<div style=" font-style:italic">宋体</div>
</body>
color是字体颜色
<body>
<div style=" font-style:italic; color:#F00">宋体</div>
</body>
text-decorration:underline/overline/line-through下划线上划线删除线;none正常不有线
<body>
<div style=" text-decoration:line-through;">电话是法国和师傅赶紧的还能够的话你</div>
</body>
<body>
<div style=" text-decoration:underline;">电话是法国和师傅赶紧的还能够的话你</div>
</body>
<body>
<div style=" text-decoration:line-through;">电话是法国和师傅赶紧的还能够的话你</div>
</body>
text-align:水平居中方式,center/left/right
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center">师傅赶紧你
</div>
</body>
vertical-align:垂直对齐方式middle、top、bottom 必须和line-height:行高一起使用,不然垂直居中不起作用
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px">师傅赶紧你
</div>
</body>
2、隐藏
display:none不显示(在浏览器中不占空间);display:block显示为块,自动换行;display:inline-block显示为块不自动换行,宽高可调整;
display:inline效果同span标签,不自动换行不可调整宽高
visibility:hidden隐藏但是在浏览器中还占空间 visibility:visible显示
隐藏前
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">一会要隐藏
</div>
<div style=" width:100px; height:10px"></div>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你
</div>
</body>
用display隐藏
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; display:none">一会要隐藏
</div>
<div style=" width:100px; height:10px"></div>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你
</div>
</body>
用visibility隐藏;隐藏后隐藏的表格在浏览器上还是占着一定的空间的
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; visibility:hidden">一会要隐藏
</div>
<div style=" width:100px; height:10px"></div>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px;">师傅赶紧你
</div>
</body>
超出部分隐藏overflow
<body>
<div style="width:100px; height:100px; background-color:#F00; text-align:center; vertical-align:middle; line-height:100px; overflow:hidden">一会要豆腐宴哦哦还是对方后卫i放到空间发士大夫藏
</div>
</body>
css样式属性-字体和隐藏的更多相关文章
- CSS样式属性——字体+文本
CSS属性可分为以下几类:字体.背景.文本.位置.布局.边缘.列表 1. 字体——主要包括文字的字体.大小.颜色.显示效果等基本样式 font-family:用于设置字体系列 font-size:字体 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- IE6支持兼容min-width、max-width CSS样式属性
IE6支持兼容min-width.max-width CSS样式属性 让IE6支持max-width.IE6支持min-width样式 我们在写CSS的时候,常常会遇到让一个图片或一个布局不能超出设定 ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- HTML布局相关的CSS样式属性
# 转载请留言联系 注意,样式属性是写进CSS里面的. 布局常用样式属性: width 设置元素(标签)的宽度,如:width:100px; height 设置元素(标签)的高度,如:height:2 ...
- 11-18网页基础--第二部分CSS样式属性(1)
第一课:样式属性 style 样式:style样式不仅可以直接在<body>中设置成整个网页的样式.格式:为了将样式.格式多样化,也可以将style单独抽出来,作为一个独立的个体,放在&l ...
- CSS样式属性单词之Left
通常left单独在CSS中设置无效,需要在使用position属性下使用才能生效起作用.left左靠多少距离(距离左边多少)的作用. left 一.left认识与语法 left翻译:左边,左 在CSS ...
- css样式实现字体删除线效果
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- IE6支持min-width、max-width CSS样式属性
1.IE6支持max-width解决方法 IE6支持最大宽度,解决CSS代码: .yangshi{ max-width:1000px; _width:expression((document.docu ...
随机推荐
- Elasticsearch学习之基本核心概念
在Elasticsearch中有许多术语和概念 1. 核心概念 Elasticsearch集群可以包含多个索引(indices)(数据库),每一个索引可以包含多个类型(types)(表),每一个类型包 ...
- Atom使用插件精选
小颖之前公司的大哥推荐小颖用的编辑器是atom,之前都是他给小颖了一个atom插件安装列表,小颖电脑出了点问题,所以后来小颖把那弄丢了,小颖重装atom后,就不知道要安装什么插件,所以也百度了很多,今 ...
- win7下桌面右键一直转圈圈的解决方法
今天公司同事的电脑,在进入win7系统后,桌面右键一直转圈圈,找我解决这个问题. 经过我观察,他电脑只是在桌面上右键有此现象,在其他地方并无此现象. 因此可以得出结论,此现象很可能与桌面右键有关,经上 ...
- 【CF913G】Power Substring 数论+原根
[CF913G]Power Substring 题意:T组询问,每次给定一个数a,让你求一个k,满足$2^k$的10进制的后$min(100,length(k))$位包含a作为它的子串.你只需要输出一 ...
- iOS - Reveal逆向分析任意iOS应用的UI界面
在iOS逆向工程中,Reveal扮演着重要角色,一般情况下,Reveal在iOS开发过程中可以分析UI界面的状态,同样也可以应用于分析其他任意的App.Reveal是一个很强大的UI分析工具,可非常直 ...
- TFS二次开发08——分支(Branch)和合并(Merge)
一:创建分支 private static void BranchFile(Workspace workspace, String newFilename) { String branchedFi ...
- Java Eclipse编译后产生的字节码文件,用DOS命令符怎么打开
在很多初学者刚刚接触eclipse的时候,写完一个代码文件.例如 Demo.java 通过run as a java application生成之后,会产生一个Demo.class. Demo.cla ...
- matplotlib的下载和安装方法
官网:http://matplotlib.org/ Installation节 Visit the Matplotlib installation instructions. Installing节 ...
- 2018/03/14 每日一个Linux命令 之 ln
ln 链接命令 -- 类似Windows的快捷方式,实际等于建立了一个文件同步的链接,我想,MAC上面复制一个文件到另一个路径,特别快,它可能就是建立了一个链接. -- 在通俗点讲,就是你创建链接之后 ...
- 匿名内部类的参数引用只能是final,可能遇到的问题及其解决
这个是我碰到比较多次的问题,一开始是不解,不过查了下大家都觉得没什么,而且只是加个final好像影响也不大,于是我就直接加个final了事,之后也不管了 直到昨天: 遇到了这个宿命般的问题 难道解决方 ...