更多课程 选择中心

Web培训
达内IT学院

400-111-8989

Web培训

学习web前端的必备知识点之CSS知识

  • 发布:Web前端培训
  • 来源:Web开发教程
  • 时间:2020-10-13 15:10

今天小编要跟大家分享的文章是关于学习web前端的必备知识点之CSS知识。css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位。

今天小编要跟大家分享的文章是关于学习web前端的必备知识点之CSS知识。

链接:

<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>

以上就是小编今天为大家分享的关于学习web前端的必备知识点之CSS知识的文章,希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助,想要了解更多web前端知识记得关注达内web培训官网,最后祝愿小伙伴们工作顺利,成为一名优秀的web前端工程师

文章来源:原创 Jeskson 达达前端

【免责声明:本文图片及文字信息均由小编转载自网络,旨在分享提供阅读,版权归原作者所有,如有侵权请联系我们进行删除。】

预约申请免费试听课

填写下面表单即可预约申请免费试听!怕钱不够?可就业挣钱后再付学费! 怕学不会?助教全程陪读,随时解惑!担心就业?一地学习,可全国推荐就业!

上一篇:2020年Web前端入门的学习路线总结
下一篇:没有下一篇了

2020年Web前端入门的学习路线总结

Web前端工程师入门必读书籍推荐

做Web前端开发要掌握的知识有哪些

Web前端新手入门必学知识及学习建议

选择城市和中心
黑龙江省

吉林省

河北省

贵州省

云南省

广西省

海南省