时间：2023-10-02 17:42:02 | 来源：网站运营
时间：2023-10-02 17:42:02 来源：网站运营
[HTML]CSS基础教程-1：简介
在线咨询
.css。 通过使用 CSS 可以大大提升网页开发的工作效率 在教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。;结束，声明总以大括号 {} 括起来p {color:red;text-align:center;}为了让CSS可读性更强，你可以每行只描述一个属性p{ color:red; text-align:center;}CSS 注释 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。/*开始, 以*/结束, 实例如下/*这是个注释*/p{ text-align:center; /*这是另一个注释*/ color:black; font-family:arial;}Id 和Class<.....id="..." class="...">#para1{ text-align:center; color:red;}提示：ID属性尽量以字母开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。.center {text-align:center;}你也可以指定特定的 HTML 元素使用 class。p.center {text-align:center;}多个 class 选择器可以使用空格分开..center { text-align:center; }.color { color:#ff0000; }<link>标签链接到样式表。 <link> 标签在（文档的）头部：<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。hr {color:sienna;}p {margin-left:20px;}body {background-image:url("/images/back40.gif");}提示：不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。）（是20px不是20 px）<style>标签在文档头部定义内部样式表，就像这样:<head><style>hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}</style></head><p style="color:sienna;margin-left:20px">这是一个段落。</p>h3{ color:red; text-align:left; font-size:8pt;}而内部样式表拥有针对 h3 选择器的两个属性：h3{ text-align:right; font-size:20pt;}假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：color:red;text-align:right;font-size:20pt;即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。h3 { color:blue;}实例<head> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style></head><body> <h3>显示绿色，是内部样式</h3></body>注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式，实例如下<head> <!-- 设置：h3{color:blue;} --> <style type="text/css"> /* 内部样式 */ h3{color:green;} </style> <!-- 外部样式 style.css --> <link rel="stylesheet" type="text/css" href="style.css"/></head><body> <h3>显示蓝色，是外部样式</h3></body>body {background-color:#b0c4de;}CSS中，颜色值通常以以下方式定义:h1 {background-color:#6495ed;}p {background-color:#e0ffff;}div {background-color:#b0c4de;}body {background-image:url('paper.gif');}body{background-image:url('gradient2.png');}如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:body{background-image:url('gradient2.png');background-repeat:repeat-x;}body{background-image:url('img_tree.png');background-repeat:no-repeat;}以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}body {background:#ffffff url('img_tree.png') no-repeat right top;}当使用简写属性时，属性值的顺序为：:| 标签 | 描述 |
|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
| background-color | 设置元素的背景颜色。 |
| background-image | 把图像设置为背景。 |
| background-position | 设置背景图像的起始位置。 |
| background-repeat | 设置背景图像是否及如何重复。 |
body {color:red;}h1 {color:#00ff00;}h2 {color:rgb(255,0,0);}h1 {text-align:center;}p.date {text-align:right;}p.main {text-align:justify;}a {text-decoration:none;}也可以这样装饰文字：h1 {text-decoration:overline;}h2 {text-decoration:line-through;}h3 {text-decoration:underline;p.uppercase {text-transform:uppercase;}p.lowercase {text-transform:lowercase;}p.capitalize {text-transform:capitalize;}p {text-indent:50px;}| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
| Generic family | 字体系列 | 说明 |
|---|---|---|
| Serif | Times New Roman Georgia | Serif字体中字符在行的末端拥有额外的装饰 |
| Sans-serif | Arial Verdana | "Sans"是指无 - 这些字体在末端没有额外的装饰 |
| Monospace | Courier New Lucida Console | 所有的等宽字符具有相同的宽度 |
p{font-family:"Times New Roman", Times, serif;}p.normal {font-style:normal;}p.italic {font-style:italic;}p.oblique {font-style:oblique;}<h1> - <h6>表示标题和<p>表示段落：关键词：教程,基础
