网页样式---CSS

最新推荐文章于 2024-09-14 08:09:14 发布

最蓝的海

最新推荐文章于 2024-09-14 08:09:14 发布

阅读量731

点赞数 4

分类专栏： CSS 文章标签： css w3c 字体标签

本文链接：https://blog.csdn.net/u011740475/article/details/38423813

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<div>是个逻辑容器标签，方便控制管理

一个样式由三部分组成，分别是选择器、属性和属性值。

例如:p{font-size:12px;font-family:"隶书";}这样页面中使用p标签的元素或范围都应用这个样式。

所有样式规则放在<style>标签内。<style>标签一般放在文档头部，即<head>的开始于结束标签之间。

<style type="text/css">
p{
color:#fff000;
font-size:24px;
font-family:"隶书";
}
</style>

选择器分为三类：标签选择器，类选择器，id选择器。

标签选择器：例如上述示例的p选择器，标签选择器一旦声明，页面中所有的该标签都会应用该标签的样式

类选择器：.className{属性：属性值;}

示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静夜思</title>
<style type="text/css">
p{color:#ff0000; font-size:24px; font-family:"隶书";}
h1{color:#0000ff;}
.green{color:#00ff00; font-family:"宋体"; font-weight:bold;}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光，</p>
<p class="green">疑是地上霜。</p>
<p>举头望明月，</p>
<p class="green">低头思故乡。</p>
</body>
</html>

id选择器在HTML中只能使用一次。语法：#idName{属性：属性值;}

例如：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>静夜思</title>
<style type="text/css">
#red{color:#ff0000; font-weight:bold;}
#blue{color:#0000ff; font-weight:bold;}
</style>
</head>
<body>
<h1>静夜思</h1>
<p>床前明月光，</p>
<p id="red">疑是地上霜。</p>
<p>举头望明月，</p>
<p id="blue">低头思故乡。</p>
</body>
</html>

如果在页面中有某些选择器的风格完全相同，或部分相同，那么可以选择集体声明的方式声明

<style type="text/css">
h1,#two,.red{ color:#ff0000; font-size:14px;}
h2,h3{color:#0000ff; font-size:16px; text-decoration:underline;}
</style>

使用CSS控制页面的方法：1、行内样式。2、内嵌样式表。3、外部样式表。

行内样式：直接在HTML标签中使用style属性，将CSS代码直接写在其中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>归园田居</title>
</head>

<body>
<h2>归园田居</h2>
<p>种豆南山下，草盛豆苗稀。</p>
<p style="color:#ff0000; font-size:24px;">晨兴理荒秽，带月荷锄归。</p>
<p>道狭草木长，夕露沾我衣。</p>
<p style="font-weight:bold; font-size:18px;">衣沾不足惜，但使愿无违。</p>
</body>
</html>

内嵌样式表就是将CSS代码写在<head>与</head>之间，并且使用<style>和</style>标签之间声明。

外部样式表：将所有的CSS样式放在一个扩展名为CSS的文件里，在将这个CSS文件应用到各个HTML文件中。

两种在HTML中引入CSS文件的方式：

1、链接样式表：

<head>
      <link href="CSS/poem.css" type="text/css"  rel="stylesheet" />
</head>

2、导入样式表：

<style type="text/css">
<!--
@import url("CSS/poem.css");
-->
</style>

外部样式表示例：

首先看CSS文件

@charset "utf-8";
/* CSS Document */

h1 { font-size:18px; }
p { font-size:12px; }
.red { color:#ff0000; font-size:16px; }
#foot { font-size:20px; color:#0000ff; font-weight:bold; }

然后看应用该样式的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>归园田居</title>
<!--<link href="css/poem.css" rel="stylesheet" type="text/css" />-->
<style type="text/css">
<!--
@import url("css/poem.css");
-->
</style>
</head>

<body>
<h1>归园田居</h1>
<p>种豆南山下，草盛豆苗稀。</p>
<p class="red">晨兴理荒秽，带月荷锄归。</p>
<p>道狭草木长，夕露沾我衣。</p>
<p id="foot">衣沾不足惜，但使愿无违。</p>
</body>
</html>

链接外部样式表和导入外部样式表的区别：导入外部样式表在HTML初始化时就会被导入HTML文件内，作为文件的一部分，类似内嵌样式表。链接样式表则是在HTML标签需要样式时才以链接的方式导入。

他们之间的主要区别有：

1、加载顺序不同，当一个页面被加载时，使用link标签引用的css会同时被加载，而是用import导入的css会等页面全部被加载完，才会被加载。

2、兼容性的差别。

3、是用DOM控制页面样式的区别，当页面是用JavaScript控制DOM改变页面样式时，是用link标签支持，而import不是DOM可控的。

4、link时HTML标签，而import是css提供的方式。

网页样式的优先级：行内样式>内嵌样式表>外部样式表(链接外部样式表>导入外部样式表)。

2、CSS属性

1、字体属性：font-size:字体大小,例如24px指字体大小为24像素。font-family设置字体的类型，例如：宋体。font-style字体风格，normal表示正常，Italic表示斜体。font-weight表示字体粗细，bold表示字体加粗。

font-size单位：em(相对长度单位，相对当前对象内文本字体的大小),pt（绝对长度单位，表示点的多少）,px（像素）

font属性一次表示多个属性，他的顺序为：字体样式font-style,字体粗细font-weight，字体大小font-size，字体名称font-family

2、文本属性：color：设置文本颜色、line-height:设置行高、text-align:设置文本的对其方式、text-decoration:向文本添加修饰（添加下划线、上划线、删除线等效果）。

3、列表属性：list-style-type:表示设置列表标志的类型，list-style-image：表示将图像设置为列表项标志，list-style-position：表示设置列表项的位置。

list-style-type取值：disc：缺省值，圆黑点。circle：空心圆点。square：小黑方块。none：无列表项标志。

list-style-image实行值是一个URL，URL后面的括号表示要使用的图片的路径和名称。

list-style-position：表示列表项标记的位置。outside：项目标记在文本以外，环绕文本根据标记对齐。inside：项目标记在文本以内，环绕文本根据标记对齐。

4、浮动属性：float：元素向那个方向浮动（a、none不浮动，默认值。b、left向左浮动。c、right向右浮动。）clear：设置元素的哪一侧不允许有浮动元素（取值为left、right、both、none）。

5、背景属性：background-color：背景颜色（transparent默认值透明色），background-image：背景图像（从元素左上角开始向元素右侧和垂直方向重复，如果不想重复则设置background-repeat属性），background-repeat：背景的重复方式（取值为repeat、repeat-x、repeat-y、no-repeat），background-position：背景图像的起始位置。

6、盒子模型:常用属性：border:边框，padding：填充，margin：边界，content：内容。

border有三个属性：color：颜色，width：宽度（可以用thin、thick、medium表示也可以用数值表示。），style：样式（none表示无边框，dotted表示点状边框，dashed表示虚线边框，solid表示实线边框，double表示双线边框）。border可以在一个声明中设置所有的边框属性，顺序依次为width、style、color。

7、定位属性：position：表示指定元素的位置，（1、static，默认值，表示元素在原本应该在的位置上，没有任何移动效果。2、absolute，绝对定位。3、relative，相对定位。4、fixed，绝对定位。）

z-index属性用于调整定位时重叠块的上下顺序。

8、其他属性，超链接一共有四种状态，a:link表示未访问过的超链接,a:visited已访问过的超链接,a:hover鼠标移到超链接上的状态,a:active表示鼠标选择激活链接，也就是说鼠标按下时的链接。a:hover必须设置在a:link和a:visited之前才有效。a:active必须设置在a:hover之后才有效。

使用CSS控制鼠标主要是通过cursor属性来实现的，该属性可以在任何标签中使用。以下为cursor值和对应的鼠标效果。

控制元素的显示和隐藏，使用display属性，该属性有两个值：none和block。分别表示隐藏和显示页面元素。