1、word-spacing与letter-spacing的区别:
在对网页文本进行精细控制时,需要应用到多方面的CSS属性设置,如垂直方向上的行距line-height,水平方向上的字距word-spacing和letter-spacing。word-spacing是指单词间隔,letter-spacing是指字母的间隔。在设置时常常将两者混淆,得不到想要的设置效果。
2、cellspacing与cellpadding的区别:
DIV是层的标记,相当于一个区域块.这个比table要好,可以准确的定位比例
cellpadding为表格的填充,是单元格的元素与边界的距离 ;
cellspacing为表格的间距,是单元格与单元格之间的距离
例子:http://www.htmlcodetutorial.com/tables/index_famsupp_29.html
在table中控制单元格之间的间距要用到cellspacing、cellpadding,默认情况cellspacing、 cellpadding均不为0 ,但经常的状况为了不让table单元格之间的间距影响到美观,我们经常会把cellspacing、 cellpadding设置为0,因此经常看到“<table cellspacing=0 cellpadding=0>”这样的代码。这样做无形中增加了代码的体积,因此使用css控制cellspacing/cellpadding显的意义重大了!以下是控制方法:
table{border:0;margin:0;border-collapse:collapse;}
table td{padding:0;}
第一行控制cellspacing,关键是“border- collapse:collapse;”(相邻边被合并)这一句;第二行控制cellpadding,很少人知道控制td吧?:)
3、fieldset和legend
<div> <fieldset> <legend> <span>搜索条件</span> </legend> <table style="width: 100%;" border="0"> <tr> <td width="20%"> <span>费用名称</span> </td> <td width="80%"> <input type="text"/> </td> </tr> </table> </fieldset> </div>
fieldset元素用于对表单中的元素进行分组并在文档中区别标出文本。
fieldset元素元素是块元素。 并且需要关闭标签,即必须成对出现:<fieldset></fieldset>。
legend是在fieldSet对象绘制的方框内插入一个标题。
legend元素必必位于fieldset内的第一个元素。
legend元素是块元素。并且需要关闭标签,即必须成对出现:<legend></legend>。
可以对fieldset设置了上下与左右的填充:
padding:3px 6px;
padding-bottom:1px;
padding-top:1px;
...
4、css继承
5、css基础
常用的属性。
1、字体:font, font-size, font-family, font-weight, text-decoration, line-height
A. font是一个复合属性。所有后面的这几个属性的值都可以放在font里面用。
B. font-size定义文字的大小。
C. font-family定义字体。
D. font-weight定义文字的粗细。
E. text-decoration定义文字的装饰。
F. line-height定义行高。
2、文本:text-indent, vertical-align, text-align, word-break
text-indent,设置对象的缩进。
vertical-align,设置对象的上下对齐方式。
text-align,设置对象的左右对齐方式。
word-break,设置字体的强制换行。
3、背景:background, background-color, background-image, background-position, background-repeat
A. background定义背景的一个复合属性。和上面的font一样,可以把后面这几个属性的值都放在font里面用。
B. background-color定义的是背景的颜色。
C. background-image定义的是背景的图片。
D. background-position定义背景的位置。
E. background-repeat定义背景的是否平铺。
4、定位:position, z-index, top, right, bottom, left.
A. position定位方式。
B. z-index 定义层叠顺序。
C. top, right, bottom 和left表示距离他父级的上边,右边,下边和左边的距离。
5、尺寸:width, height
A. width定义对象的宽度。
B. height定义对象的高度。
6、布局:clear, float, display
A. clear 设置不允许又浮动对象的边。
B. float设置对象浮动及如何浮动。
C. display设置对象是否及如何显示。
D. visibility 设置对象是否显示。
7、外补丁:margin , margin-top, margin-right, margin-bottom, margin-left
margin 设置一个元素所有外边距的宽度。该属性可以有 1 到 4 个值。
A. margin定义外补丁的一个复合属性。同上。
B. margin-top定义对象的上边距离父级的外补丁。
C. margin-right 定义对象的右边距离父级的外补丁。
D. margin-bottom 定义对象的下边距离父级的外补丁。
E. margin-left 定义对象的左边距离父级的外补丁。
8、边框:border, border-top, border-right, border-bottom, border-left
同上(外补丁)。
9、内补丁:padding , padding-top, padding-right, padding-bottom, padding-left
同上(外补丁)。
10、列表:list-style, list-style-image, list-style-position, list-style-type
A.list-style是一个定义列表项目的复合属性。
B. list-style-image定义列表项目的图标。
C. list-style-type定义列表项目的标记。
11、其他:Cursor
这里只讲cursor,就是定义鼠标的显示样式,可以用图标。
13、伪对象::first-letter
这里只讲这一个伪对象,他的作用是定义对象的第一个字母的样式。
14、声明:!important
提升应用样式的优先权。这个声明在firefox和ie7上面支持,在ie6上面不支持。他的主要作用是用来调整不同浏览器显示效果的差异。
单位
1、长度:Px
px象素,in英寸等。用得最多的是象素px。
2、颜色:rgb(RGB),#RRGGBB
Rgb(255,255,255),#FFFFFF
3、Color name:red, blue
注意
1、html代码和css代码尽量小写。
2、子随父姓,就近原则。
15、left:
设置对象与其最近一个具有定位设置的父对象 左边的位置。此属性仅仅在对象的定位( position )属性被设置时可用 。否则,此属性设置会被忽略。
left: 100%; top: 0;
和父对象一样宽,和父对象顶部对齐
6、div中position:
position:absolute这个是绝对定位;是相对于浏览器 的定位。
比如:position:absolute;left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置。
position:relative是相对定位,是相对于前面的容器 定位的。
7. display : block /inline /inline-block /table / inline-table
1.div中只有text-align,没有vertical-align属性
2.div高度不固定时,可使用line-height控制,div会根据文字内容自动撑开
高度固定时,可使用padding/margin来控制
3.display : block /inline /inline-block /table / inline-table
block : 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none : 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline : 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block : 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
table : CSS2 未支持。将对象作为块元素级的表格显示
inline-table : 将表格显示为无前后换行的内联对象或内联容器
a.因DIV等无vertial-align属性,因此想垂直居中时,就需要将其模拟为表格inline-table,这样就可以使用vertical-align属性
b.一般外面的容器里,使用inline-block,该容器里面的属性,再使用block.
inline-block 的元素既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align 属性。简而言之:
inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )
display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。
8、margin:0 auto
margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right
因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)
margin:auto与margin: 0 auto;有什么区别
第一个表示上下左右都为auto,横竖都居中
第二个表示上下为0,左右为auto,只是横居中
添加margin:0 auto不居中的原因:
方式1:
<span style="margin:0 auto;font-size:16px;text-align:center;display:block;">暂无记录</span>
需要添加display:block;将Span模拟为盒子,这样他的宽度才为100%,否则span宽度只有文字那么长。如果还不行,再添加一个width:100%;
方式2:
DIV默认为盒子,所以可以改为DIV,这样就不用添加display:block;
<div style="margin:0 auto;font-size:16px;text-align:center;">暂无记录</div>
9、苹果按钮样式
.btn { display:block;font-size: 22px;height: 45px;line-height: 45px;text-align: center;cursor: pointer;background-color: #ff5138;border: 1px solid #ff5138;color: #fff;width: 255px; border-radius:0;background-image: -moz-linear-gradient(top, #f63b21, #f63b21); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f63b21), color-stop(1, #f63b21)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f63b21', endColorstr='#f63b21', GradientType='0'); /* IE*/ }
需加入下面这段:
border-radius:0; background-image: -moz-linear-gradient(top, #f63b21, #f63b21); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f63b21), color-stop(1, #f63b21)); /* Saf4+, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f63b21', endColorstr='#f63b21', GradientType='0'); /* IE*/
10、
display: flex;
多栏多列布局
http://www.360doc.com/content/14/0811/01/2633_400926000.shtml
justify-content: space-around;
在弹性盒对象的 <div> 元素中的各项周围留有空白:
http://www.runoob.com/cssref/css3-pr-justify-content.html
11、购物车加减数字样式:
链接:http://www.toutiao.com/i6339867778601714178/
<!-- 布局文件代码 --> <view class="stepper"> <!-- 减号 --> <text>-</text> <!-- 数值 --> <input type="number" value="{{num}}" /> <!-- 加号 --> <text>+</text> </view>
/*stepper容器*/ .stepper { border: 1px solid #ccc; border-radius: 3px; width: 70px; margin:0 auto; } /*加号与减号*/ .stepper text { width: 19px; height: 28px; line-height: 21px; text-align: center; float: left; } /*数值*/ .stepper input { float: left; margin: 0 auto; width: 30px; text-align: center; font-size: 12px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; } /*普通样式*/ .stepper .normal{ color: black;} /*禁用样式*/ .stepper .disabled{ color: #ccc;}
12、两个div横向排列,顶端对齐的方式
http://www.cnblogs.com/itjeff/p/3897305.html
13、清除浮动clear:both;
14、text-indent属性
首行缩进,类似于TAB的效果
使用margin-left,padding-left时,如果有多行,则会多行都缩进,但用text-indent则只有首行缩进。
15、text-shadow: 1px 1px 1px #ddd;
设置文本的文字是否有阴影及模糊效果。
letter-spacing:2px;
文字之间的间隔
word-spacing
max-height/min-height/max-width/min-width
z-index
对象的层叠顺序
较大 number 值的对象会覆盖在较小 number 值的对象之上
常用:
1、
<ul class="test-links"> <li> <a style="" title=""><span style="">package</span></a> </li> </ul> .test-links { list-style-type: none; //不使用项目符号,就是ul或ol前面的实心圆 }
2、① a:link:未访问链接
② a:visited:已访问链接
③ a:hover:鼠标移到链接上时
④ a:active:激活时(链接获得焦点时)链接的颜色
注释: 为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后!!
注释: 为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!
一般a:hover和a:visited链接的状态(颜色、下划线等)应该是相同的。
前三者分别对应body元素的link、vlink、alink这三个属性。
四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active不能设置有无下划线(总是有的)。
a:link {color: blue; text-decoration:none;} //未访问:蓝色、无下划线 a:visited {color:purple;text-decoration:none;} //已访问:purple、无下划线 a:hover {color: red; text-decoration:underline;} //鼠标移近:红色、下划线 a:active:{color: red; } //激活:红色
a:link{ display: block; text-decoration: none; color: black; background: #c5dbf2; width: 120px; height: 40px; line-height: 40px; border: 1px solid #fff; //所有边框样式 border-width: 1px 1px 0 0; //上右下左 } a:hover { color: #fff; background: #2687eb; }
3、display:
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符 。
7、td内容自动换行
<table border="0" cellspacing="0" cellpadding="0" width="200" align="center" style="table-layout:fixed;word-wrap:break-word;word-break:break-all">
text-indent:6px;
文本缩进,效果类同padding-left
编写CSS时,可以按如下顺序执行:
(1)先编写全局样式(base.css)
* { margin:0; padding:0; word-wrap:break-word; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
img { border:none; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
html { overflow:-moz-scrollbars-vertical; } /* 在Firefox下始终显示滚动条*/
(2)然后是可大范围内重用的样式
大多数页面都会用到头部样式、导航样式和尾部样式。因此,header.css、nav.css和footer.css是可以重用的样式
#header{
width:800px;
height:80px;
border: 1px solid #AAAAAA;
margin:10px auto;
background:#3B5998;
}
margin:10px auto使其能够居中。
(3)最后编写细节方面的样式
http://polaris1119.iteye.com/blog/770735
#topTable{ font-size:11px; border:1px solid black; border-collapse: collapse; } #topTable td{ border:1px solid black; }
style='text-transform: uppercase;' onchange='this.value = this.value.toUpperCase();'
Table中单元格样式:
<style media="screen"> .th1 { border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; } .th2 { border-left: 1px solid #CCCCCC; border-top: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; } .td1 { border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; padding: 0px; text-align:right; } .td2 { border-left: 1px solid #CCCCCC; border-bottom: 1px solid #CCCCCC; border-right: 1px solid #CCCCCC; padding: 0px; text-align:right; } </style>
<tr height="25px;"> <th class="td1"><html:text property="seniorPrice[${mID.index}]" styleId="seniorPrice[${mID.index}]" maxlength="12" style="width:70px;"></html:text></th> <th class="td1"></th> <th class="td1"></th> <th class="td2"></th> </tr>
。。。
加、减按钮时,需在最后加一个空行,且Table高度不可以设置,否则会挤压每行高度。
Div根据内容自适应高度:
http://www.artery.cn/news/WEBbiaozhunhua/2009-06-08/136.html
相关推荐
"HTML+CSS总结" HTML(HyperText Mark-up Language)是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。HTML 文本是由 HTML 命令组成的描述性文本,HTML 命令可以说明文字、图形、动画、声音、表格、...
本文将基于“关于图片显示问题的CSS总结”这一主题,深入探讨CSS在处理图片显示时的关键知识点,以帮助开发者更好地理解和解决图片相关的问题。 首先,我们来看CSS中的`background-image`属性,它用于设置元素的...
这个"css总结文件(重要)"显然提供了一些关于CSS的核心概念、实用技巧和实例,对于学习和提升CSS技能非常有帮助。 首先,CSS的基础知识包括选择器、属性和值。选择器是用于指定我们要应用样式规则的HTML元素,例如`p...
dw cs6的css总结
CSS总结.xmind
【CSS总结】 CSS,全称Cascading Style Sheets(层叠样式表),是网页设计中的核心技术之一,用于控制网页元素的样式、布局和呈现。它与HTML或XML等标记语言结合使用,为网页添加视觉效果和结构化表现。在本篇内容...
这份"前端jscss总结笔记"涵盖了这两个主题的核心知识点,旨在帮助开发者深入理解和掌握它们。 JavaScript部分: 1. **基础语法**:包括变量声明(var、let、const)、数据类型(Number、String、Boolean、Null、...
### 总结 HTML和CSS的学习是成为一名前端开发者的基石。理解基本元素和样式规则,掌握布局技巧,以及了解响应式设计和预处理器的使用,将有助于创建出专业且用户友好的网页。通过不断实践和探索,可以逐步深化对这两...
在“css总结1”中,我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先,让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成:选择器和声明。选择器指向你想要应用样式的HTML元素,如`h3`或`p`...
css总结很全,前端小白学习必备。后期还会发JS的。赚点积分
css学习总结思维导图
高效的CSS、可维护的CSS、组件化的CSS、hack-free CSS 书写高效CSS: 1、使用外联样式替代行间样式或者内嵌样式 2、不推荐使用内嵌样式
在前端开发领域,JavaScript(简称JS)和CSS是构建网页动态效果和美观界面不可或缺的两种技术。本笔记将深入探讨这两者的核心概念、语法特点以及它们在实际开发中的应用。 一、JavaScript概述 JavaScript是一种轻量...
CSS(Cascading Style Sheets)是用于控制网页元素样式的一种语言,对于自定义Liferay的主题和布局至关重要。以下是对Liferay CSS调整的一些关键点的详细说明: 1. **导航条背景色更改**:在`custom_common.css`...
HTML和CSS基础知识点总结(xmind编辑的思维导图)
常用的css总结 CSS整块文本溢出省略方案 < style > .wrap { width : 200 px ; white - space : normal ; overflow : hidden ; text - overflow : ellipsis ; display : - webkit - box ; - webkit - ...
对于小白新手入手可借鉴,都是HTML+CSS基础 打好基础才会让代码写的轻松像云上游走,不费吹灰之力学好HTML+CSS
css盒模型难点