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>

结言

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

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

作者简介

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

Web前端-CSS必备知识点的更多相关文章

  1. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  2. 1+x 证书 Web 前端开发 MySQL 知识点梳理

    官方QQ群 1+x 证书 Web 前端开发 MySQL 知识点梳理 http://blog.zh66.club/index.php/archives/199/

  3. Web前端开发必备

    前端学习相关书籍 关于书籍 HTML.CSS 类别书籍,都是大同小异,在当当网.卓越网搜索一下很多推荐.如果感觉学的差不多了,可以关注一下<CSS禅意花园>,这个很有影响力. Javasc ...

  4. Web前端开发必备工具推荐

    http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起着非常重要的作用,这里向 ...

  5. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  6. web前端开发必备压缩工具整理

    影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小.网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作.本文 ...

  7. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  8. 国人Web前端开发必备干货,一个完美支持IE6在内所有浏览器的CSS框架

    摘要: 企户动CSS框架是一个能够完美支持IE6~7在内的所有浏览器的 HTML&CSS 前端框架!给Web开发提供了自适应宽度的百分比多列网格,以及已语义化和结构化的标题.段落.列表.表格. ...

  9. ASP.NET MVC开发:Web项目开发必备知识点

    最近加班加点完成一个Web项目,使用Asp.net MVC开发.很久以前接触的Asp.net开发还是Aspx形式,什么Razor引擎,什么MVC还是这次开发才明白,可以算是新手. 对新手而言,那进行A ...

随机推荐

  1. 关于MQ,你必须知道的

    我走过最长的路是你的套路 女:二号男嘉宾,假如我们牵手成功后,你会买名牌包包给我吗? 男:那你会听话吗? 女:会 听话. 男:听话 咱不买! OK那么消息队列MQ有什么套路呢?(这个话题转换生硬度连我 ...

  2. 前端笔记之NodeJS(一)初识NodeJS&内置模块&特点

    一.NodeJS简介 NodeJS是开发服务器后台的东西,和PHP.JavaEE.python类似,和传统的浏览器的关注DOM的JS完全不同,将JavaScript触角伸到了服务器端.内核是Chrom ...

  3. java基础(八)-----深入解析java四种访问权限

    Java中的访问权限理解起来不难,但完全掌握却不容易,特别是4种访问权限并不是任何时候都可以使用.下面整理一下,在什么情况下,有哪些访问权限可以允许选择. 一.访问权限简介 访问权限控制: 指的是本类 ...

  4. selinux学习

    一.基本概念 1.TE模型的安全上下文 所有的操作系统访问控制都基于主体.客体,以及与他们相关的访问控制属性. 在selinux中,访问控制属性叫做安全上下文.所有对象(文件.进程间通信通道.套接字. ...

  5. 如何通过get,set方法访问到父类的私有属性

    刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...

  6. 数据库常用操作SQL语句

    禁用触发器: alter table tb disable trigger tir_name 启用触发器: alter table tb enable trigger tir_name

  7. 有关Windows10中诊断和反馈隐私设置

    当你使用 Windows 时,我们将收集诊断信息,为了确保能收到你(我们的客户)的反馈,我们为你提供了多种方式,以便你可以随时发送反馈,也可以在某个特定的时间(例如当 Windows 10 向你提出关 ...

  8. 【BZOJ5505】[GXOI/GZOI2019]逼死强迫症(矩阵快速幂)

    [BZOJ5505][GXOI/GZOI2019]逼死强迫症(矩阵快速幂) 题面 BZOJ 洛谷 题解 如果没有那两个\(1*1\)的东西,答案就是斐波那契数,可以简单的用\(dp\)得到. 大概是设 ...

  9. JAVA中AWT编程

    JAVA使用AWT和Swing 类完成图形用户界面编程,AWT全称是抽象窗口工具集(Abstract Window Toolkit),它是最早的sun提供的GUI库(Graphics User Int ...

  10. Taurus.MVC 2.3 开源发布:增强属性Require验证功能,自带WebAPI文档生成功能

    背景: 上周,把 Taurus.MVC 在 Linux (CentOS7) 上部署任务完成后. 也不知怎么的,忽然就想给框架集成一下WebAPI文档功能,所以就动手了. 以为一天能搞完,结果,好几天过 ...