常用css属性
一、常用css属性
(1) *block(区块)
行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;
/*表格宽度自适应*/
th {
white-space: nowrap;
}
显示 display:
none; /*不显示,使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/
(2) *box(盒子)
宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
裁切 clip: rect(12px,auto,12px,auto)
(3) float(漂浮)
漂浮 float: left | right | none; 在页面布局的时候用的最多
常见用法
<div style='float:left;width: 50%;' >div1</div>
<div style='float:right;width: 50%;' >div2</div>
一个问题
子标签使用了float时候,父标签的样式失效
<div style='background-color:red;'>
<div style="float: left">div1</div>
<div style="float: left">div2</div>
</div>
解决方案一:clear: both
<div style='background-color:red;'>
<div style="float: left">div1</div>
<div style="float: left">div2</div>
<div style="clear: both;"></div> <!--加上clear:both之后就正常了-->
</div>
解决方案二:clearfix
<div style='' class="clearfix">
<div style="float: left">div1</div>
<div style="float: left">div2</div>
</div>
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
(4) position(定位)
fixed
一般用来写网页顶端的固定导航条,或者两侧的菜单。
<!--对于块级标签来说加上position:fixed之后,该div就不会占一整行,一般需要手动定义宽度,如width:100%-->
<div style="position:fixed;height:10%;color:white;width:100%;top:0px;">我是导航</div>
<div style="">
<div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;我是菜单</div>
<div style="float: right;width:80%;"><p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
<p>我是内容</p>
</div>
</div>
absolute与relative
这两者一般配合使用,用于调整div之间的相对位置
<div style="position:relative;width: 300px;height: 150px;">
<div style="position:absolute;float: left;width: 20%;bottom: 0px;right: 0px;">我是菜单</div>
</div>
(5) 透明度
.image{
opacity: 0.5
}
<img src="http://www.jotlab.com/wp-content/uploads/2008/08/python.jpg" style="opacity: 0.5; width:50%; height:50%; ">
(6) font(字体)
颜色 color: 数值;
大小 font-size: 数值;
字体 font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana
样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)
变体 font-variant: small-caps;(小型大写字母) normal;(正常)
(4) background(背景)
背景 background: transparent; /透视背景*/
颜色
图片 background-image: url() | none;
重复 background-repeat: inherit | no-repeat | repeat | repeat-x | repeat-y;
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
滚动 background-attachment: fixed | scroll;
位置 background-position:数值 | top | bottom | left | right | center;
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
简写 background:背景颜色 | 背景图象 | 背景重复 | 背景附件 | 背景位置 ;
(7) text(文本)
大小写 text-transform: capitalize | uppercase | lowercase | none;
修饰 text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
排列 text-align: justify | left | right | center;
缩进 text-indent: 数值 | inherit;
阴影 text-shadow:数值;
(8) border(边框)
边框样式 border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度 border-width: ;
边框颜色 border-color: top值 right值 bottom值 left值;
简写 border: width style color;
边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
(9) list-style(列表样式)
类型 list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none;
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
位置 list-style-position: outside | inside;
图像 list-style-image: URL;
简写 list-style:目录样式类型 | 目录样式位置 | url;
(10) margin(边界)
margin-top:10px; (上边界)
margin-right:10px; (右边界)
margin-bottom:10px; (下边界值)
margin-left:10px; (左边界值)
margin-inside:;
margin-outside:;
(11) padding(填充)
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
(12) vertical(垂直)
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
(13) a(链接)
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
(14) cursor(光标)
光标形状 cursor:hand | crosshair | text | wait | move | help | e-resize | nw-resize | w-resize | s-resize | se-resize | sw-resize;
/*也可以自定义*/
cursor: hand; /*链接手指*/
cursor: crosshair /*十字体 */
cursor: s-resize /*箭头朝下 */
cursor: move /*十字箭头, 朝右*/
cursor: help /*加一问号 */
cursor: w-resize /*箭头朝左 */
cursor: n-resize /*箭头朝上 */
cursor: ne-resize /*箭头朝右上 */
cursor: nw-resize /*箭头朝左上 */
cursor: text /*文字型*/
cursor: se-resize /*箭头斜右下 */
cursor: sw-resize /*箭头斜左下*/
cursor: wait /*漏斗*/
二、css实践
(1) css的三种写法
行内样式:写在对应标签的style属性里面
<html>
<head>
<title>Test</title>
</head>
<body>
<div style='123</div>
</body>
</html>
内页样式:写在HTML页面里面的style标签里面
<html>
<head>
<title>Test</title>
<style>
.logo{
background-color:red;
}
</style>
</head>
<body>
<div class='logo'>123</div>
</body>
</html>
外部样式:通过link标签引入CSS样式
<html>
<head>
<title>Test</title>
<link rel='stylesheet' href='common1.css'/>
</head>
<body>
<div class="logo">123</div>
</body>
</html>
.logo {
background-color: red;
color: white;
}
(2) 常规用例
p {font-family: "sans serif";} /*值为若干单词,则要给值加引号*/
.logo {background-color: red;}
.logo a,.logo p {background-color: red;}
#morra {background-color: green;}
a, div { color: red;} /*a或div都使用这个css*/
a div { color: red;} /*只有a下面的div使用该css*/
注:css 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。
三、Demo
<!DOCTYPE html>
<html>
<head>
<title>This is a demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
body {
background-color: #e1ddd9;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, SunSans-Regular, Sans-Serif;
color: #564b47;
padding: 0px;
margin: 0px;
}
#inhalt {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0px 0px -200px;
top: 50%;
left: 50%;
text-align: center;
padding: 0px;
background-color: #f5f5f5;
border: 1px dotted #000000;
overflow: auto;
}
p, h1 {
margin: 0px;
padding: 10px;
}
h1 {
font-size: 11px;
text-transform: uppercase;
text-align: center;
color: #564b47;
background-color: #90897a;
}
a {
color: #ff66cc;
font-size: 11px;
background-color: transparent;
text-decoration: none;
}
</style>
</head>
<body>
<div id="inhalt">
<p>
<h1>Morra's Demo</h1><br/><br/>
This area should be horizontally and vertically centered.<br/>
This text stays left aligned<br/>
<a href="http://www.cnblogs.com/whatisfantasy/">what is fantasy?</a>
</p>
<p>
</div>
</body>
</html>
常用css属性的更多相关文章
- css基础--常用css属性02
上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1 浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...
- html5--6-59 其他常用CSS属性
html5--6-59 其他常用CSS属性 实例 学习要点 了解opacity属性:透明度设定 了解cursor属性:自定义鼠标样式 了解CSS新单位rem和em的区别 了解轮廓outline的设置 ...
- 常用css属性记录
CSS常用属性: 字体属性:(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style: ...
- 常用css属性拓展
text-overflow:clip | ellipsis(默认值:clip)clip:当内联内容溢出块容器时,将溢出部分裁切掉.ellipsis:当内联内容溢出块容器时,将溢出部分替换为(...). ...
- day 40 文本属性 常用css属性 定位
一. 浮动的特性 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素由"字围"效果 4.收缩的效果 前提是标准文档流,margin的垂直方向会出现塌陷问题. 如果盒子居中: ...
- 界面设计常用CSS属性
CSS常用属性整理: 1 字体属性 font-family 设置使用的字体 font-style 设置字体的样式,是否斜体 font-variant 设置字体的大小写 font-weight 设置字体 ...
- css基础--常用css属性01
1 背景相关 背景颜色 background-color = 颜色名称/rgb值/十六进制值 背景图片 background-image = url('') 背景图片平铺方式 backgro ...
- 常用css属性总结
边框修饰:border------>top,bottom,left,right上下左右边框 分为:color,类型style{ groove,dashed,ridge,solid}一个值---- ...
- css属性(常用属性整理)
摘要:本文是我在学习前端的过程中整理的一些常用css属性,部分是css3新增的,因能力有限,文中如有错误,欢迎提出,我会及时修改.希望对大家有帮助! CSS属性 CSS属性 1 1. css颜色属性 ...
随机推荐
- select 语法
select 语句主要语法: SELECT select_list [ INTO new_table ] FROM table_source [ WHERE search_condition ] [ ...
- c#中的 virtual override 和abstract 以及sealed
1.如果父类方法没有加virtual关键字,即不是一个虚方法,则在子类中只能隐藏基类方法,而不能覆盖. 2.如果父类方法加了virtual关键字,即它是一个虚方法,在子类中一样可以隐藏. 3.如果子类 ...
- iOS中如何创建一个滑出式导航面板(1)
本文将介绍如何创建类似Facebook和Path iOS程序中的滑出式导航面板. 向右滑动 滑出式设计模式可以让开发者在程序中添加常用的导航功能,又不会浪费屏幕上宝贵的空间.用户可以在任意时间滑出导航 ...
- Android开发(二十三)——Application
参考: [1] Android中Application类用法.http://www.cnblogs.com/renqingping/archive/2012/10/24/Application.htm ...
- 【emWin】例程十八:jpeg图片显示
说明:1.将文件拷入SD卡内即可在指定位置绘制jpeg图片文件,不必加载到储存器. 由于jpeg格式文件显示时需要进行解压缩,耗用动态内存,iCore3所有模块受emwin缓存的限制,jpeg ...
- 【消息】Pivotal Pivots 开源大数据处理的核心组件
Pivotal Pivots 开源大数据处理的核心组件 Pivotal 今天宣布将其大数据套件的三个核心组件开源,同时商业版本继续提供更高级特性和商业支持服务. 这三个开源的组件分别是: GemFir ...
- Go语言_iota用法
一.介绍 iota,特殊常量,可以认为是一个可以被编译器修改的常量. 在每一个const关键字出现时,被重置为0,然后再下一个const出现之前,每出现一次iota,其所代表的数字会自动增加1. io ...
- java-信息安全(十六)-双向认证
原文地址 http://snowolf.iteye.com/blog/510985 对于双向认证,做一个简单的描述. 服务器端下发证书,客户端接受证书.证书带有公钥信息,用于验证服务器端.对数据加密/ ...
- Android DiskLruCache完全解析,硬盘缓存的最佳方案(转)
概述 记得在很早之前,我有写过一篇文章<Android高效加载大图.多图解决方案,有效避免程序OOM>,这篇文章是翻译自Android Doc的,其中防止多图OOM的核心解决思路就是使用L ...
- nginx负载均衡二:配置
配置方法一(可用): upstream tomcatserver1 { server ; server 192.168.70.172; server 192.168.70.173 down; serv ...