Css样式

Css样式

 1 文本字体属性
 2  color : #999999; /*文字颜色*/
 3  ​
 4  font-family : 宋体,sans-serif; /*文字字体*/
 5  ​
 6  font-size : 9pt; /*文字大小*/
 7  ​
 8  font-style:itelic; /*文字斜体*/
 9  ​
10  font-variant:small-caps; /*小字体*/
11  ​
12  letter-spacing : 1pt; /*字间距离*/
13  ​
14  line-height : 200%; /*设置行高*/
15  ​
16  font-weight:bold; /*文字粗体*/
17  ​
18  vertical-align:sub; /*下标字*/
19  ​
20  vertical-align:super; /*上标字*/
21  ​
22  text-decoration:line-through; /*加删除线*/
23  ​
24  text-decoration: overline; /*加顶线*/
25  ​
26  text-decoration:underline; /*加下划线*/
27  ​
28  text-decoration:none; /*删除链接下划线*/
29  ​
30  text-transform : capitalize; /*首字大写*/
31  ​
32  text-transform : uppercase; /*英文大写*/
33  ​
34  text-transform : lowercase; /*英文小写*/
35  ​
36  text-align:right; /*文字右对齐*/
37  ​
38  text-align:left; /*文字左对齐*/
39  ​
40  text-align:center; /*文字居中对齐*/
41  ​
42  line-height:height; /*上下居中对其*/
43  ​
44  text-align:justify; /*文字分散对齐*/
45  ​
46  vertical-align属性
47  ​
48  vertical-align:top; /*垂直向上对齐*/
49  ​
50  vertical-align:bottom; /*垂直向下对齐*/
51  ​
52  vertical-align:middle; /*垂直居中对齐*/
53  ​
54  vertical-align:text-top; /*文字垂直向上对齐*/
55  ​
56  vertical-align:text-bottom; /*文字垂直向下对齐*/

修改默认属性

 1  body {
 2      margin: 0;
 3      padding: 0;
 4      font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,
 5 　　　Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
 6  }
 7  /*清除a标签中的演示*/
 8  a {
 9      text-decoration: none;
10      color: #000;
11      display: block;   /*使a标签为一个盒子*/
12  }
13   list-style-type:none;   /*清除li标签的圆点， 放在li标签的div父类里面*/
14  /*清除li标签的格式*/
15  li {
16      list-style: none;
17  }
18  /*左浮动*/
19  .float-left {
20      float: left;
21  }
22  /*有浮动*/
23  .float-right {
24      float: right;
25  }
26  /*清除所有浮动样式*/
27  .clear-float {
28      clear: both;
29  }

div中的标签：

1   overflow: hidden;  /*防止溢出*/
2   border: 1px solid sienna; /*边框*/

 

线条

1  虚线
2  <TEXTAREA STYLE="border:1px dashed pink">
3  实线
4  <TEXTAREA STYLE="border:1px solid pink">

 

边框样式

1  border-top : 1px solid black 上框
2  border-bottom : 1px solid #6699cc 下框
3  border-left : 1px solid #6699cc 左框
4  border-right : 1px solid #6699cc 右框
5  border: 1px solid #6699cc 四边框

 

链接

1  A 所有超连接
2  A:link 超连接文字格式
3  A:visited 浏览过的连接文字格式
4  A:active 按下连接的格式
5  A:hover 鼠标移至连接

 

背景

1  background-color:black 背景颜色
2  background-image : url(image/bg.gif) 背景图片
3  background-attachment : fixed 固定背景
4  background-repeat : repeat 重复排列-网页预设
5  background-repeat : no-repeat 不重复排列
6  background-repeat : repeat-x 在x轴重复排列
7  background-repeat : repeat-y 在y轴重复排列
8  background-position : 90% 90% 背景图片x与y轴的位置 　

 

特殊效果

1、z-index:设置DIV的层叠顺序。用z-index属性时，position必需要指定为absolute才行。

2、cursor:设置DIV上光标的样式。

3、clip:设置剪辑矩形。clip:rect(top right bottom left);设置上下左右的距离,但此时要把position指定为absolute。

4、opacity 透明度 filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;

表格样式

属性描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

列表样式

属性描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

HTML标签

头部（head标签）

  1. 是“<base>” 标签

  2. 是“<link>”标签

定义和用法

<link> 标签定义文档与外部资源的关系。

<link> 标签最常见的用途是链接样式表。

HTML 与 XHTML 之间的差异

在 HTML 中，<link> 标签没有结束标签。

在 XHTML 中，<link> 标签必须被正确地关闭。

提示和注释：

注释：link 元素是空元素，它仅包含属性。

注释：此元素只能存在于 head 部分，不过它可出现任何次数。

属性

new : HTML5 中的新属性。

属性值描述
charset char_encoding HTML5 中不支持。
href URL 规定被链接文档的位置。
hreflang language_code 规定被链接文档中文本的语言。
media media_query 规定被链接文档将被显示在什么设备上。
rel alternateauthorhelpiconlicencenextpingbackprefetchprevsearchsidebarstylesheettag 规定当前文档与被链接文档之间的关系。
rev reversed relationship HTML5 中不支持。
sizes heightxwidthany 规定被链接资源的尺寸。仅适用于 rel="icon"。
target _blank_self_top_parentframe_name HTML5 中不支持。
type MIME_type 规定被链接文档的 MIME 类型。

  1. 是“<meta>”标签

在 HTML 中，<meta> 标签没有结束标签。

在 XHTML 中，<meta> 标签必须被正确地关闭。

提示和注释：

注释：<meta> 标签永远位于 head 元素内部。

注释：元数据总是以名称/值的形式被成对传递的。

必需的属性

属性值描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性值描述
http-equiv content-typeexpiresrefreshset-cookie 把 content 属性关联到 HTTP 头部。
name authordescriptionkeywordsgeneratorrevisedothers 把 content 属性关联到一个名称。
scheme some_text 定义用于翻译 content 属性值的格式。

name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

 <meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

 <meta http-equiv="charset" content="iso-8859-1">
 <meta http-equiv="expires" content="31 Dec 2008">

这样发送到浏览器的头部就应该包含：

 content-type: text/html
 charset:iso-8859-1
 expires:31 Dec 2008

当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由 <head> 标签的 profile 属性指定的概况文件中进行了定义。

全局属性

<meta> 标签支持 HTML 中的全局属性。

  1. 是“<script>”标签 ：是js文件或者内置js语句：

必选的属性

属性值描述
type MIME-type 指示脚本的 MIME 类型。

可选的属性

属性值描述
async async 规定异步执行脚本（仅适用于外部脚本）。
charset charset 规定在外部脚本文件中使用的字符编码。
defer defer 规定是否对脚本执行进行延迟，直到页面加载为止。
language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。
src URL 规定外部脚本文件的 URL。
xml:space preserve 规定是否保留代码中的空白。

  1. 是“<style>”标签 ：是css内置样式

  2. 是“<title>”标签 ：页面得标题

定义文档类型

 1  <html> 定义HTML文档。
 2   
 3  <title> 定义文档的标题。
 4   
 5  <body> 定义文档的主体。
 6   
 7  <h1>to<h6> 定义HTML标题。
 8   
 9  <p> 定义段落。
10   
11  <br> 定义简单的折行。
12   
13  <hr> 定义水平线。
14   
15  <!--...--> 定义注释。

 

表单

 
 1 <form> 定义供用户输入的HTML表单。
 2   
 3  　　<input> 定义输入控件。
 4   
 5  　　<textarea> 定义多行的文本输入控件。
 6   
 7  　　<button> 定义按钮。
 8   
 9  　　<select> 定义选择列表（下拉列表）。
10   
11  　　<optgroup> 定义选择列表中相关选项的组合。
12   
13  　　<option> 定义选择列表中的选项。
14   
15  　　<label> 定义input元素的标注。
16   
17  　　<fieldset> 定义围绕表单中元素的边框。
18   
19  　　<legend> 定义fieldset元素的标题。
20   
21  　　<datalist> 定义下拉列表。
22   
23  　　<keygen> 定义生成密钥。
24   
25  　　<output> 定义输出的一些类型。

 

框架

1  <frame> 定义框架集的窗口或框架。
2   
3 <frameset> 定义框架集。
4   
5 <noframes> 定义针对不支持框架的用户的替代内容。
6   
7 <iframe> 定义内联框架。

 

图像

 1  <img> 定义图像。
 2   
 3  <map> 定义图像映射。
 4   
 5  <area> 定义图像地图内部的区域。
 6   
 7  <canvas> 定义图形。
 8   
 9  <figcaption> 定义figure元素的标题。
10   
11  <figure> 定义媒介内容的分组，以及它们的标题。

 

链接

1  <a> 定义锚。
2   
3  <link> 定义文档与外部资源的关系。
4   
5  <nav> 定义导航链接。

 

列表

 1  <ul> 定义无序列表
 2      
 3   <ol> 定义有序列表。
 4   
 5  <li> 定义列表的项目。
 6   
 7  <dir> 不赞成使用。定义目录列表。
 8   
 9  <dl> 定义定义列表。
10   
11  <dt> 定义定义列表中的项目。
12   
13  <dd> 定义定义列表中项目的描述。
14   
15  <menu> 定义命令的菜单/列表。
16   
17  <menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
18   
19  <command> 定义命令按钮。

 

表格

 1  <table> 定义表格
 2   
 3  <caption> 定义表格标题。
 4   
 5  <th> 定义表格中的表头单元格。
 6   
 7  <tr> 定义表格中的行。
 8   
 9  <td> 定义表格中的单元。
10   
11  <thead> 定义表格中的表头内容。
12   
13  <tbody> 定义表格中的主体内容。
14   
15  <tfoot> 定义表格中的表注内容（脚注）。
16   
17  <col> 定义表格中一个或多个列的属性值。
18   
19  <colgroup> 定义表格中供格式化的列组。

样式/节

 1  <style> 定义文档的样式信息。
 2   
 3  <div> 定义文档中的节。
 4  
 5  <span> 定义文档中的节。
 6   
 7  <header> 定义section或page的页眉。
 8   
 9  <footer> 定义section或page的页脚。
10   
11  <section> 定义section。
12   
13  <article> 定义文章。
14   
15  <aside> 定义页面内容之外的内容。
16   
17  <details> 定义元素的细节。
18   
19  <dialog> 定义对话框或窗口。
20   
21  <summary> 为<details>元素定义可见的标题。

 

li标签

 值   描述
 1   数字顺序的有序列表（默认值）（1, 2, 3, 4）。
 a   字母顺序的有序列表，小写（a, b, c, d）。
 A   字母顺序的有序列表，大写（a, b, c, d）。
 i   罗马数字，小写（i, ii, iii, iv）。
 I   罗马数字，大写（i, ii, iii, iv）。
 ​
 值   描述
 disc    默认值。实心圆。
 circle  空心圆。
 square  实心方块。

水平线标签

定义和用法

​
标签在 HTML 页面中创建一条水平线。
​

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。

HTML 与 XHTML 之间的差异

在 HTML 中，<hr> 标签没有结束标签。

在 XHTML 中，<hr> 必须被正确地关闭，比如 <hr />。

在 HTML 4.01 中，hr 元素的所有呈现属性均不被赞成使用。

在 XHTML 1.0 Strict DTD 中，hr 元素的所有呈现属性均不被支持。

可选的属性

属性值描述
align centerleftright 不赞成使用。请使用样式取代它。规定 hr 元素的对齐方式。
noshade noshade 不赞成使用。请使用样式取代它。规定 hr 元素的颜色呈现为纯色。
size pixels 不赞成使用。请使用样式取代它。规定 hr 元素的高度（厚度）。
width pixels% 不赞成使用。请使用样式取代它。规定 hr 元素的宽度。

html常用文本标签

 

posted @ 2020-07-30 20:43  肥龙啃锅盔  阅读(112)  评论(0)  编辑  收藏  举报