自己学习前端的一些CSS笔记

普通标签 和 语义化标签

<b>加粗</b> 同 <strong>加粗</strong>

<i>斜体</i> 同 <em>斜体</em>

<s>删除线</s> 同 <del>删除线</del>

<u>下划线</u> 同 <ins>下划线</ins>

格式化标签(能识别空格和换行)

<pre></pre>

转义字符

 空格

&lt;小于号(<)

>大于号(>)

"双引号(\")

'单引号(\')

&(&)

©版权符

表格

<th></th> 表头单元格,会加粗表头字体,和<td></td>同级

<caption></caption> 表格标题标签,类似于h标签

cellpadding=\" \" 文字和内容之间的距离

cellspacing=\" \" td和td之间的边框距离

border-collapse: collapse; 合并表格边框线

表单

单选: type=\'radio\'

复选: type=\'checkbox\'

默认选中: checked=\'checked\'

提交按钮: type=\'subimt\'

重置按钮: type=\'reset\'

图片按钮: type=\'image\' src=\'\'

上传文件: type=\'file\'

文本域: <textarea></textarea>

表单域: <form action=\'url地址\' method=\'提交方式\'></form>

下拉列表: selected默认选中项

<select>

<option></option>

</select>

outline:none;取消表单轮廓线;

resize:none; 禁止拖拽文本域

CSS

font-family:\"字体\";

font-weght:字体粗细(normal, bold);

text-align:文本对齐方式;

line-height:行间距;

text-indent:首行缩进;(em)

text-decoration:none(取消下划线) underline(添加下划线) line-through(删除线);

文本溢出样式

white-space:nowrap;强制文本不换行

overflow:hidden; 溢出隐藏

text-overflow:ellipsis:文字溢出用省略号显示

行内元素 块级元素

display: block; 转化为块级元素

display: inline; 转化为行内元素

display: inline-block; 转化为行内块元素

margin-top,margin-bottom,对行内元素无效

margin-left,margin-right,对行内元素有效

图片

图片文字垂直对齐:(对行内元素和行内块元素有效)

vertical-align:middle(中线对齐) top(顶线对齐) bottom(底线对齐);

精灵图:

background: url(路径) no-repeat 0px 0px ;

背景图片

background-repeat: no-repeat(不平铺) repeat-x(横向平铺) repeat-y(纵向平铺);

background-position: center center; 背景图片水平垂直居中

background:rgba(0,0,0,0.1); 背景图片透明

background-attachment:scroll(滚动) fixed(固定); 背景图片附着

边框

border: solid(实线) dashed(虚线) dotted(点线);

border-collapse: collapse; 合并边框线(只对表格生效)

border-radius 圆角

盒子阴影

box-shadow:(水平阴影,必选) (垂直阴影,必选) (模糊距离) (尺寸) (颜色);

text-shadow 文字阴影

显示与隐藏

display: none(隐藏) black(显示);

visibility: hidden(隐藏,保留位置) visible(显示);

overflow:hidden(溢出隐藏) visible(不剪切内容,也不添加滚动条) scroll(显示滚动条,总是显示) auto(超出会显示滚动条)

鼠标样式

cursor:default(默认的) pointer(手) move(移动) text(文本) not-allowed(禁止);

伪类选择器