Web前端-CSS必备知识点

Web前端-CSS必备知识点

css

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

链接：

<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
           

link标签：

<link rel="stylesheet" type="text/css" href="sheet.css" title="default">
           

样式：

h1 { color: red; };
           

@import

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

<style type="text/css">
@import url(styles.css);
p { color: red };
</style>
           

css

注解

/* dashucoding */
           

内联样式：

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

规范：

选择符 + 声明

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

p { font-weight: bold; }
           

伪类和伪元素

属性	说明
:link	超链接是一个未访问过的地址
:visited	访问过的网页
:active	处于活跃的状态

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
           

框：

width 长度 | 百分比 | auto
height 长度 | auto
margin 长度 | 百分比 | auto
margin: top right bottom left
margin-top
margin-right
margin-bottom
margin-left

border-width // thin medium thick
border-style: none;

padding
           

浮动与清除

float: left | right | none
           

<img src="" style="float: right"; alt="dashu">
           

float: none 用于防止元素浮动
           

清除浮动元素

clear left | right | both | none
           

clear

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

list-style-type

disc

disc | circle | square | decimal | upper-alpha | lower-alpha | upper-roman | lower-roman | none

list-style-type
disc 为实心圆
circle 为空心圆
square 实心或空心方块
           

列表项图像

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>
           

结言

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

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

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！