本文详细介绍了CSS的学习内容，包括CSS的简介、语法、高级语法、选择器的使用，如派生选择器、ID选择器、类选择器、属性选择器等，并探讨了子元素选择器、相邻兄弟选择器、伪类和伪元素的应用。此外，还讲解了如何创建和插入样式表，以及CSS的样式、背景、文本、字体、链接、列表、表格、轮廓、框模型和定位等相关属性的使用方法。文章最后讨论了CSS的浮动、清除浮动以及水平对齐等布局技巧。
CSS简介
CSS概述
- CSS指层叠样式表（Cascading Style Sheets）
- 样式定义如何显示HTML元素，通常存储在样式表中，解决内容与表现分离的问题
- 外部样式表通常存储在CSS文件中，可以极大提高工作效率
- 多个样式定义可层叠为一
层叠次序
浏览器缺省设置 < 外部样式表 < 内部样式表（位于< head>标签内部）< 内联样式（在HTML元素标签内部）
CSS语法
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明
selector{declaration1;declaration2;...declarationN}
- 选择器通常是需要改变样式的HTML元素
- 每条声明由一个属性和一个值组成。属性（property）是样式属性。属性和值被冒号分开。
selector{property:value}
值的不同写法和单位
p{color:red}
十六进制的颜色值：p{color:#ff0000;}
CSS的缩写形式：p{color:#f00;}
RGB值：p{color:rgb(255,0,0);}
RGB百分比：p{color:rgb(100%,0%,0%)}即使当值为０时，百分比也不能省略。其他情况可以省略，如０＝０ｐｘ
引号
如果值为若干单词，则要给值加引号
p{font-family:"sans serif";}
多重声明
如果要定义不止一个声明，则需要用分号将每个声明分开
//习惯在最后一个声明也加上分号
p{text-align: center; color: red;}
CSS对大小写不敏感，但是如果涉及到与HTML文档一起工作的话，class和id名称对大小写是敏感的
CSS高级语法
选择器的分组
关键符号: ,
h1,h2,h3,h4,h5,h6{
color: green;
}
通配符选择器
定义: 显示为一个星号(*),该选择器可以与任何元素匹配,就像是一个通配符
//使文档中的每个元素都为红色
* {color: red;}
继承极其问题
根据CSS，子元素从父元素继承属性，但它并不总是按此方式工作。
body{
font-family: Verdana, sans-serif;
}
Netscape 4用户不支持继承，可以利用组选择器解决这个问题
p,td,ul,ol,li,dl,dt,dd{
font-family: verdana, sans-serif;
}
不希望被继承的元素
p{
font-family: Times, "Times New Roman", serif;
}
CSS派生选择器/后代选择器
定义：通过依据元素在其位置的上下文关系来定义样式.规则左边的选择器一端包括两个或多个用空格分隔的选择器
注意:两个元素之间的层次间隔可以是无限的
li strong{
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字，不是斜体字，因为我不再列表当中，这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为strong元素位于li元素内</strong></li>
<li>我是正常的字体</li>
</ol>
CSS id 选择器
定义：可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。
注：id属性只能在每个HTML文档中出现一次
#red {color: red;}
#green {color: green;}
<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>
老版本的Windows/IE浏览器可能会忽略这条规则,除非特别的定义这个选择器所属的元素
div#red {color: red;}
ID选择器与类选择器的区别
区别1:ID只能在文档中使用一次
区别2:不能使用ID词列表
id选择器和派生选择器
定义:id选择器常常用于建立派生选择器.
下例中id是sidebar的元素内的p,h2得到了特殊的处理
即使被标注为sidebar的元素只能在文档中出现一次,这个id选择器作为派生选择器也可以被使用很多次
#sidebar p {
font-style: italic;
text-align:right; }
#sidebar h2{
font-size:1em;}
CSS类选择器
类选择器以一个点号"."显示
.center {text-align: center}
或 *.center {text-align: center}
注:类名的第一个字符不能使用数字
<h1 class="center">
This heading wil be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
class被用作派生选择器
类名为fancy的更大元素内部的表格单元显示橙色文字
.fancy td{
color: #f60;}
元素基于它们的类而被选择:
类名为fancy的表格单元显示橙色文字
td.fancy {
color: #f60;}
<td class="fancy">
CSS多类选择器
定义:一个class值可能包含一个词列表,各个词之间用空格分隔.
//例如希望将一个特定的元素同时标记为important和warning,就可以写作:
<p class="important warning">
This paragraph is a very important warning.
</p>
//class为important的所有元素为粗体,class为warning的所有元素为斜体,class中同时包含important和warning的所有元素还有一个银色的背景
.important {font-weight:bold;}
.warning {font-style:italic;}
.import.warning {background:silver;}
CSS属性选择器
定义:对带有指定属性的HTML元素设置样式
注释：只有在规定了!DOCTYPE时,IE7和IE8才支持属性选择器.在IE6及更低的版本中,不支持属性选择.
[attribute]: 用于选取带有指定属性的元素
[attribute=value]: 用于选取带有指定属性和值的元素
[attribute~=value]：用于选取属性值中包含指定词汇的元素，以空格分隔
[attribute|=value]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词，以连字符分隔
[attribute^=value]：匹配属性值以指定值开头的每个元素
[attribute$=value]：匹配属性值以指定值结尾的每个元素
[attribute*=value]：匹配属性值中包含指定值的每个元素
为带有title属性的所有元素设置样式
[title]
{
color: red;
}
<h2 title="Hello world">Hello world</h2>
//只对有href属性的锚(a元素)应用样式
a[href] {color:red}
//为了将同时有href和title属性的HTML超链接的文本设置为红色,
a[href][title] {color:red;}
属性和值选择器
为title="W3School"的所有元素设置样式:
[title=W3School]
{
border:5px solid bule
}
属性和值选择器- 多个值
<html>
<head>
<style type="text/css">
适用于由空格分隔的属性值
[title~=hello]
{
color: red;
}
适用于由连字符分隔的属性值
[lang |=en]
{
color: red;
}
</style>
</head>
<body>
空格分隔
<h2 title="hello world">hello world</h2>
<p title="student hello ">Hello W3School students!</p>
<hr />
连字符分隔
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
</body>
</html>
属性选择器在为不带有class或id的表单设置样式
input[type="text"]
{
background-color:yellow;
}
……
<input type="text" name="Name" value="bill">
CSS子元素选择器
定义:只能选择作为某元素子元素的元素
符号:大于号>
//选择只作为h1元素子元素的strong元素
h1 > strong {color:red;}
把h1下的两个strong元素变为红色,但是第二个h1中的strong不受影响
<h1>This is <strong>very</strong> <strong>very</strong>important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
CSS相邻兄弟选择器
定义:选择紧接在另一个元素后的元素,且二者有相同的父元素.结合符+
注意:用一个结合符只能选择两个相邻兄弟中的第二个元素
li+li {font-weight:bold;}
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item3</li>
</ol>
</div>
//上面这个选择器只会把列表中的第二个和第三个列表项变为粗体.第一个列表项不受影响
CSS伪类
定义:用于向某些选择器添加特殊的效果
语法:
伪类的语法:
selector:pseudo-class {property:value}
CSS类也可与伪类搭配使用
selector.class:preudo-class {property:value}
例:假如链接被访问过,那么它将显示为红色
a.red: visited{color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
锚伪类:
a:link {color:#FF0000} //未访问的链接
a:visited {color:#00FF00} //已访问的链接
a:hover {color:#FF00FF} //鼠标移动到链接上
a:active {color:#0000FF} //选定的链接
first-child伪类
定义:选择作为第一个子元素的元素
//第一个规则将作为某元素第一个子元素的所有p元素设置为粗体.第二个规则将作为某个元素第一个子元素的所有li元素变成大写
p: first-child {font-weight:bold;}
li:first-child {text-transform:uppercase;}
<div>
<p> These are the necessary steps:</p>
<ul>
<li>Intert Key<li>
<li>Turn key <strong> clockwise </strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
lang伪类
定义:为不同的语言定义特殊的规则
lang类为属性值为no的q元素定义qutoes的类型
q:lang(no)
{
qutoes:"~" "~"
}
<p>文字<q lang="no">段落中的引用的文帝</q>文字</p>
CSS伪元素
:first-line伪元素
定义:向文本的首行设置特殊样式
注释:可用于first-line的伪元素:font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear
//对p元素的第一行文本进行格式化
p:first-line
{
color: #ff0000;
}
:first-letter伪元素
定义:向文本的首字母设置特殊样式
p:first-letter
{
color:#ff0000;
}
:before伪元素
定义:可以在元素的内容前面插入新内容
//在每个<h1>元素前面插入一幅图片
h1:before
{
content:url(logo.gif);
}
:after伪元素
定义:在元素的内容之后插入新内容
//在每个<h1>元素后面插入一幅图片
h1:after
{
content:url(logo.gif);
}
如何创建CSS，插入样式表
外部样式表
定义：样式需要应用于很多页面时
浏览器会从文件mystyle.css中读到样式声明，并根据他来格式文档
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
文件中不能包含任何有html标签，以.css扩展名进行保存
hr {color: sienna;}
p {margin-left: 20px;}
不重要在属性值和单位之间留有空格
内部样式表
定义：单个文档需要特殊的样式时
使用<style>标签子啊文档头部定义内部样式表
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
</style>
</head>
内联样式
定义：当样式仅需要在一个元素上应用一次时
需要在相关的标签内使用样式(style)属性。style属性可以包含任何CSS属性
<p style="color:sienna; margin-left: 20px">
这是一个段落
</p>
多重样式
浏览器缺省设置 < 外部样式表 < 内部样式表（位于< head>标签内部）< 内联样式（在HTML元素标签内部）
CSS样式
CSS背景
背景色
background-color属性：不能继承，默认值是transparent
p {background-color: gray;}
背景色从元素的文本向外稍有延伸，只需增加一些内边距
p {background-color: gray; padding: 20px;}
背景图像
background-image属性：不能继承，默认值是none，表示背景上没有放置任何图像
大多数背景都应用到body元素
body {background-image: url(/i/eg_bg_04.gif);}
为一个段落应用背景
p.flower {background-image:url(/i/eg_bg_03.gif);}
为行内元素设置背景图像
a.radio {background-image: url(/i/eg_bg_07.gif);}
背景重复
background-repeat属性：在页面上对背景图像进行平铺。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，repeat在两个方向平铺，no-repeat则不允许图像在任何方向上平铺。
body{
background-image: url(i/eg_bg_03.gif);
background-repeat: repeat-y;
}
背景定位：
backround-position属性：改变图像在背景中的位置
关键字：top, bottom, left, right, center。位置关键字可以按任何顺序出现，只要保证不超过两个关键字：一个对应水平方向，一个对应垂直方向。如果只出现一个关键字，则认为另一个关键字是center
长度值：100px, 5cm。元素距离左上角的偏移。
百分数：50% 50%。如果只提供一个百分数值，所提供的这个值将作用于水平值，垂直值将假设为50%。
body{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: center;
或background-position: 50px 100px;
或background-position:30% 20%;
}
背景关联
background-attachment属性:文档较长时，当文档向下滚动时，背景图像也会随之滚动。文档滚动到超过图像的位置时，图像就会消失。
默认值为scroll，背景会随文档滚动，设为fixed时，图像相对可视区时固定的
body
{
background-image: url('/i/ed_bg_03.gif');
background-repeat: no-repeat;
background-attachment: fixed;
}
所有背景属性在一个声明中
background属性：简写属性，将背景属性设置在一个声明中
body{
background: #ff0000 url(i/eg_bg_03.gif) no-repeat fixed center;
}
CSS文本
缩进文本
text-indent属性：实现文本缩进。可以为所有块级元素应用text-indent，但无法将该属性应用于行内元素。不过块级元素中首行的图像也会随该行的文本移动。
p {text-indent: 5em}
使用负值：可能会使首行超过浏览器窗口的左边界。建议针对负缩进设置一个外边距或一些内边距
p {text-indent:-5em; padding-left:5em;}
使用百分比值：百分数相对于缩进元素父元素的宽度。
div {width:500px;}
p {text-indent: 20%}
<div>
<p>this is a paragraph</p>
</div>
继承
text-indent属性可以继承，下例中p也会缩进50px，因为p继承了id为inner的div元素的缩进值
div#outer {width: 50px;}
div#inner {text-indent:10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">somtext......
<p> this is a paragraph <p>
</div>
</div>
水平对齐
text-align属性:规定元素中的文本的水平对齐方式。
默认值：如果direction属性是ltr，则默认值是left；如果direction是rtl，则为right。可以继承。
可能的值：left，right，center，justify（实现两端对齐文本效果），inherit（从父元素继承text-align属性的值）
text-align:center与< CENTER>:
text-align不会控制元素的对齐，只影响内部内容。< CENTER>不仅印象文本，还会把整个元素居中。
行高
line-height属性：设置行间的距离
注：不允许使用负值
可能的值：
normal：默认。设置合理的行间距
number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length：设置固定的行间距
%：基于当前字体尺寸的百分比行间距
inherit：从父元素集成line-height属性的值
字间隔
word-spacing属性：可以改变字（单词）之间的标准间隔。默认值normal与设置为0是一样的
p.spread {word-spacing:30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">text</p>
<p class="tight">text</p>
字母间隔
letter-spacing属性：修改字符或字母之间的间隔。默认关键字是normal，与设置为0是一样的。
字符转换
text-transform属性：处理文本的大小写
可能的值：none（对文本不做任何改动），uppercase（全大写），lowercase（全小写），capitalize（每个单词首字母大写）
文本装饰
text-decoration属性
可能的值：none（关闭元素上的所有装饰），underline（下划线），overline（文本顶端划线），line-through（文本中划线），blink（文本闪烁）、
一个规则中结合多种装饰
a {text-decoration:underline overline;}
两个不同的装饰与同一元素匹配，胜出规则的值完全取代另一个值
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}
所有class为stricken的h2元素都只有一个贯穿线装饰
处理空白符
white-space属性：处理原文档中的空格，换行，tab字符
浏览器平常会丢掉多余的空白符，换行符会转换为空格，一行中多个空格的序列也会转换为一个空格。
可能的值：
normal：合并空白符，忽略换行符，允许自动换行
pre：保留空白符，保留换行符，不允许自动换行
nowrap(不换行，在同一行显示，除非使用br)：合并空白符，忽略换行符，不允许自动换行
pre-wrap:保留空白符，保留换行符，允许自动换行
pre-line:合并空白符，保留换行符，允许自动换行
显示设置这种默认行为：丢掉多余的空白符,换行符
p {white-spacing： normal;}
空白符，换行符不会被忽略
p {white-spacing: pre;}
放置元素中的文本换行，除非使用br
p {white-spaing: nowrap;}
保留空白符，换行符，但是文本行会正常换行
p {white-spacing: pre-wrap;}
合并空白符，保留换行符
p {white-spacing: preline;]
文本方向
direction属性:文本方向
可能的值:
ltr：显示从左到右的文本
rtl：显示从右到左的文本
注：对于行内元素，只有当Unicode-bidi属性设置为embed或bidi-override时才会应用direction属性。
CSS字体
CSS字体系列
通用字体系列：拥有相似外观的字体系统组合
特定字体系列：具体的字体系列
CSS定义了5种通用的字体系列：Serif，Sans-serif，Monospace，Cursive，Fantasy
指定字体系列
font-family：指定通用字体或特定字体名
指定通用字体系列
h1 {font-family: san-serif;}
指定具体字体系列
h1 {font-family: Georgia;}
如果没哟安装对应的具体字体系列，可依次查找后面的字体。建议提供一个通用字体。这些字体按照优先顺序排列，然后用逗号进行连接。
h1 {font-family: Times,TimesNR,serif;}
使用引号：当字体名中有一个或多个空格，或字体名包括#或$之类的符号，需要加引号。单引号或双引号都可以，但需要和style属性用的引号错开。
<p style="font-family: Time,'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
字体风格
font-style属性：常用语规定斜体文本
文本正常显示
p.normal {font-style: normal;}
文本斜体显示
p.italic {font-style:italic;}
文本倾斜显示
p.oblique {font-style:oblique;}
字体变形
font-variant属性：设定小型大写字母
p {font-variant: small-caps;}
字体加粗
font-weight属性：设置文本的粗细
关键字100~900对应9级加粗度：100对应最细，900对应最初，400对应normal，700对应bold。bolder对应比所继承值更粗的字体，lighter对应比所继承值更细的字体。
p.normal {font-weight: normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
字体大小
font-size属性：设置文本的大小
可能的值：
绝对值：将文本设置为指定的大小；不允许用户在所有浏览器总改变文本的大小（不利于可用性）；
相对大小：相对于父元素来设置大小；允许用户在浏览器改变文本大小。em=pixels/父元素大小
默认值：普通文本默认大小为16px
绝对值
p {font-size:14px;}
相对值。默认父元素大小为16.则其对应像素值为14px。14px/16=0.875em
p {font-size:0.875em;}
结合百分比和em：将父元素以百分比设置默认的font-size值
body {font-size:100%;}
p {font-size:0.875em;}
所有字体属性在一个声明内
15px值字体大小，30px指行间距
p {font: italic bold 15px/30px arial,sans-serif;}
CSS链接
设置链接的样式
链接的四种状态：
a:link - 普通的，未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
**注：**为链接的不同状态设置样式时,请按照以下次序规则：
a:hover必须位于a:link和a:visited之后
a:active必须位于a:hover之后
<style>
a:link {color:#FF0000;} /*未被访问的链接 */
a:visited {color:#00FF00;} /*已被访问的链接 */
a:hover {color: #FF00FF;} /* 鼠标指针移动到连接上 */
a:active {color:#0000FF} /* 正在被点击的链接 */
</style>
<a href="/index.html" target="_blank">这是一个链接</a>
CSS列表
列表类型
list-style-type属性：修改用于列表项的标志类型
可能的值：
ul：disc/circle/square/none
ol：decimal/lower-roman/upper-roman/lower-alpha/upper-alpha
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;}
列表项图像
list-style-image属性：对各标志使用一个图像
ul li {list-style-image:url("/i/arraw.gif")}
列表标志位置
list-style-position属性：规定列表中列表项目的位置
可能的值：inside/ouside/inherit
合并为一个属性
list-style属性:可以按任何顺序出，而且这些值都可以忽略。只要提供一个值，其他的就会填入默认值
li {list-style: url(example.gif) square inside}
CSS表格
表格边框
border属性：
下例中的表格为双线条边框
table,th,td {border: 1px solid blue;}
边框间距
border-spacing属性：设置相邻单元格的边框间距离
注：如果一个参数，定义水平和垂直间距。如果两个length，第一个设置水平间距，第二个设置垂直间距
border-spacing:10px 50px;
empty-cells属性：隐藏表格中空单元格上的边框和背景
empty-cells: hide/show;
折叠边框
border-collapse属性：将表格边框折叠为单一边框
可能的值：
separate：默认值，边框会被分开。不会忽略boder-spacing和empty-cells属性
collapse：边框合并为一个单一边框。会忽略border-spacing和empty-cell属性
inherit：从父元素继承
table { border-collapse: collapse;}
table,th,td { border: 1px solid black}
表格文本对齐
text-align和vertical-align属性：设置表格中文本的对齐方式
设置水平对齐方式，如left/right/center(左对齐/右对齐/居中)
td {text-align:right;}
设置垂直对齐方式，如top/bottom/center(顶部对齐/底部对齐/居中对齐)
td {height:50px; vertical-aign:bottom;}
表格内边距
padding属性：控制表格中内容与边框的距离
td {padding:15px;}
表格颜色
下例中设置边框的颜色，以及th元素的文本和背景颜色
table，td,th {borer: 1px solid green;}
th {background-color:green; color:white;}
caption-side属性：规定表格标题的放置方式
caption {caption-side: bottom/up/inherit;}
表格宽度和高度
width和height属性
table {width:100%;}
th {height:50px;}
表格布局
table-layout属性：
可能的值：
automatic：默认。列宽度由单元格内容设定
fixed：列宽由表格宽度和列宽度设定
inherit：规定应该从父元素继承
table {table-layout: fixed;}
CSS轮廓
outline-color属性：设置轮廓的颜色
outline-style属性：设置轮廓的样式。值有dotted(点状)，dashed(虚线)，solid(实线)，double(双轮廓线)…
outline-width属性：设置轮廓的宽度。值有thin(细)，medium(默认，中等)，thick(粗)，具体数值
outline属性：在元素周围绘制轮廓
按顺序设置如下属性：outline-color，outline-style，outline-width
p {outline:#00FF00 dotted thick;}
CSS框模型
CSS padding属性
定义：内边距，即元素边框和元素内容之间的空白区域
值：接受长度值或百分比值，但不允许使用负值。百分比都是相对于其父元素的width算的
各边都有10像素的内边距
h1 {padding:10px;}
按照上，右，下，左的顺序分别设置各边的内边距
h1 {padding: 10px 0.25em 2ex 20%;}
或
h1 {padding-top:10px;
padding-right:0.25em;
padding-bottom:2ex;
padding-left: 20%;}
CSS 边框 border
定义：围绕元素内容和内边距的一条或多条线
边框与背景:
- 边框绘制在“元素的背景之上”
- 背景只延申到内边距，而不是边框
边框的样式
border-style属性：none/hidden/dotted(点状)/dashed（虚线）/solid（实线）/double（双线）/groove（3d凹槽边框）/ridge（3D垄状边框）/inset（3D inset边框）/outset（3D outset边框）/inherit
把一幅图片的边框定义为outside
a:link img {border-style:outset }
定义多种样式，实线上边框，点线右边框，虚线下边框，双线左边框
p.aside {border-style: solid dotted dashed double;}
定义单边样式
border-top-style
border-right-style
border-bottom-style
border-left-style
这两种方法等价
p {border-style: solid solid solid none;}
单边属性需放在简写属性之后，否则会被覆盖
p {border-style: solid; border-left-style: none;}
边框的宽度
border-width属性：为边框指定宽度
可能的值：长度值或使用关键字：thin/medium/thick
p {border-style:solid; border-width:5px;}
或
p {border-style:solid; border-width: thick;}
定义单边宽度
border-top-width
border-right-width
border-bottom-width
border-left-width
p {border-style:solid; border-width:15px 5px 15px 5px;}
值复制
p {border-style:solid;border-width:15px 5px;}
p {
border-style:solid;
border-top-width:15px;
border-right-width:5px;
border-bottom-width:15px
border-left-width:5px;}
没有边框
设置边框宽度，必须声明一个边框样式
不会出现人格边框
p {border-style:none;border-width: 50px;}
h1 {border-width:20px;}
边框的颜色
border-color属性
默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，将与元素的文本颜色相同。如果没有文本，与父元素的文本颜色相同
p {
border-style:solid;
border-color:blue rgb(25%,35%,45%) #909090 red;
}
值复制
p {
border-style:solid;
border-color:blue red;
}
单边颜色
border-top-color
border-right-color
border-bottom-color
border-left-color
h1 {
border-style:solid;
border-color:black;
border-right-color:red;
}
透明边框
a:link,a:visited{
border-style:solid;
border-width:5px;
border-color:transparent;
}
a:hover {border-color:gray;}
CSS margin属性
定义：设置外边距
//各个边上设置1/4英寸宽的空白
h1 {margin: 0.25in}
//按照上 右 下 左的顺时针顺序定义外边距
h1 {margin: 10px 0px 15px 5px;}
**注：**实际中，浏览器对许多元素提供了预定的样式，外边距也不例外。比如，如果没有为p元素声明外边距，浏览器会自己应用一个外边距。
单边外边距属性
h2{
margin-top: 20px;
margin-right:30px;
margin-bottom:30px;
margin-left:20px;
}
外边距合并
定义：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
举例：
1.第一个元素的下外边距与第二个元素的上外边距会发生合并
2.当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并
3.假设有一个空元素，它有外边距，但是没有边框或填充。因此上下边距碰到一起，就会发生合并
CSS定位
display属性
定义:规定或改变元素生成的框的类型
可能的值:
block:让行内元素(比如< a>)表现得像块级元素一样
none:让生成的元素根本没有框,则该框及其所有内容就不再显示,不占用文档中的空间
inline:默认.此元素会被显示为内联元素
position属性
定义:影响元素框生成的方式
static:元素框正常生成.块级元素生成一个矩形框,作为文档流的一部分.行内元素则会创建一个或多个行框,置于其父元素中.
relative:元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留
absolute:元素框从文档流完全删除,并相对于其包含块定位.包含块可能时文档中的另一个元素或者是初始包含块,元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样.元素定位后生成一个块级框,**而不论原来他在正常流中生成何种类型的框.
fixed:元素框的表现类似于将position设置为absolute,不过其包含块是视窗本身.
相对定位:
定义:设置为相对定位的元素框会偏移某个距离,元素仍然保持其未定位前的形状,它原本所占的空间仍保留.
实质:相对于元素在文档中的初始位置.
#box_relative{
position:relative;
left: 30px;
top; 20px;
}
注意:在使用相对定位是,无论是否进行移动,元素仍然占据原来的空间,因此,移动元素会导致它覆盖其他框.
绝对定位:
定义:绝对定位使元素的位置与文档流无关,因此不占据空间.
实质:绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么他的位置相对于最初的包含块
提示:
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其他元素.可以通过设置z-index属性来控制这些框的堆放次序
image{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
overflow属性
定义:规定当内容溢出元素框时发生的事情
可能的值:
visible:默认值.内容不会被修剪,会呈现在元素框之外.
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容
auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容
inherit:规定应该从父元素继承overflow属性的值
clip属性
定义:裁剪绝对定位元素
img
{
positio:absolute;
clip:rect(0px,60px,200px,0px);
}
CSS浮动
float属性:
定义:定义元素在哪个方向浮动.任何元素都可以浮动**.浮动元素会生成一个块级框,而不论它本身是何种元素.**
可能的值:
left:向左浮动
right:向右浮动
none:默认值.不浮动,并会显示在其文本中出现的位置
行框和清理
浮动框旁边的行框被缩短,从而给浮动框流出空间,行框围绕浮动框
clear属性
作用:阻止行框围绕浮动框
定义:他表示框的哪些边不应该挨着浮动框
可能的值:left,right,both,none
CSS水平对齐
使用margin属性来水平对齐
定义:通过将左和右外边距设置为"auto",来对齐块元素.即规定均等地分配可用地外边距,结果就是居中对齐
注释:除非已经声明了!DOCTYPE.否则使用margin:auto在IE8以及更早地版本中是无效的
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
}
使用position属性进行左和右对齐
注释:使用position属性时,请始终设置!DOCTYPE声明
使用绝对定位:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
使用float属性来进行左和右对齐
.right
{
float:right;
width:300px;
}
CSS导航栏
导航栏=链接列表
//把链接设置为块可是
a{display:block;
width:60px;}
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
水平导航栏
- 使用行内列表项
//默认<li>元素时块元素，这里去除每个列表项前后的换行，以便让它们再一行中显示
li {display:inline;}
- 使用浮动列表项，可以使链接拥有相同的尺寸
//使用float来把块元素滑向彼此，把链接显示为块元素可使整个链接区域可点击，同时允许规定宽度
li{float:left;}
a{display:block;
width:60px;}
CSS图片透明度
创建透明图像
img
{opacity:0.4;
filter:alpha(opacity=40);//针对IE8以及更早的版本
}
透明图像-Hover效果
//鼠标移动到图像上时，不透明，鼠标移出图像后，图像透明
img
{opacity:0.4;
filter:alpha(opacity=40);
}
img
{
opacity:1.0;
filter:alpha(opacity=100);
}
CSS媒介类型
定义:媒介类型允许你定义以何种媒介来提交文档，文档可以被显示在显示器，纸媒介或者听觉浏览器等等
@media规则
@media规则使你有能力在相同的样式表中，使用不同的样式规则来针对不同的媒介
//下面例子中的样式告知浏览器在显示器上显示14像素的verdana字体，假如页面需要被打印，将使用10个像素的times字体。不论显示器还是纸媒介，font-weight被设置为粗体
<html>
<head>
<style>
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px;}
}
@media print
{
p.test {font-family:time,serif,font-size:10px}
}
@media screen,print
{
p.test {font-wight:bold}
}
</style>
</head>
<body>...</body>
</html>
扫一扫
2939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
