CSS 介绍
CSS用于渲染HTML元素标签的样式
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一个
CSS 语法
- CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
- 选择器通常是您需要改变样式的 HTML 元素；每条声明由一个属性和一个值组成；属性（property）是您希望设置的样式属性（style attribute）；每个属性有一个值；属性和值被冒号分开。
- CSS声明总是以分号(;)结束，声明总以大括号({})括起来，如：
p {
color:red;
text-align:center;
}
CSS 注释
- 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
- CSS注释以 /* 开始, 以 */ 结束,
CSS 选择器
Id 选择器
- id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
- HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义，如：#id
- ID属性不要以数字开头，数字开头的id在 Mozilla/Firefox 浏览器中不起作用。
Class 选择器
- class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
- class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示，如：.class
- 类名的第一个字符不能使用数字，它无法在 Mozilla 或 Firefox 中起作用。
CSS 创建
外部样式表(External style sheet)
外部样式表，引用外部 CSS 文件
<link rel="stylesheet" type="text/css" href="mystyle.css">
内部样式表(Internal style sheet)
内部样式表，在HTML文档头部<head> 区域使用<style> 元素 来包含CSS
<style type="text/css">
body {
background-color:yellow;
}
p {
color:blue;
}
</style>
内联样式(Inline style)
内联样式，在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;"></p>
多重样式优先级
- 样式表允许以多种方式规定样式信息
- 一般情况下，优先级如下：（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
- 如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式
CSS 属性
CSS Backgrounds（背景）
CSS 背景属性用于定义HTML元素的背景。
CSS 背景属性
- background
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
background
简写属性，作用是将背景属性设置在一个声明中
- 当使用简写属性时，属性值的顺序为：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
body {
background:#ffffff url('1.png') no-repeat right top;
}
background-color
设置元素的背景颜色。
- 属性值
- 十六进制 如："#ff0000"
- RGB 如：“rgb(255,0,0)”
- 颜色名称 如："red
body {
background-color:#b0c4de;
}
background-image
把图像设置为背景。
body {
background-image:url('1.jpg');
}
background-repeat
设置背景图像是否及如何重复。
- 属性值
- repeat 背景图像将向垂直和水平方向重复。这是默认
- repeat-x 只有水平位置会重复背景图像
- repeat-y 只有垂直位置会重复背景图像
- no-repeat background-image不会重复
body{
background-image:url('1.png');
background-repeat:repeat-x;
}
background-attachment
背景图像是否固定或者随着页面的其余部分滚动。
- 属性值
- scroll 背景图片随着页面的滚动而滚动，这是默认的。
- fixed 背景图片不会随着页面的滚动而滚动。
- local 背景图片会随着元素内容的滚动而滚动。
- initial 设置该属性的默认值。
- inherit 指定 background-attachment 的设置应该从父元素继承。
body{
background-image:url('1.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
background-position
设置背景图像的起始位置。
- 属性值
- left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom 如果仅指定一个关键字，其他值将会是"center"
- x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
- xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
- inherit 指定background-position属性设置应该从父元素继承
body{
background-image:url('1.png');
background-repeat:no-repeat;
background-position:right top;
}
CSS Text（文本）
CSS 文本属性
- color
- direction
- letter-spacing
- line-height
- text-align
- text-decoration
- text-indent
- text-shadow
- text-transform
- unicode-bidi
- vertical-align
- white-space
- word-spacing
color
设置文本颜色
- 颜色指定方式
- 十六进制值，如: ＃FF0000
- 一个RGB值，如: RGB(255,0,0)
- 颜色的名称，如: red
- 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。
body {
color:red;
}
h1 {
color:#00ff00;
}
h2 {
color:rgb(255,0,0);
}
direction
设置文本方向
- 属性值
- ltr 默认。文本方向从左到右。
- rtl 文本方向从右到左。
div{
direction:rtl;
unicode-bidi:bidi-override;
}
letter-spacing
设置字符间距
- 属性值
- normal 默认。规定字符间没有额外的空间。
- length 定义字符间的固定空间（允许使用负值）。
h1 {
letter-spacing:2px;
}
h2 {
letter-spacing:-3px;
}
line-height
设置行高
- 属性值
- normal 默认。设置合理的行间距。
- number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
- length 设置固定的行间距。
- % 基于当前字体尺寸的百分比行间距。
p.small {
line-height:90%;
}
p.big {
line-height:200%;
}
text-align
对齐元素中的文本
- 属性值
- left 把文本排列到左边。默认值：由浏览器决定。
- right 把文本排列到右边。
- center 把文本排列到中间。
- justify 实现两端对齐文本效果。
h1 {
text-align:center;
}
h2 {
text-align:left;
}
h3 {
text-align:right;
}
text-decoration
向文本添加修饰
- 属性值
- none 默认。定义标准的文本。
- underline 定义文本下的一条线。
- overline 定义文本上的一条线。
- line-through 定义穿过文本下的一条线。
- blink 定义闪烁的文本。
h1 {
text-decoration:overline;
}
h2 {
text-decoration:line-through;
}
h3 {
text-decoration:underline;
}
text-indent
缩进元素中文本的首行
- 属性值
- length 定义固定的缩进。默认值：0。
- % 定义基于父元素宽度的百分比的缩进。
p {
text-indent:50px;
}
text-shadow
设置文本阴影
- 语法：
text-shadow: h-shadow v-shadow blur color; - 属性值
- h-shadow 必需。水平阴影的位置。允许负值。
- v-shadow 必需。垂直阴影的位置。允许负值。
- blur 可选。模糊的距离。
- color 可选。阴影的颜色。
h1 {
text-shadow: 2px 2px #ff0000;
}
text-transform
转换元素中的字母
- 属性值
- none 默认。定义带有小写字母和大写字母的标准的文本。
- capitalize 文本中的每个单词以大写字母开头。
- uppercase 定义仅有大写字母。
- lowercase 定义无大写字母，仅有小写字母。
h1 {
text-transform:uppercase;
}
h2 {
text-transform:capitalize;
}
p {
text-transform:lowercase;
}
unicode-bidi
设置或返回文本是否被重写
- unicode-bidi 属性与 direction 属性一起使用，来设置或返回文本是否被重写，以便在同一文档中支持多种语言。
- 属性值
- normal 默认。不使用附加的嵌入层面。
- embed 创建一个附加的嵌入层面。
- bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
- initial 设置该属性为它的默认值。
div {
direction:rtl;
unicode-bidi:bidi-override;
}
vertical-align
设置元素的垂直对齐
- 属性值
- baseline 默认。元素放置在父元素的基线上。
- sub 垂直对齐文本的下标。
- super 垂直对齐文本的上标
- top 把元素的顶端与行中最高元素的顶端对齐
- text-top 把元素的顶端与父元素字体的顶端对齐
- middle 把此元素放置在父元素的中部。
- bottom 使元素及其后代元素的底部与整行的底部对齐。
- text-bottom 把元素的底端与父元素字体的底端对齐。
- length 将元素升高或降低指定的高度，可以是负数。
- % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
img {
vertical-align:text-top;
}
white-space
设置元素中空白的处理方式
- 属性值
- normal 默认。空白会被浏览器忽略。
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的
<pre>标签。 - nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
<br>标签为止。 - pre-wrap 保留空白符序列，但是正常地进行换行。
- pre-line 合并空白符序列，但是保留换行符。
p {
white-space:nowrap;
}
word-spacing
设置字间距
- 属性值
- normal 默认。定义单词间的标准空间。
- length 定义单词间的固定空间。
p {
word-spacing:30px;
}
CSS Fonts（字体）
CSS字体属性定义字体，加粗，大小，文字样式。
在CSS中，有两种类型的字体系列名称：
- 通用字体系列 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
- 特定字体系列 一个特定的字体系列（如 “Times” 或 “Courier”）
CSS 字体属性
- font
- font-family
- font-size
- font-style
- font-variant
- font-weight
font
在一个声明中设置所有的字体属性
- 可设置的属性是（按顺序）： “font-style font-variant font-weight font-size/line-height font-family”
- font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
- 属性值
- font-style 规定字体样式。
- font-variant 规定字体异体。
- font-weight 规定字体粗细。
- font-size/line-height 规定字体尺寸和行高。
- font-family 规定字体系列。
- caption 定义被标题控件（比如按钮、下拉列表等）使用的字体。
- icon 定义被图标标记使用的字体。
- menu 定义被下拉列表使用的字体。
- message-box 定义被对话框使用的字体。
- small-caption caption 字体的小型版本。
- status-bar 定义被窗口状态栏使用的字体。
p.ex1 {
font:15px arial,sans-serif;
}
p.ex2 {
font:italic bold 12px/30px Georgia, serif;
}
font-family
指定文本的字体系列
- font-family 可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。
- 使用某种特定的字体系列（Geneva）完全取决于用户机器上该字体系列是否可用；这个属性没有指示任何字体下载。因此，强烈推荐使用一个通用字体系列名作为后路。
- 有两种类型的字体系列名称：
- family-name 指定的系列名称：具体字体的名称，比如：“times”、“courier”、“arial”。
- generic-family 通常字体系列名称：比如：“serif”、“sans-serif”、“cursive”、“fantasy”、"monospace。
- 属性值
- family-name/generic-family 用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。
p {
font-family:"Times New Roman",Georgia,Serif;
}
font-size
指定文本的字体大小
- 属性值
- xx-small、x-small、small、medium、large、x-large、xx-large 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
- smaller 把 font-size 设置为比父元素更小的尺寸。
- larger 把 font-size 设置为比父元素更大的尺寸。
- length 把 font-size 设置为一个固定的值。
- % 把 font-size 设置为基于父元素的一个百分比值。
h1 {
font-size:250%;
}
h2 {
font-size:200%;
}
p {
font-size:100%;
}
font-style
指定文本的字体样式
- 属性值
- normal 默认值。浏览器显示一个标准的字体样式。
- italic 浏览器会显示一个斜体的字体样式。
- oblique 浏览器会显示一个倾斜的字体样式。
p.normal {
font-style:normal;
}
p.italic {
font-style:italic;
}
p.oblique {
font-style:oblique;
}
font-variant
以小型大写字体或者正常字体显示文本。
- 属性值
- normal 默认值。浏览器会显示一个标准的字体。
- small-caps 浏览器会显示小型大写字母的字体。
p.small {
font-variant:small-caps;
}
font-weight
指定字体的粗细。
- 属性值
- normal 默认值。定义标准的字符。
- bold 定义粗体字符。
- bolder 定义更粗的字符。
- lighter 定义更细的字符。
- 100~900 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
p.normal {
font-weight:normal;
}
p.thick {
font-weight:bold;
}
p.thicker {
font-weight:900;
}
CSS 链接
不同的链接可以有不同的样式。
-
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
-
特别的链接，可以有不同的样式，这取决于他们是什么状态。
-
这四个链接状态是：
- a:link 正常，未访问过的链接
- a:visited 用户已访问过的链接
- a:hover 当用户鼠标放在链接上时
- a:active 链接被点击的那一刻
a:link {
color:#000000;
}
a:visited {
color:#00FF00;
}
a:hover {
color:#FF00FF;
}
a:active {
color:#0000FF;
}
- 当设置为若干链路状态的样式，也有一些顺序规则：
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
CSS 列表
CSS 列表属性作用如下
- 设置不同的列表项标记为有序列表
- 设置不同的列表项标记为无序列表
- 设置列表项标记为图像
CSS 列表属性
- list-style
- list-style-image
- list-style-position
- list-style-type
list-style
简写属性。用于把所有用于列表的属性设置于一个声明中
-
属性顺序
- list-style-type
- list-style-position
- list-style-image
-
属性值
- list-style-type 设置列表项标记的类型。
- list-style-position 设置在何处放置列表项标记。
- list-style-image 使用图像来替换列表项的标记。
- initial 将这个属性设置为默认值。
ul {
list-style:square url("sqpurple.gif");
}
list-style-image
将图像设置为列表项标志。
- 属性值
- URL 图像的路径。
- none 默认。无图形被显示。
ul {
list-style-image:url('sqpurple.gif');
}
list-style-position
设置列表中列表项标志的位置。
- 属性值
- inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
- outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
ul {
list-style-position: inside;
}
list-style-type
设置列表项标志的类型。
- 属性值
- none 无标记。
- disc 默认。标记是实心圆。
- circle 标记是空心圆。
- square 标记是实心方块。
- decimal 标记是数字。
- decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)
- lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)
- upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
- lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
- upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
- lower-greek 小写希腊字母(alpha, beta, gamma, 等。)
- lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
- upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
- hebrew 传统的希伯来编号方式
- armenian 传统的亚美尼亚编号方式
- georgian 传统的乔治亚编号方式(an, ban, gan, 等。)
- cjk-ideographic 简单的表意数字
- hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文平假名字符）
- katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名字符）
- hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文平假名序号）
- katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名序号）
ul.circle {
list-style-type:circle;
}
ul.square {
list-style-type:square;
}
ol.upper-roman {
list-style-type:upper-roman;
}
ol.lower-alpha {
list-style-type:lower-alpha;
}
CSS Table（表格）
使用 CSS 可以使 HTML 表格更美观。
CSS 盒子模型
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
- 不同部分的说明：
- Margin(外边距) 清除边框外的区域，外边距是透明的。
- Border(边框) 围绕在内边距和内容外的边框。
- Padding(内边距) 清除内容周围的区域，内边距是透明的。
- Content(内容) 盒子的内容，显示文本和图像。
CSS Border（边框）
CSS边框属性允许你指定一个元素边框的样式和颜色。
CSS 边框属性
- border
- border-style
- border-width
- border-color
- 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
不同数量的属性含义（border-width、border-style、border-color）
border-style：属性1，属性2，属性3，属性4
上->右->下->左
border-style：属性1，属性2，属性3
上->左右->下
border-style：属性1，属性2
上下->左右
border-style：属性1
上下左右属性相同
border
简写属性，用于把针对四个边的属性设置在一个声明。
-
属性顺序
- border-width
- border-style
- border-color
-
属性值
- border-width 指定边框的宽度
- border-style 指定边框的样式
- border-color 指定边框的颜色
p {
border:5px solid red;
}
border-style
用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
- 属性值
- none 定义无边框。
- hidden 与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
- dotted 定义点状边框。在大多数浏览器中呈现为实线。
- dashed 定义虚线。在大多数浏览器中呈现为实线。
- solid 定义实线。
- double 定义双线。双线的宽度等于 border-width 的值。
- groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
- ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
- inset 定义 3D inset 边框。其效果取决于 border-color 的值。
- outset 定义 3D outset 边框。其效果取决于 border-color 的值。
p {
border-style:solid;
}
border-width
简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
- 属性值
- thin 定义细的边框。
- medium 默认。定义中等的边框。
- thick 定义粗的边框。
- length 允许您自定义边框的宽度。
p {
border-style:solid;
border-width:15px;
}
border-color
简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
- 属性值
- color 指定背景颜色。在CSS颜色值查找颜色值的完整列表
- transparent 指定边框的颜色应该是透明的。这是默认
p {
border-style:solid;
border-color:#ff0000 #0000ff;
}
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
设置元素的上边框的宽度。
CSS Outline（轮廓）
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
CSS 轮廓属性
- outline
- outline-color
- outline-style
- outline-width
outline
设置所有的轮廓属性
- 属性值
- outline-color
- outline-style
- outline-width
p {
outline:#00FF00 dotted thick;
}
outline-color
设置轮廓的颜色
- 属性值
- color 指定轮廓颜色。
- invert 默认。执行颜色反转（逆向的颜色）。可使轮廓在不同的背景颜色中都是可见。
p {
outline-style:dotted;
outline-color:#00ff00;
}
outline-style
设置轮廓的样式
- 属性值
- none 默认。定义无轮廓。
- dotted 定义点状的轮廓。
- dashed 定义虚线轮廓。
- solid 定义实线轮廓。
- double 定义双线轮廓。双线的宽度等同于 outline-width 的值。
- groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
- ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
- inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
- outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
p {
outline-style:dotted;
}
outline-width
设置轮廓的宽度
- 属性值
- thin 规定细轮廓。
- medium 默认。规定中等的轮廓。
- thick 规定粗的轮廓。
- length 允许您规定轮廓粗细的值。
p {
outline-style:dotted;
outline-width:5px;
}
CSS Margin(外边距)
CSS margin(外边距)属性定义元素周围的空间。
CSS 外边距属性
- margin
- margin-bottom
- margin-left
- margin-right
- margin-top
margin
简写属性。在一个声明中设置所有外边距属性。
- 属性值
- auto 浏览器计算外边距。
- length 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。
- % 规定基于父元素的宽度的百分比的外边距。
p {
margin:2cm 4cm 3cm 4cm;
}
margin-bottom
设置元素的下外边距。
margin-left
设置元素的左外边距。
margin-right
设置元素的右外边距。
margin-top
设置元素的上外边距。
CSS Padding（填充）
CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。
CSS 填充属性
- padding
- padding-bottom
- padding-left
- padding-right
- padding-top
padding
使用简写属性设置在一个声明中的所有填充属性
- 属性值
- length 规定以具体单位计的填充值，比如像素、厘米等。默认值是 0px
- % 规定基于父元素的宽度的百分比的填充
p {
padding:2cm 4cm 3cm 4cm;
}
padding-bottom
设置元素的底部填充
padding-left
设置元素的左部填充
padding-right
设置元素的右部填充
padding-top
设置元素的顶部填充
扫一扫
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
