CSS定义
CSS(Cascading Style Sheet)层叠样式表。
插入CSS样式表
插入CSS样式表的方式有3种:
1.内联样式(Inline style)
在标签内部使用样式,如下所示:
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
2.内部样式表(Internal style)
在文档头部的<style>标签定义内部样式表,如下所示:
<head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> p{ color:red; } </style> </head>
3.外部样式表(External style)
当样式需要应用于很多页面时,外部样式表将是理想的选择。使用文档头部的<link> 标签链接到样式表,如下所示:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
多重样式的优先级(就近原则)
1.内联样式 > 内部样式 >外部样式 > 浏览器默认样式
注意:如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
2.内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 元素(类型)选择器 > 通用选择器(*)
CSS注释
CSS注释以 "/*" 开始, 以 "*/" 结束
CSS选择器
1.id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。id唯一。如下所示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> #para1{ text-align:center; color:red; } </style> </head> <body> <p id="para1">Hello World!</p> <p>这个段落不受该样式的影响。</p> </body> </html>
2.class选择器
class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。 class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center{ text-align:center; } </style> </head> <body> <h1 class="center">标题居中</h1> <p class="center">段落居中。</p> </body> </html>
3.元素(标签)选择器
在CSS样式中,使用HTML标签名来作为选择器。
4.通用选择器
使用*{...}来匹配 html 中的所有元素标签。
CSS组合选择符
在 CSS3 中包含了四种组合方式:
- 后代选择器(以空格分隔)
- 子元素选择器(以>分隔)
- 相邻兄弟选择器(以+分隔)
- 普通兄弟选择器(以~分隔)
CSS背景
1.背景颜色:background-color
background-color 属性定义了元素的背景颜色。如下所示:
body { background-color:#b0c4de; }
CSS中,颜色值通常以以下方式定义:
- 十六进制:如#ff0192
- RGB:如rgb(255,0,0)
- 颜色名称:如red
2.背景图像:background-image
background-image 属性描述了元素的背景图像。默认情况下,背景图像以平铺重复显示,以覆盖整个元素实体。如下所示:
body{ background-image:url('1.png'); }
- 背景图像水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。也可以通过设置repeat-x或repeat-y设置水平或垂直平铺。如下所示:
body{ background-image:url('1.png'); background-repeat:repeat-x; }
- 背景图像设置定位与不平铺
使用background-position可以对图像进行定位,改变图像在背景中的位置;使用no-repeat设置图像不平铺。如下所示:
body{ background-image:url('1.png'); background-repeat:no-repeat; background-position:right top; } 或者可以使用:background-position:100px 20px;指的是距离x轴100px,距离y轴20px。
CSS文本
文本属性如下所示:
属性 描述 color 设置文本颜色 direction 设置文本方向。 letter-spacing 设置字符间距 line-height 设置行高 text-align 设置文本的对齐方式
center:居中
justify:两端对齐
text-decoration 向文本添加修饰
overline:上划线
line-through:中间划线
underline:下划线
text-indent 设置文本缩进 text-shadow 设置文本阴影 text-transform 控制元素中的字母
uppercase:大写
lowercase:小写
capitalize:每个单词的首字母大写
unicode-bidi 设置或返回文本是否被重写 vertical-align 设置元素的垂直对齐 white-space 设置元素中空白的处理方式 word-spacing 设置字间距
CSS字体
字体属性如下所示:
属性 描述 font-family 指定文本的字体系列 font-size 指定文本的字体大小
字体大写可以设置为em或者px。1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em
font-style 指定文本的字体样式
normal:正常
italic:斜体
oblique:倾斜的文字
font-variant 以小型大写字体或者正常字体显示文本。 font-weight 指定字体的粗细。
lighter:定义更细的字符。
normal:默认值。定义标准的字符。
bold:定义粗体字符。
bolder:定义更粗的字符。
也可以设置为具体数字:从100到900。400 等同于 normal,而 700 等同于 bold。
CSS链接
1.链接的定义
<a href="url" target="_blank">链接说明文字</a>
2.链接样式状态
a:link 正常,未访问过的链接 a:visited 已访问过的链接 a:hover 当鼠标放在链接上时 a:active 链接被点击时 注意:a:hover 必须跟在 a:link 和 a:visited后面;a:active 必须跟在 a:hover后面
CSS列表属性
list-style-image 指定列表中的列表项标记的图像: list-style-position 设置如何相对于对象的内容绘制列表项标记。 list-style-type 设置列表项标记的类型。
CSS盒子模型
如下:
CSS边框样式
border 简写属性,用于把针对四个边的属性设置在一个声明。 border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。 border-bottom-color 设置元素的下边框的颜色。 border-bottom-style 设置元素的下边框的样式。 border-bottom-width 设置元素的下边框的宽度。 border-left 简写属性,用于把左边框的所有属性设置到一个声明中。 border-left-color 设置元素的左边框的颜色。 border-left-style 设置元素的左边框的样式。 border-left-width 设置元素的左边框的宽度。 border-right 简写属性,用于把右边框的所有属性设置到一个声明中。 border-right-color 设置元素的右边框的颜色。 border-right-style 设置元素的右边框的样式。 border-right-width 设置元素的右边框的宽度。 border-top 简写属性,用于把上边框的所有属性设置到一个声明中。 border-top-color 设置元素的上边框的颜色。 border-top-style 设置元素的上边框的样式。 border-top-width 设置元素的上边框的宽度。
Display和Visibility
隐藏元素
display:none和visibility:hidden
将元素变为内联元素
display:inline;
将元素变为块级元素
display:block;
将元素变为内联块元素
display:inline-block
定位
position属性指定了元素的定位类型。有5个值如下所示:
static HTML 元素的默认值,即没有定位,遵循正常的文档流对象。 静态定位的元素不会受到 top, bottom, left, right影响。
relative 相对于原先的位置,所释放出来的空间不会被其他标签占用。
相对定位元素经常被用来作为绝对定位元素的容器块。
fixed 元素的位置相对于浏览器窗口是固定位置。即便窗口滚动它也不会移动: absolute 绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>。 absolute 定位使元素的位置与文档流无关,因此不占据空间。
absolute 定位的元素可能和其他元素重叠。
sticky sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。基于用户的滚动位置来定位。
Overflow
CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。有以下值:
visible 默认值。内容不会被修剪,会呈现在元素框之外。 hidden 内容会被修剪,并且其余内容是不可见的。 scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
Float
CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
设置浮动
使用float:left/right/none等
清除浮动
使用clear:left/right/both/none等
透明度
透明度属性使用opacity:透明度;