[HTML]CSS基础教程2

显示全部楼层 · 发表于 10-21 21:13:54

老规矩，上链接：(1条消息) [HTML]CSS基础教程2_HJZ713的博客-CSDN博客

大家好啊（<strike>鸽了4天真舒服</strike>）我们继续来看CSS的教程吧！

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后面

常见的链接样式

根据上述链接的颜色变化的例子，看它是在什么状态。

让我们通过一些其他常见的方式转到链接样式：

文本修饰

text-decoration 属性主要用于删除链接中的下划线：

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}a:active {text-decoration:underline;}

背景颜色

背景颜色属性指定链接背景色：

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}

CSS 列表

CSS 列表属性作用如下：

设置不同的列表项标记为有序列表
设置不同的列表项标记为无序列表设置列表项标记为图像

列表

在 HTML中，有两种类型的列表：

无序列表ul - 列表项标记用特殊图形（如小黑点、小方框等）有序列表 ol - 列表项的标记有数字或字母使用 CSS，可以列出进一步的样式，并可用图像作列表项标记。

无序列表如下所示:

Coffee
Tea<strike>Coca Cola</strike>

有序列表如下所示:

Coffee
- Tea
- <strike>Coca Cola</strike>

不同的列表项标记

list-style-type属性指定列表项标记的类型是：

ul.a {list-style-type: circle;}ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}ol.d {list-style-type: lower-alpha;}

一些值是无序列表，以及有些是有序列表。

作为列表项标记的图像

要指定列表项标记的图像，使用列表样式图像属性：

ul
{
list-style-image: url('sqpurple.gif');}

上面的例子在所有浏览器中显示并不相同，IE 和 Opera 显示图像标记比火狐，Chrome 和 Safari更高一点点。

如果你想在所有的浏览器放置同样的形象标志，就应使用浏览器兼容性解决方案，过程如下

浏览器兼容性解决方案同样在所有的浏览器，下面的例子会显示的图像标记：

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;}

ui: 设置列表类型为没有列表项标记设置填充和边距 0px（浏览器兼容性） ul 中所有 li: 设置图像的 URL，并设置它只显示一次（无重复）您需要的定位图像位置（左 0px 和上下 5px）用 padding-left 属性把文本置于列表中列表 - 简写属性在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。

为列表使用简写属性，列表样式属性设置如下：

ul
{
list-style: square url("sqpurple.gif");}

可以按顺序设置如下属性：

list-style-type list-style-position (有关说明，请参见下面的CSS属性表) list-style-image 如果上述值丢失一个，其余仍在指定的顺序，就没关系。

CSS 表格

使用 CSS 可以使 HTML 表格更美观。

表格边框

指定CSS表格边框，使用border属性。

下面的例子指定了一个表格的Th和TD元素的黑色边框：

table, th, td
{
border: 1px solid black;}

请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。

为了显示一个表的单个边框，使用 border-collapse属性。

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;}

表格宽度和高度

Width和height属性定义表格的宽度和高度。

下面的例子是设置100％的宽度，50像素的th元素的高度的表格：

table
{
width:100%;
}
th
{
height:50px;}

表格文字对齐

表格中的文本对齐和垂直对齐属性。

text-align属性设置水平对齐方式，向左，右，或中心

td
{
text-align:right;}

垂直对齐属性设置垂直对齐，比如顶部，底部或中间：

td
{
height:50px;
vertical-align:bottom;}

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色：

table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;}

CSS 盒子模型

CSS 盒子模型(Box Model)

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

元素的宽度和高度

Remark重要: 当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

下面的例子中的元素的总宽度为 450px：

div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;}

让我们自己算算： 300px (宽)+ 50px (左 + 右填充)+ 50px (左 + 右边框)+ 50px (左 + 右边距)= 450px

试想一下，你只有 250 像素的空间。让我们设置总宽度为 250 像素的元素:

div {
width: 220px;
padding: 10px;
border: 5px solid gray;
margin: 0;}

最终元素的总宽度计算公式是这样的：

元素的总高度最终计算公式是这样的：

浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

CSS 边框

CSS 边框属性

CSS边框属性允许你指定一个元素边框的样式和颜色。边框样式边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式

border-style 值:

none: 默认无边框

dotted: 定义一个点线边框

dashed: 定义一个虚线边框

solid: 定义实线边框

double: 定义两个边框。两个边框的宽度和 border-width 的值相同

groove: 定义3D沟槽边框。效果取决于边框的颜色值

ridge: 定义3D脊边框。效果取决于边框的颜色值

inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

outset: 定义一个3D突出边框。效果取决于边框的颜色值

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

注意：CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 "red" RGB - 指定 RGB 值, 如 "rgb(255,0,0)" Hex - 指定16进制值, 如 "#ff0000" 您还可以设置边框的颜色为"transparent"。

注意： border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;}

边框-单独设置各边

在CSS中，可以指定不同的侧面不同的边框：

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;}

上面的例子也可以设置一个单一属性：

border-style:dotted solid;

border-style属性可以有1-4个值：

border-style:dotted solid double dashed
上边框是 dotted
右边框是 solid
底边框是 double左边框是 dashed

border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid底边框是 double

border-style:dotted solid; 上、底边框是 dotted 右、左边框是 solid

border-style:dotted; 四面边框是 dotted 上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。

边框-简写属性

上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在"border"属性中设置：

border-width
border-style (required)
border-color
border:5px solid red;

CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度。

CSS margin(外边距)

CSS margin(外边距)属性定义元素周围的空间。

margin

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

可能的值

[table][tr][td]值[/td][td]说明[/td][/tr][tr][td]auto[/td][td]设置浏览器边距。这样做的结果会依赖于浏览器[/td][/tr][tr][td]length[/td][td]定义一个固定的margin（使用像素，pt，em等）[/td][/tr][tr][td]%[/td][td]定义一个使用百分比的边距

Margin可以使用负值，重叠的内容。

Margin - 单边外边距属性

在CSS中，它可以指定不同的侧面不同的边距：

- margin-top:100px;
- margin-bottom:100px;
- margin-right:50px;
- margin-left:50px;

margin属性可以有一到四个值。

margin:25px 50px 75px 100px; 上边距为25px 右边距为50px 下边距为75px 左边距为100px
margin:25px 50px 75px; 上边距为25px 左右边距为50px 下边距为75px
margin:25px 50px; 上下边距为25px 左右边距为50pxmargin:25px; 所有的4个边距都是25px

CSS padding（填充）

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding（填充）

当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用 padding 属性可以改变上下左右的填充。

填充- 单边内边距属性在CSS中，它可以指定不同的侧面不同的填充：

padding-top:25px;
padding-bottom:25px;
padding-right:50px;padding-left:50px;

上内边距是 25px
右内边距是 50px
下内边距是 25px左内边距是 50px

填充 - 简写属性

为了缩短代码，它可以在一个属性中指定的所有填充属性。

这就是所谓的简写属性。所有的填充属性的简写属性是 padding :

Padding属性，可以有一到四个值。

padding:25px 50px 75px 100px;

上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px下填充为75px

padding:25px 50px;

上下填充为25px左右填充为50px

CSS 分组和嵌套选择器

分组选择器

在样式表中有很多具有相同样式的元素。

h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;}

为了尽量减少代码，你可以使用分组选择器。

每个选择器用逗号分隔。

在下面的例子中，我们对以上代码使用分组选择器：

h1,h2,p
{
color:green;}

嵌套选择器

它可能适用于选择器内部的选择器的样式。

在下面的例子设置了四个样式：

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;}

CSS Display(显示) 与 Visibility（可见性）

display属性设置一个元素应如何显示，visibility属性指定一个元素应可见还是隐藏。

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

CSS 网页布局

网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：

.header {
background-color: #F1F1F1;
text-align: center;
padding: 20px;}

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
background-color: #ddd;
color: black;}

内容区域

内容区域一般有三种形式:

1 列：一般用于移动端 2 列：一般用于平板设备 3 列：一般用于 PC 桌面设备

我们将创建一个 3 列布局，在小的屏幕上将会变成 1 列布局（响应式）：

/* 创建三个相等的列 */
.column {
float: left;
width: 33.33%;
}
/* 列后清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 - 小于 600 px 时改为上下布局 */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}}

提示:要设置两列可以设置 width 为 50%。创建 4 列可以设置为 25%。

提示:如果你想了解更多 @media 的规则可以查看 CSS3 多媒体查询。

提示: 现在更高级的方式是使用 CSS Flexbox 来创建列的布局，但 Internet Explorer 10 及更早的版本不支持该方式， IE6-10 可以使用浮动方式。

CSS Flexbox 的更多内容可以查看 CSS3 弹性盒子(Flex Box)。

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。

.column {
float: left;
}
/* 左右侧栏的宽度 */
.column.side {
width: 25%;
}
/* 中间列宽度 */
.column.middle {
width: 50%;
}
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}}

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

.footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;}

响应式网页布局

通过以上等学习我们来创建一个响应式等页面，页面的布局会根据屏幕的大小来调整：

* {
box-sizing: border-box;
}
body {
font-family: Arial;
padding: 10px;
background: #f1f1f1;
}
/* 头部标题 */
.header {
padding: 30px;
text-align: center;
background: white;
}
.header h1 {
font-size: 50px;
}
/* 导航条 */
.topnav {
overflow: hidden;
background-color: #333;
}
/* 导航条链接 */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 链接颜色修改 */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* 创建两列 */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
}
/* 右侧栏 */
.rightcolumn {
float: left;
width: 25%;
background-color: #f1f1f1;
padding-left: 20px;
}
/* 图像部分 */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* 文章卡片效果 */
.card {
background-color: white;
padding: 20px;
margin-top: 20px;
}
/* 列后面清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 底部 */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
.topnav a {
float: none;
width: 100%;
}}

CSS 总结

本教程已向你讲解了如何创建样式表来同时控制多重页面的样式和布局。

你已经学会如何使用 CSS 来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

同时，你也学会了如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接。

你已经学习了CSS,下一步学习什么呢?

下一步应该学习 JavaScript 。

JavaScript 是最流行的语言之一。

JavaScript 属于 web 语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。

JavaScript可以使您的网站更具活力。

许多 HTML 开发者都不是程序员，但是 JavaScript 却拥有<strike>非常简单的</strike>语法。几乎每个人都<strike>没</strike>有能力将<strike>小</strike>的 JavaScript 片段添加到网页中。 <strike>其实我连JS都不会</strike>

		自动登录	找回密码
密码			立即注册

[经验杂志] [HTML]CSS基础教程2