前端css笔记

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

普通标签 和 语义化标签

<b>加粗</b> 同 <strong>加粗</strong>
<i>斜体</i> 同 <em>斜体</em>
<s>删除线</s> 同 <del>删除线</del>
<u>下划线</u> 同 <ins>下划线</ins>

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

<pre></pre>

转义字符

 空格
&lt;小于号(<)
&gt;大于号(>)
&quot;双引号(")
&apos;单引号(')
&amp;(&)
&copy;版权符

表格

<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(禁止);

伪类选择器

语法	描述
li:first-of-type	第一个 li标签
li:last-of-type	最后一个li标签
li:nth-of-type(2)	第二个li标签
li:nth-of-type(odd)	奇数
li:nth-of-type(even)	偶数