前端代码知识点总结

                                                       前端代码知识点总结

字体
(1.)font-size: 16px 设置字体大小           (2.)color: #fff设置字体颜色

(3.) font-weight: normal; 字体正常         (4.)font-variant：可以设定小型大写字母

(5.) font-style: oblique; 文字倾体            (6.)font-weight : bold; 定义粗体字符

(7.)font-weight：bloder; 定义更粗的字符    (8.)font-weight :lighter; 定义更细的字符·

2.  定位

(1.) position：relative；相对定位      (2.) position：fixed；固定定位

(3.) position：absolute；绝对定位     (4.) z-index: 2; 层次（和定位一起使用）

3.  浮动

(1.) float：left；左浮动              (2.) float：right；右浮动

(3.) overflow：hidden；超出浮动隐藏，清除浮动

4.  边框

(1.) outline：1px solid #1709BF；内边框  

(2.) border-top-width：2px；顶部边框的宽度

(3.) border-top-style：solid；顶部边框的边框样式   

(4.) border-top-color：# f67c2b；顶部边框的边框颜色

(5.) border- top：1px solid #e4e7ed；1个像素的上边框

(6.) border：1px solid #e4e7ed；边框

(7.) border：none；去掉边框

(8.) border-spacing 属性设置相邻单元格的边框间的距离

(9.) border-collapse：collapse；为表格设置合并边框模型

(10.) border-bottom：thick dotted #ff0000；设置下边框的样式  

(11.) border-radius: 5px; 圆角样式   

(12.) border-radius:0px 0px 100% ; 扇形圆角

5.  居中

(1.) text-align: center; 文本居中           (2.) margin: 0 auto;  居中显示

6.  功能样式

(1.) text-decoration:none;  取消<a>下划线        (2.) overflow-x: hidden;  去掉下拉条

(3.) list-style: none;  取消无序列表中的默认样式   (4.) text-decoration: none; 取消下划线

(5.) list-style: none;  取消 li 标点的点；          (6.) outline: none;  取消文本框选择效果

7.  颜色

单位

描述

颜色名

颜色名称 (比如 red)

rgb(x,x,x)

RGB 值 (比如 rgb(255,0,0))

rgb(x%, x%, x%)

RGB 百分比值 (比如 rgb(100%,0%,0%))

#rrggbb

十六进制数 (比如 #ff0000)

8.  HTML的标签

(1.)<input type="text">-----文本框     (2.) <input type="password">-----密码框

(3.) <input type="submit">--提交按扭   (4.) <input type="checkbox">-----复选框

(5.) <input type="radio">----单选框     (6.) <input type="reset">--------重置按扭

(7.) <input type="image">---图片按扭   (8.) <input type="button" value="按钮">--按钮    

(9.) <input,type="file">------浏览文件    (10.) <input  type="date">-------日历

 

(11.) <input type="text"  placeholder="提示">------//placeholder="提示">文本框里提示

 

(12.) <input,type="hidden">------隐藏域  (13.)<button></button>---按钮标签

                                                                  (14.)<ul></ul>-------段落标签         (15.)<u></u>-----------下划线标签

 

(16.)<link rel="icon" type="image/x-icom" href="../images/icon2.ico">---引入网页图标

 

(17.)<a href="#"></a>----里面加跳转网页，锚标签  

                       (18.)link+fab=<link rel="stylesheet" href="css">------------------------css引入

 

(19.) <s></s>---------------删除线    (20.) <span></span>--------（行内）

 

(21.) <b></b>---------------粗体     (22.) <i></i> --------------斜体

 

(23.) <hr></hr>-------------水平线    (24.) <p></p>---------------段落 

 

(25.) <br></br>-------------换行      (26.) <img>-----------插入图片（自闭和标签）

 

(27.) autocomplete="off"---删除历史记录  (28.) <h1></h1>---标题标签1>2>3>4>5>6

 

(29.) <hr>------------------线条     (30.) <option value=""></option>）----选项标签

 

(31.) < for="Name">姓名</label>------for="Name"：光标聚集效果

 

(32.) alert('提示框');           

 

(33.) <select>----------------------------下选框

disabled    这个加在input标签后面；禁用input

<option>1</option>

            <option>2</option>                                                                     

            <option>3</option>

            <option>4</option>                         

            <option>5</option>

</select>

 

(34.) <big> -------定义大号字。    (35.)<em> -------定义着重文字。

(36.)<i> --------定义斜体字。      (37.)<small> ---------定义小号字。

(38.)<strong> -----定义加重语气。  (39.)<sub> -------定义下标字。

(40.)<sup> -----定义上标字。       (41.)<ins> ------定义插入字。

(42.)<del> ---------定义删除字

 

9.  尺寸单位

单位

描述

%

百分比

in

英寸

cm

厘米

mm

毫米

em

1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体

ex

一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)

pt

磅 (1 pt 等于 1/72 英寸)

pc

12 点活字 (1 pc 等于 12 点)

px

像素 (计算机屏幕上的一个点)

10．  CSS * 基础样式

(1.)display:none;;-- --------------隐藏   

 

(2.)display: inline-block;----------------块级元素横排显示

 

(3)style-----放在div里面可以写css样式（行内样式）

               

(4.)border-color:transparent transparent transparent #65aac3; ------- 制作三角形

 

    (5.)width:300px；---------------宽度；    (6.)height: 300px;===高度                                                          

                                                                                                                                                                      (7.)text-decoration: underline;-----------添加文字下划线                                        

                                                                                                        

    (8.)background：#fff;-----------背景颜色；                                                       

 

(9.)opacity: 0.5;------------------透明度  

 

(10.)line-height:20px;-------------行高                                                         

                                                                                                                                                                 (11.)background-size: cover----------------图片大小自适应

                                                                                                                                                                 (12.)contenteditable="true"----------------div编辑文本

                               

(13.)text-decoration:line-through;----------------------中划线  

 

(14.)text-decoration: overline;------------上划线

 

    (15.)text-decoration: line-through;---------------------中划线                             

                                                                                         

(16.)text-shadow: #f00 2px 5px 5px;--------该属性用于设置的文字是否有阴影效果。 color:指定该阴影的颜色。 xoffset:指定阴影在横向上的偏移。 yoffset:指定阴影在纵向上的偏移。 radius：A指定阴影的模糊半径。模糊半径越大，阴影看上去越模糊。 多重阴影：多加几组数据即可。 sytle="text-shadow:5px 5px 2px #cf0"                 

                                                                                                    (17.)style="display: none;"----------------行内样式。隐藏     （display: none）

                                                               

(18.)last-child-----------------------------选择到最后一个元素     

     

(19.):hover--------------------------------伪类

 

(20.)first-child---------------------选择到第一个元素

               

(21.):nth-child(2)-------------------------选择到第2（几个）元素

           

(22.)  display: block;（display:inline-block;）-----------行内元素转换为块级元素    

 

(23.) display: inline-block;-----------------------------行内块级元素

 

(24.)background: url();---------------------------------背景图片

  

(25.)background-color: #e64b16;-------------------------伪类

 

 (26.)box-shadow：5px 5px 5px #111;----------------------盒子阴影；设置四边阴影多加一个数值，如=0px 1px 2px 3px #111;

 

  (27.) ！！！！（h-shadow：-------------------------------水平方向阴影

 

    (28.)v-shadow：-----------------------------------------垂直方向的阴影

 

(29.)blur：---------------------------------------------模糊距离

 

   (30.) font-family: 'Lobster',cursive;-----------------字体楷体

 

    (31.)transparent----------------------------------------透明色

 

    (32.)no-repeat------------------------------------------不重复出现

 

    (33.)cursor: pointer;-----------------------------------鼠标移入变成手的形状

 

    (34.)even------—选择序列位偶数的元素、odd---------选择序列为奇数的元素

 

  (35.)overflow: scroll;-----------------------------------超出部分鼠标滚轮

 

11.  特殊符号代码

∴  &there4;

∞  &infin;

⊕   &oplus

Δ   &Delta;

Θ  &Theta;

?   &copy;

?   &reg; 

?    &trade;

&nbsp;-- -空格

 

12.  表单 表格描述

(1.)cellspacing="0" ------表格间距为0；     (2.)<table></table>------定义表格

 

  (3.)<caption></caption>----定义表格标题。 (4.)<th></th>-------定义表格的表头。

 

  (5.)<tr></tr>--------定义表格的行。        (6.)<td></td>------------定义表格单元。

 

  (7.)<thead></thead>----定义表格的页眉。  (8.)<tbody></tbody>---定义表格的主体。

 

  (9.)<tfoot></tfoot>---定义表格的页脚。    (11.)<col></col>---定义用于表格列的属性。

 

  (12.)<colgroup></colgroup>--定义表格列的组。 (13.)<thead></thead>----表格的头部

   

  (14.)<tfoot></tfoot>---------表格尾部

 
————————————————
版权声明：本文为CSDN博主「Traren、赫赫」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_57746421/article/details/116430496