您的位置:首页 > Web前端 > CSS

前端css笔记

2020-07-14 06:08 411 查看

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

普通标签 和 语义化标签

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

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

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

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

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

<pre></pre>

转义字符

&nbsp;空格

&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) 偶数
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: