CSS重要知识点汇总
CSS重要知识点汇总
本文通过对w3school的CSS基础教程,整理出比较常见的却又容易遗忘或者忽略的CSS相关知识点。本文的标题顺序与w3school中的CSS基础教程标题顺序保持一致。适合翻阅和复习。
1. CSS 高级语法
(1)继承及其问题
根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:
body {font-family: Verdana, sans-serif;
}
根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。
通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。
但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4
就不支持继承,它不仅忽略继承,而且也忽略应用于 body
元素的规则。IE/Windows
直到 IE6
还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?
(2)友善地对待Netscape 4
&& 继承是一个诅咒吗?
如果你不希望 “Verdana, sans-serif” 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则(同时,4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。):
body {font-family: Verdana, sans-serif;
}td, ul, ol, ul, li, dl, dt, dd {font-family: Verdana, sans-serif;
}p {font-family: Times, "Times New Roman", serif;
}
2.CSS 属性选择器
(1)设置表单的样式
input[type="text"] {width:150px;display:block;margin-bottom:10px;background-color:yellow;font-family: Verdana, Arial;
}input[type="button"] {width:120px;margin-left:35px;display:block;font-family: Verdana, Arial;
}
(2)CSS 选择器参考手册
3.CSS 背景
(1)背景色(background-color
)
background-color
不能继承,其默认值是 transparent
。transparent
有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。
p {background-color: gray;
}
(2)背景图像(background-image
)
background-image
属性的默认值是 none
,表示背景上没有放置任何图像。
body {background-image: url(/i/eg_bg_04.gif);
}
(3)背景重复(background-repeat
)
属性值 repeat
导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x
和 repeat-y
分别导致图像只在水平或垂直方向上重复,no-repeat
则不允许图像在任何方向上平铺。
body { background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
(4)背景定位(background-position
)
background-position
属性提供值有很多方法。首先,可以使用一些关键字:top
、bottom
、left
、right
和 center
。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
body { background-image:url('/i/eg_bg_03.gif');background-repeat:no-repeat;background-position:center;
}
(5)背景关联(background-attachment
)
background-attachment
属性的默认值是 scroll
,也就是说,在默认的情况下,背景会随文档滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment
属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed
),因此不会受到滚动的影响:
body {background-image:url(/i/eg_bg_02.gif);background-repeat:no-repeat;background-attachment:fixed
}
4.CSS 文本
(1)缩进文本(text-indent
)
通过使用 text-indent
属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
p {text-indent: 5em;
}
(2)水平对齐(text-align
)
(3)字间隔(word-spacing
)
word-spacing
属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing
属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
(4)字母间隔(letter-spacing
)
letter-spacing
属性与 word-spacing
的区别在于,字母间隔修改的是字符或字母之间的间隔。
与 word-spacing
属性一样,letter-spacing
属性的可取值包括所有长度。默认关键字是 normal
(这与 letter-spacing:0
相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
(5)字符转换(text-transform
)
text-transform
属性处理文本的大小写。这个属性有 4 个值:
none
uppercase
lowercase
capitalize
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
(6)文本装饰(text-decoration
)
none
underline
overline
line-through
blink
(7)处理空白符(white-space
)
值:
(8)文本方向(direction
)
5.CSS 链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
6.CSS 表格
(1)折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
table {border-collapse:collapse;
}table,th, td {border: 1px solid black;
}
7.CSS 外边距合并
(1)外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
8.CSS 定位
(1)CSS position 属性
position 属性值的含义:
static
:
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
relative
:
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
absolute
:
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
fixed
:
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
9.CSS 浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
(1)CSS clear 属性(清除浮动)
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左右两侧均不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
inherit | 规定应该从父元素继承 clear 属性的值 |
CSS重要知识点汇总相关推荐
- [HTML/CSS基础]知识点汇总
目录 HTML基础语法: 定义: 标签: 属性: 文档结构: 文档声明: hml元素: head元素: body元素: 文本标签: 标题段落: 标题大小: 段落: 属性:align 文字修饰: 特殊字 ...
- 静态网页技术———CSS知识点汇总
静态网页技术---CSS知识点汇总 /*css可以认为时由多个选择器组成的集合,每个选择器由3个基本部分组成---"选择器名称"."属性"."值&qu ...
- 原生 遍历_细品原生JS从初级到高级知识点汇总(三)
作者:火狼1 转发链接:https://juejin.im/post/5daeefc8e51d4524f007fb15 目录 细品原生JS从初级到高级知识点汇总(一) 细品原生JS从初级到高级知识点汇 ...
- 中高级前端面试知识点汇总
1.1.什么是HTML语义化?有什么好处? 根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析. 为了在没有 CSS 的情 ...
- Vue 知识点汇总(下)--附案例代码及项目地址
文章目录 Vue 预备知识与后续知识及项目案例 一.简介 1.Vue (读音 /vjuː/,类似于 view)的简单认识 2.Vue.js安装 二.Vue知识量化 三.内容 1.Webpack 详解 ...
- 【LoRa 与 LoRaWAN】知识点汇总
本文主要记录[LoRa 与 LoRaWAN]知识点汇总,知识均来源于网络,纯属资料汇总与搬运 涉及到lora基本知识点,lora芯片的工作分析,专业名词解释 [LoRa 与 LoRaWAN]知识点汇总 ...
- Django知识点汇总
Django知识点汇总 目录 一.wsgi接口 二.中间件 三.URL路由系统 四.Template模板 五.Views视图 六.Model&ORM 七.Admin相关 八.Http协议 九. ...
- 关于代码家(干货集中营)共享知识点汇总系列——瞎推荐
关于代码家(干货集中营)共享的所有知识点其他方面的汇总,后续每周会对其进行更新 更多内容请选择以下入口 关于代码家(干货集中营)共享知识点汇总系列--Android 关于代码家(干货集中营)共享知识点 ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
最新文章
- mysql主主复制某张表_MySQL主主复制实战
- python Modbus基础
- 双绞线直连法如何才能使两台电脑实现共享
- 几种常用的数字滤波器
- Docker安装禅道项目管理平台zendao-v11.6.x
- 【转】Scala: Example use for early definition / early initializer / pre-initialized fields
- 关于《HTTP权威指南》
- uva - Broken Keyboard (a.k.a. Beiju Text)(链表)
- bp神经网络算法原理公式,bp神经网络算法推导
- 【测试理论】如何做好探索性测试(二)—增加维度
- php字符串函数(2)替换、分割、填充、去除
- 风云唐太宗(上部)精要
- 微软行星云计算Planetary Computer——previsa南美洲亚马逊雨林森林损坏系统AI智能评估
- google vr 简介
- SSH known_hosts / authorized_keys 的解释
- Debugger and device times had drifted by more than 60s. Please correct this by running adb shell da
- Android与MVC设计模式相关操作
- 深入理解C# Unity List集合去除重复项 Distinct
- qmake prl TEMPLATE=subdir之错误小记
- JavaWeb酒店管理系统