CSS知识点总结(css知识点思维导图)

yumo6666个月前 (08-05)技术文章93

CSS(cascading style sheet)层叠样式表语言,用来专门修饰HTML的。有三种方式将CSS嵌入html中。

第一种:

内联定义。任何一个html标签都可以指定style属性,在标签的style属性上直接定义样式名和值,语法如下:

<标签 style=“样式名:样式值;

样式名:样式值;

样式名:样式值;”>

</标签>

样式名可以为字体,文本,背景,定位,尺寸,布局,表格,列表,边框

第二种:

在head标签中使用style标签,定义内部样式块对象。语法如下:

<style type=”text/css”>

选择器 {

样式名:样式值;

样式名:样式值;

样式名:样式值;

….

}

</style>

常用的三种选择器为:标签选择器(直接写),id选择器(id名字前面加上#)和class选择器(任何一个标签都有class属性,class值相同的,可以看作是同一类标签,class名字前面加上一个点.)。

第三种:

利用link标签,链入外部样式表文件。语法如下:

<link href="{%static "css/adstyle.css" %}" rel="stylesheet" type="text/css" />

优先级:id选择器>类选择器>标签选择器

CSS常见的样式:

隐藏:display:none;

文本装饰:text-decoration:underline;

列表样式:list-style-type:none;

设置鼠标悬停效果:span:hover;

内外补丁:margin-top:10px padding-left:20px;

悬浮样式:float:left;

光标样式:position:absolute; cursor:pointer;

相关文章

浅谈position中absolute和relative

CSS position属性中absolute和relative很容易让人弄混,基本的概念什么着,你去参考W3C,就不啰嗦了--------------------------------------...

为什么有些事情用CSS就够了(css为什么不能用百分比)

JavaScript确实强大,这是毋庸置疑的。 但你知道吗?其实不一定每次都需要它。 事实上,JavaScript越少,网站性能往往越好。 为什么要减少JavaScript的使用? 想象你背...

CSS实现常见元素水平、垂直居中(css中元素水平居中显示的方法?)

CSS实现常见元素水平、垂直居中(css中元素水平居中显示的方法?)

本文简单介绍如何通过CSS实现常见元素的水平、垂直居中。水平居中行内元素这种情况最简单,只需要将行内元素包括在一个display属性为block的父元素中,并且设置父元素text-align为居中即可...

使用这些不太常用的CSS属性,布局效率上又提高了一个层次

有很多CSS属性,有些人不了解,或者他们了解它们,但是忘记在需要时使用它们。其实,有时候我们用 JavaScript 来实某些交互,CSS 一个属性就能搞定了,这可以大大节约我们编码的时间。作为前端开...

用HTML内置的popover属性做一个提示窗

如何用Popover魔法在HTML中创建用户友好的提示最近我在阅读一篇关于如何构建"让用户感觉毫不费力"的Web界面的文章,但像tooltip这样的分层UI元素可能成为编码噩梦。我热爱...

CSS简写指南(css咋写)

高效的CSS写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。色彩缩写色彩的缩写最简单,在...