css笔记

发表于 | 分类于 ， | 本文总阅读量 次
字数统计: 3.8k | 阅读时长 ≈ 14

w3c网站参考连接

CSS笔记

选择器

CSS属性选择器

找到相同属性值，例如有几个相同的字母或单词，把它们提炼出来作为相同的属性值。从而设置一个属性选择器。
一般常用的三个：

1
2
3
< imag title=”figure name” src=”figure path”>
< a href=”https://your website path”>website name< /a>
< p lang=”en”>your words< /p>(这个规则会选择lang属性等于等于en或者en-开头的所有元素)

CSS后代选择器

我们可以定义一些后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另一些文档中不起作用。举例来说，如果我们希望只对h1元素中的em应用样式，我们可以这样写：h1 em{color：red；}该规则会把所有h1中的em元素变成红色，而其他em原色则不会改变。

CSS子元素选择器

如果我们希望选择只作为h1元素子元素的strong元素，我们可以这样写：h1>strong{color：red；}
只有strong元素嵌套在h1元素中，才能有红色的属性展示，如果是在h1元素下的em元素中的strong元素则不会显示处红色样式。

CSS相邻兄弟选择器

例如，如果要增加紧接在h1元素后出现的段落的上边距，可以这样写：h1+p{margin-top：50px；}这个选择器读作：”选择紧接在h1元素后出现的段落，，h1和p拥有共同的父元素“。只有h1紧接后面出现的第一个p元素会出现margin-top：50px，其余的p元素都不会出现margin-top：50px元素。

CSS伪类

设置超链接的颜色格式的时候，必须要有顺序：

1
2
3
4
a：link{color：#fffff} 未被访问时候的格式
a：visited{color：#ffff} 访问后的格式
a：hover{color：#ffff} categories
a：active{color：#ffff}

定义的顺序只能按照上述顺序来定义，a：hover必须位于a：link和a：visited之后，a：active必须位于a：hover之后。

CSS尺寸、字体和文本属性

尺寸属性

1
2
3
4
5
6
line-height：设置行高
max-height：设置元素的最大高度
max-width：设置元素的最大宽度
min-height：设置元素的最小高度
min-width：设置元素的最小宽度
width：设置元素的宽度

字体属性

1
2
3
4
5
6
font：简写属性。作用是把所有针对字体的属性设置在一个声明中
font-family：设置字体系列
font-size：设置字体尺寸
font-style：设置字体风格，斜体，加粗，以大写字母或者小写字母显示
font-weight：设置字体的粗细
font-variant：以小型大写字体或者正常字体显示文本

文本属性

1
2
3
4
5
6
7
8
9
10
11
12
color：设置文本颜色
direction：设置文本方向
line-height：设置行高
letter-spacing：设置字符间距
text-align：对齐文本（centre、left、right）
text-decoration：向文本添加修饰
text-indent：缩进元素中文本的首行
text-shadow：设置文本阴影
text-transform：控制元素中的字母
unicode-bidi：设置文本方向
white-space：设置元素中空白的处理方式
word-spacing：设置字间距

背景设置总结

1
2
3
4
5
6
background：简写属性，将所有的背景属性放在一起
background-attachment：背景图像是否固定或着随着页面的其余部分滚动
background-color：设置背景颜色
background-image：将图像设置为背景
background-position：设置背景开始的位置
background-repeat：设置图像背景是否重复

列表属性

1
2
3
4
list-style：简写属性，将列表的所有属性都写在一起
list-style-image：将图像设置为表项标志，表项前的圆点、方块会被替换成图片
list-style-position：设置列表中列表项的位置，如：ul{list-style-position：inside；}会把无序表放在里面。inside：列表项目标放置在文本以内，且围绕文本根据标志对齐；outside：默认值，保持标志位于文本的左侧，列表项目标放置在文本外面，且围绕文本不根据标志对齐；inherit：规定应该从父元素继承list-style-position的属性值
list-style-type：设置列表项标志的类型，用于标志前的图形。

表格属性

1
2
3
4
5
border-collapse：设置是否把表格边框合并为单一边框
border-spacing：设置分隔单元格边框的距离
caption-side：设置表格标题的位置
empty-cells：设置是否显示表格中的空单元格
table-layout：设置单元行、列的算法

轮廓、内边距、外边距、边框属性

内外边距具有合并的属性，取得是或的逻辑关系，且是大包小

轮廓

1
2
3
4
outline：简写属性，在一个声明中简写所有的属性
outline-color：颜色属性
outline-style：设置轮廓的样式，solid、dotted、dashede
outline-width：设置轮廓宽度

内边距

1
2
padding：简写属性，在一个声明中简写所有的属性
padding-bottom/left/right/top：设置元素的下/左/右/上内边距

外边距

1
2
margin：简写属性，将所有的属性写在一个声明中
margin-bottom/left/right/top：设置元素的下/左/右/上外边距

边框

1
2
3
4
5
6
border：简写属性，将所有的属性写在一个声明中
border-style：用于设置边框的所有样式，或者单独的为各边设置样式
border-width：简写属性，用于为元素的所有边框设置宽度
border-color：简写属性，用于为元素的所有边框设置颜色
borde-bottom/left/right/top：简写属性，用于设置下/左/右/上边框的所有属性
border-bottom/left/right/top-color/style/width：分别设置下/左/右/上边框的颜色、样式和宽度

浮动

1
2
3
4
5
6
7
8
9
10
position：把元素放置到一个静态的、相对的、绝对的、或固定的位置上
top/right/left/bottom：定义了一个定位元素上边距边界与包含块上边界/右边距边界与包含块右边距边界/左边距边界与包含块左边距边界/下边距边界与下边距边界之间的偏移
overflow：设置当元素的内容溢出其区域时发生的事情
clip：设置元素的形状。元素被剪入这个形状中然后显示出来
vertical-align：设置元素的垂直对齐元素
z-index：设置元素的堆叠顺序
relative：相对定位
absolute：绝对定位
float：浮动
visibility：visible，元素可见；hidden，元素不可见。在表格中，如果想要一行元素或者一个元素不可见可在该对应的列标签中添加属性：visibility：collapse。该属性跟跟empty-cells属性的不同之处在于，该属性是把表格内有值的对应表格变为空，而empty-cells是把原来表格内的空元素对应隐藏起来，这两个最后的结果一样，但是针对的对象不同。用clear属性的时候，会清除该对象的两侧的东西，比如想把两张照片上下叠放而不左右叠放，就可以选择clear属性

分类属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
clear 设置一个元素的侧面是否允许其他的浮动元素。注意一定是侧面，针对侧面，譬如叠放诗歌
cursor 规定当指向某元素之上时显示的指针类型。即当鼠标指向规定元素时光标改变成相应的设置特性，列举如下：
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动
e-resize 此光标指示矩形框的边缘可被向右（东）移动
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）
n-resize 此光标指示矩形框的边缘可被向上（北）移动
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）
s-resize 此光标指示矩形框的边缘可被向下移动（南）
w-resize 此光标指示矩形框的边缘可被向左移动（西）
text 此光标指示文本
wait 此光标指示程序正忙（通常是一只表或沙漏）
help 此光标指示可用的帮助（通常是一个问号或一个气球）
display 设置是否及如何显示元素，列举如下：
none 此元素不会被显示
block 此元素将显示为块级元素，此元素前后会带有换行符
inline 默认。此元素会被显示为内联元素，元素前后没有换行符
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示
run-in 此元素会根据上下文作为块级元素或内联元素显示
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除
table 此元素会作为块级表格来显示（类似 < table>），表格前后带有换行符
inline-table 此元素会作为内联表格来显示（类似 < table>），表格前后没有换行符
table-row-group 此元素会作为一个或多个行的分组来显示（类似 < tbody>）
table-header-group 此元素会作为一个或多个行的分组来显示（类似 < thead>）
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 < tfoot>）
table-row 此元素会作为一个表格行显示（类似 < tr>）
table-column-group 此元素会作为一个或多个列的分组来显示（类似 < colgroup>）
table-column 此元素会作为一个单元格列显示（类似 < col>）
table-cell 此元素会作为一个表格单元格显示（类似 < td> 和 < th>）
table-caption 此元素会作为一个表格标题显示（类似 < caption>）
inherit 规定应该从父元素继承 display 属性的值
float 定义元素在哪个方向浮动
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中
visibility 设置元素是否可见或不可见

导航栏

导航栏=连接列表（链接+列表）//（一般列表去除前面的圆点（list-style-type：none设置）再设置一些外边距和内边距就可以生成一个简单的导航）
如果在上述的情况基础之下，再把< a>元素设置成一个块元素，如添加display:block ，就能把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。而上述情况下只能在文本区域内才能进行链接的点击和进入，但是把a元素设置以后，就可以在整个的块元素之内对应相应的链接也能点击！！

垂直导航栏

可以用列表设置，如果是要垂直的导航栏的话，可以在< a>元素之间加一个display：block，块元素来把一块圈起来，然后在< a>元素中把该块的背景颜色和字体大小间距设置一下，再用link、visited、hover、active设置相应的颜色改变！！！就可以形成一个比较好看的导航栏

水平导航栏

有两种创建水平导航栏的方法。使用行内或浮动列表项。两种方法都不错，但是如果我们希望链接拥有相同的尺寸，就必须使用浮动方法
①行内列表项
构建水平导航栏的方法之一是将 < li> 元素规定为行内元素：li{ display:inline;}
解释：display:inline; - 默认地，< li> 元素是块元素。在这里，我们去除了每个列表项前后的换行，以便让它们在一行中显示。如果要设置每个链接表的背景颜色，就还是需要在< a>元素里面去设置，在< a>元素里面设置背景颜色、字体颜色、字体风格、对齐方式、大小写以及padding，
注意：：不管是垂直还是水平导航栏，不仅需要在< a>元素里面设置padding，还需要在< ul>元素里面设置margin、padding、padding-top、padding-bottom属性，如果您只为 a 元素设置内边距（而不设置 ul 元素），那么链接会出现在 ul 元素之外。所以，我们为 ul 元素添加了 top 和 bottom 内边距。
注意：：把外边距和内边距设置为 0 可以去除浏览器的默认设定。
用该方法，链接的宽度是不同的。为了让所有链接拥有相等的宽度，浮动 < li> 元素并规定 < a> 元素的宽度：如：

1
2
3
4
5
6
7
8
9
li{
float:left;
}，
a{
display:block;
width:60px;
} 解释：float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。

图像透明度

创建透明图像

1
2
3
4
img{
opacity:0.4;
filter:alpha(opacity=40);
}

图像透明度-hover效果

例如：

1
2
3
4
5
6
7
8
9
10
img{
opacity:0.4;
filter:alpha(opacity=40);
}

img:hover
{ opacity:1.0;
filter:alpha(opacity=100);
} 第一个 CSS 代码块就是创建透明图像的代码。此外，我们已经设置了当鼠标指针位于图像上时的样式。在这个例子中，当指针移动到图像上时，我们希望图像是不透明的。
对应的 CSS 是：opacity=1。当鼠标指针移出图像后，图像会再次透明。

透明框中的文本

首先，我们创建一个 div 元素 (class=”background”)，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class=”transbox”)。”transbox” div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。

CSS媒介类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等

1
2
3
4
5
6
7
8
9
10
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示，比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介，比如电传打字机和终端。
tv 用于电视机类型的设备。
-------------本文结束感谢您的阅读-------------