Web前端-CSS必备知识点

秒速五厘米 2021-09-18 09:20 655阅读 0赞

![image.png][]

> Web前端-CSS必备知识点

`css`基本内容，类选择符，id选择符，伪类，伪元素，结构，继承，特殊性，层叠，元素分类，颜色，长度，url，文本，字体，边框，块级元素，浮动元素，内联元素，定位。

链接：

link标签：

样式：

h1 { color: red; };

`@import`指示引入多个外部样式表的链接

`css`注解

/* dashucoding */

内联样式：

<p style="color: red;" >dashucoding</p>

规范：  
选择符 + 声明

p { color: red; } // 选择符 属性 值

p { font-weight: bold; }

> 伪类和伪元素

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:link</code></td> 
   <td>超链接是一个未访问过的地址</td> 
  </tr> 
  <tr> 
   <td><code>:visited</code></td> 
   <td>访问过的网页</td> 
  </tr> 
  <tr> 
   <td><code>:active</code></td> 
   <td>处于活跃的状态</td> 
  </tr> 
 </tbody> 
</table>

a { color: red; }; a:visited { color: red; };

伪元素：

:first-letter  和  :first-line 首字母 和 首行

p:first-letter { color: red; }

css有个特点是继承，可以依赖于祖先-后代关系。

`!important`有这个标记，表示这条规则优先

p { color: red !important; }

元素分类：

三种类型：块级元素，内联元素，列表项元素

块级元素有段落，标题，列表，表格，div，body等。内联元素有a，em，span等。列表项元素有li元素。

dispaly: block | inline | list-item | none

颜色：

rgb(100%, 100%, 100%) 红蓝绿 ，白色

单位：

em 给字体的font-size值

文本：  
文本缩进

text-indent <长度> | <百分比>

p { text-indent: -4em; }

`text-align`属性

用于元素中文本行的对齐方式

text-align: left | center | right | justify

`white-space`空白

white-space pre | nowrap | normal

p { white-space: normal; } 将如何空白压缩成单个空白符

`white-space`属性值为`pre`，可以将元素内的空白忽略。

p { white-space: pre; }

行高：

`line-height`文本行的基线间的距离。

纵向对齐，`vertical-align`

`vertical-align: baseline`使元素的基线同父元素的基线对齐。

vertical-align: sub; vertical-align: super;

低端对齐： `vertical-align`

顶端对齐：`vertical-align`

vertical-align: top; vertical-align: text-top;

中间对齐：

vertical-align: middle;

文字间隔：

word-spacing 长度 | normal

word-spacing: 0.3em;

字母间隔：

letter-spacing: 长度 | normal

文本转换：

text-transform uppercase | lowercase | capitalize | none

文本修饰：

text-decoration: none | overline | line-through

框：

浮动与清除

float: left | right | none

float: none 用于防止元素浮动

清除浮动元素

clear left | right | both | none

`clear`原理是增加元素的上边界，使它在低于浮动元素的位置结束，清除元素的上边界宽度当有效地忽略。

`list-style-type` `disc`

列表项图像

list-style-image <url> | none

列表项位置：`list-style-position`

list-style-position: inside | outside

定位：

position: static | relative | absolute | fixed | inherit

溢出：

overflow: visible | hidden | scroll | auto | inherit

溢出剪切：

overflow-clip: rect | auto | inherit

元素剪切：

clip rect | auto | inherit

元素可见性：

visibility: visible | hidden | collapse | inherit

相对定位：

position: relative;

绝对定位：

position: relative;

固定定位：

position: fixed;

层叠定位：

z-index: integer | auto

轮廓：

outline, outline-color, outline-style, outline-width

边框：

border-top-color, border-right-color, border-bottom-color
    
    border-left-color, border-top-style
    border-right-style, border-left-style

实例：

<table cellspacing=0 border cellpadding="10">
     <tr>
      <td rowspan=2>dashu</td>
      <td colspan=2>dashu2</td>
     </tr>
     
     <tr>
       <td>1</td>
       <td>2</td>
     </tr>
    </table>

## 结言 ##

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

**作者简介**

**达叔**，理工男，简书作者&全栈工程师，感性理性兼备的写作者，个人独立开发者，我相信你也可以！阅读他的文章，会上瘾！，帮你成为更好的自己。长按下方二维码可关注，欢迎分享，置顶尤佳。

![努力努力再努力Jeskson][Jeskson]

[image.png]: /images/20210724/04833afa5679405c964220c1daa507e7.png
[Jeskson]: /images/20210724/95378035139243da975c67a1dd5b3bb0.png