css笔记总结
1.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
2.值的不同写法和单位
除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000和rgb()表示。
请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。
3.选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。这是并列选择器。
4.派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
5.id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
id 选择器和派生选择器。在现代布局中,id 选择器常常用于建立派生选择器。
单独的选择器:id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用
6.在 CSS 中,类选择器以一个点号显示
和 id 一样,class 也可被用作派生选择器
元素也可以基于它们的类而被选择
7.可以使用 backgroud-color为元素设置背景色。
这个属性接受任何合法的颜色值。
8.要把图像放入背景,需要使用 background-image属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值。如果需要在页面上对背景图像进行平铺,可以使用 background-repeat属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
9.水平对齐
text-align是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。
10.接下来讨论 text-decoration属性。
text-decoration 有 5 个值:none underline overline line-through blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,none 值会关闭原本应用到一个元素上的所有装饰。
11.指定字体系列
使用 font-family 定义文本的字体系列
字体风格font-style最常用于规定斜体文本。
该属性有三个值:normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示
12.字体加粗
font-weight属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
13.设置链接的样式
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻
当为链接的不同状态设置样式时,请按照以下次序规则:
a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后
14.文本修饰
text-decoration 属性大多用于去掉链接中的下划线
15.CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距的方式。
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置。
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
16.元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:padding-top padding-bottom padding-left padding-right
17。元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
CSS 的 border-style属性定义了 10 个不同的非 inherit 样式,包括 none。
边框的宽度:可以通过border-width为边框指定宽度。
边框的宽度:可以通过 border-width为边框指定宽度。
transparent指明透明
18.围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:
如果缺少左外边距的值,则使用右外边距的值。
如果缺少下外边距的值,则使用上外边距的值。
如果缺少右外边距的值,则使用上外边距的值。
19.Padding(填充)
当元素的 Padding(填充)(内边距)被清除时,所"释放"的区域将会受到元素背景颜色的填充。
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用,一旦改变一切都改变。
填充- 单边内边距属性
在CSS中,它可以指定不同的侧面不同的填充
Padding属性,可以有一到四个值。
padding:;上填充 右填充 下填充 左填充;
padding:上填充 左右填充 下填充;
padding:上下填充 左右填充;
padding:上下左右填充;
margin同理
20.CSS 分组 和 嵌套 选择器
CSS 分组可以将具有相同样式的选择器进行分组,减少代码量。(并列选择器)
CSS 嵌套适用于选择器内部的选择器的样式。
21.CSS Display(显示) 与 Visibility(可见性)
隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影
响布局。display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用
的空间也会从页面布局中消失。
22.如何改变一个元素显示
块状元素加display:inline变成行类元素
行类元素加display:block变成块状元素
23.Positioning(定位)
CSS定位属性允许你为一个元素定位。它也可以将一个元素放在另一个元素后面,并指定一个元素的内容太大时,应该发生什么。
元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非事先设定position属性。他们也有不同的工作方
式,这取决于定位方法.。
Static 定位
HTML元素的默认值,即没有定位,元素出现在正常的流中。
静态定位的元素不会受到top, bottom, left, right影响。
Fixed 定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动:
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Relative 定位
相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素,它原本所占的空间不会改变。
相对定位元素经常被用来作为绝对定位元素的容器块。
Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于:<html>
Absolutely定位使元素的位置与文档流无关,因此不占据空间。
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面)
一个元素可以有正数或负数的堆叠顺序:
具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。
24.元素怎样浮动
元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
如果图像是右浮动,下面的文本流将环绕在它左边:
彼此相邻的浮动元素
如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
清除浮动
clear:both overflow;hidden
25.导航栏
导航条基本上是一个链接列表,所以使用<ul>和<li>元素非常有意义:
list-style-type:none - 移除列表前小标志。一个导航栏并不需要列表标记
移除浏览器的默认设置将边距和填充设置为0
26.css3边框
在CSS3中,就能够很容易创建圆角。在CSS3中border-radius属性就是被用于创建圆角的
CSS3 border-radius - 指定每个圆角
如果你在 border-radius 属性中只指定一个值,那么将生成 4 个 圆角。
但是,如果你要在四个角上一一指定,可以使用以下规则:
四个值: 第一个值为左上角,第二个值为右上角,第三个值为右下角,第四个值为左下角。
三个值: 第一个值为左上角, 第二个值为右上角和左下角,第三个值为右下角
两个值: 第一个值为左上角与右下角,第二个值为右上角与左下角
一个值: 四个圆角值相同
CSS3中的box-shadow属性被用来添加阴影
box-shadow:x距离 y距离 模糊距离 阴影大小 颜色
27.css3背景
CSS3 background-image属性
CSS3中可以通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
CSS3 background-size 属性
background-size指定背景图像的大小。CSS3以前,背景图像大小由图像的实际大小决定。
CSS3中可以指定背景图片,让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。
你指定的大小是相对于父元素的宽度和高度的百分比的大小。
CSS3的background-Origin属性
background-Origin属性指定了背景图像的位置区域。
content-box, padding-box,和 border-box区域内可以放置背景图像。
28.CSS3的文本阴影
CSS3中,text-shadow属性适用于文本阴影。
指定了水平阴影,垂直阴影,模糊的距离以及阴影的颜色
29.CSS3 2D转换
CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。
translate()移动
rotate()旋转
scale()放大缩小
30.CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间。
注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。
指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:当鼠标光标移动到该元素时,它逐渐改变它原有样式。
要添加多个样式的变换效果,添加的属性由逗号分隔
31.css动画
CSS3 @keyframes 规则
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在@keyframe创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称
规定动画的时长
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。