资讯专栏INFORMATION COLUMN

Web前端-CSS必备知识点

CntChen / 2368人阅读

摘要:前端必备知识点基本内容,类选择符,选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,,文本,字体,边框,块级元素,浮动元素,内联元素,定位。

Web前端-CSS必备知识点

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

链接:

link标签:

样式:

h1 { color: red; };

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

css注解

/* dashucoding */

内联样式:

dashucoding

规范:
选择符 + 声明

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1182.html

相关文章

  • 前端开发-从入门到Offer - 收藏集 - 掘金

    摘要:一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。 工欲善其事必先利其器-前端实习简历篇 - 掘金 有幸认识很多在大厂工作的学长,在春招正式开始前为我提供很多内部推荐的机会,非常感谢他们对我的帮助。现在就要去北京了,对第一份正式的实习工作也充满期待,也希望把自己遇到的一些问题和...

    sf_wangchong 评论0 收藏0
  • 前端开发周报: CSS 布局方式与JavaScript数据结构和算法

    摘要:如果没有学习过计算机科学的程序员,当我们在处理一些问题时,比较熟悉的数据结构就是数组,数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

    huhud 评论0 收藏0
  • 前端开发周报: CSS 布局方式与JavaScript数据结构和算法

    摘要:如果没有学习过计算机科学的程序员,当我们在处理一些问题时,比较熟悉的数据结构就是数组,数组无疑是一个很好的选择。 showImg(https://segmentfault.com/img/bVTSjt?w=400&h=300); 1、常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局、Grid 布局、圣杯布局、双飞翼布局等。http://cherryb...

    ?xiaoxiao, 评论0 收藏0

发表评论

0条评论

CntChen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<