HTML+CSS(5)

来源：互联网发布：js模块化开发编辑：程序博客网时间：2024/05/07 01:04

xhtml (可扩展的超文本标记语言):

取代 html，pc机——当今面向的移动端设备。

语法(Xhtml 语法要比html严格):

Xhtml 输入的标签和属性必须是小写；

Xhtml单标签后必须加 / 例如<br /> ；

Xhtml 属性必须用双引号；

Xhtml必须有dtd（document type definition）文档类型定义。

Dtd （document type definition ）文档类型定义，是一种验证机制，检验的输入的xhtml是否符合规范。

Dtd的分类：

过渡型 xhtml1-transitional：允许使用表现的标签和属性。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

严格型: 不允许使用表现的标签和属性

<b> <strong> <u> <table width=”300” > 必须使用的是css样式来设置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架型xhtml-frameset：给框架用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

可以通过该网站地址测试dtd声明：http://www.w3.org

CSS简介：

(CSS)cascading style sheets:层叠样式表。级联式样式表，简称：样式表。

Sheets :就是一个样式文件，它的扩展名为.css。

Style：外观，个性化。

如何在html结构中引入css样式：

1.行内样式表：临时做测试用。

每一个标签都有style属性。格式:<标签 style=”属性名:属性值;”> 内容 </标签>

行内样式，只能应用当前文档中的当前对应的html标签加样式，或者里面包含的标签加该样式。

2.内嵌样式表： 常用的一种。

格式:在head标签中输入 xhtml

选择器{属性名:属性值; }

</style>

内嵌样式：在当前的文档可以使用该样式，需要的时候可以使用。

3.外部样式表：常用的一种。

格式:<link rel=”stylesheet” href=”外部样式表文件 xx.css” />

保存的时候扩展名为.css文件。

第一步，建立一个css页面，保存为扩展名为.css文件；

第二步，在不同的页面引入 <link rel=”stylesheet” href=”外部css文件的地址 ” />

4.导入样式表：管理css样式。

格式:@import url(另外一个css样式)。

注意 @import是css样式标签，所以必须放到css文件中。

必须放到css样式表的最上面，例如：

CSS语法格式：

声明方法：

选择器{属性1：值1;属性2：值2;属性n：值n;}

什么是选择器？

就是通过名称指定对哪些标签进行样式设置

CSS注释：

HTML注释：

CSS注释：/*注释内容*/，不管是单行还是多行只有这一种方法。

CSS选择器的分类：

基本选择器：

1.元素选择器：

——style属性(行内样式)

——直接写在标签内

如：<p style="font-size:12px; color:red;" >文字内容</p>

标签：针对HTML的标签直接设置样式。

如：p{font-size:22px;color:green;}

2.ID选择器：

语法：以“#”开头。

命名方法：建议全小写，以字母开头。

使用方法：<p id="id的名称"></p>

如：

#q{color:red;}......<p id="q">...</p>

3.类选择器：

定义的方法：用“.”开头，后跟类名。

类名书写规范：以小写字母开始。

使用方法：<p class="类名">内容</p>

如：

.q{color:red;}......<p class="q">...</p>

4.通配符选择器：

*{CSS规则}

意思：针对当前页面所用的标签应用同样的样式（对标签的初始化）

如：*{margin:0;padding:0;border:0;}

建议对标签初始化时采用下面的方法：

body,p,ul,li,p,ol,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;border:0;}

结合元素选择器：

如：p.test{color:red}，针对p标签应用类名为test1的样式。

类选择器可以结合元素选择器来使用。

复合选择器：

1.多元素选择器：多个标签或选择器同时声明。

如：h1,h2,ul,li{margin:0;padding:0;}

注意：选择器之间用逗号隔开。

2.后代选择器：

p空格span{color:red;}

含义：针对p标签中的span标签定义样式。

注意：选择器之间用空格隔开。

3.子元素选择器：

P>span {CSS规则}

只针会p标签中的span一级有效。

4.伪类选择器：

链接<a href=”#”></a>

a:link 链接的正常状态

a:visited 鼠标单击过的链接状态

a:hover 鼠标放在链接上面的（悬停）状态

a:active 当前正在访问的链接状态

当有多种链接样式时，通常配合类来设置。

CSS尺寸属性：

px,em ,%（相对单位）

font-size:不加单位的数字毫无意思

——px像素，相对单位。和屏幕的分辨率有关。

——em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)

——%,百分比。相对单位。相对于当前默认值的百分比。

浏览器的默认字体大小为16px。

CSS字体属性：

font-family: 设置字体,建议英文的中文字体，黑体=>simhei

如：Font-family:simhei;

font-size: 设置字体的大小单位，(注意：一定加上单位)

如：font-size:24px;

font-weight:设置字体的加粗方式，100－900，bold,normal(取消加粗)

如：font-weight:100; font-weight:bold; font-weight:normal;

font-style：设置字体样式，italic

Font-style:italic; 设置字体为斜体。

CSS文本属性：

color ：设置文本的颜色用单词或16进制（建议#RRGGBB）

可以简写：如：#669900; 也可成：#690;

text-align：文本的对齐方式，left 、center、right。

line-height：行高。

垂直方向居中，所在容器，所在元素的高度与line-height保持一致。

text-indent：文本的缩进。

letter-spacing：字间距。

text-decoration：文本的描述、修饰，underline、overline、line-through、none。

可以简写：如果用 font 属性的话，就可以把几个样式进行简化，减少书的情况；

font 属性的值应按以下次序书写(各个属性之间用空格隔开)：

CSS列表属性：

List-style:none;

List-style-type:none;

列表项前面的项目符号去掉。

ul,li{List-style-type:none;}

CSS细线表格：

——<table rules=”all”>

——<table bgcolor=”” cellspacing=”2” >

——<table style=”border-collapse:collapse”

CSS边框属性：

border:线宽像素线型红色。

border:1px solid red; 同时设置四条边

border-方向（top,right,bottom,left）:1px solid red; 设置一条边的情况。

border-方向（top,right,bottom,left）:none 不要某条边的设置方法。

如：

<!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>  <title> new document </title>  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  <meta name="author" content="" />  <meta name="keywords" content="" />  <meta name="description" content="" />  <link rel="stylesheet" type="text/css" href="" />  <style type="text/css">.news{ width:500px; border:1px solid green;} .title{ font-size:24px;width:500px;border:1px solid green; height:45px; background:green; line-height:45px; } .news ul li{ height:30px; line-height:30px; border-bottom:1px dashed #ccc; width:420px;} .news li a:link,.news li a:visited{color:#ccc; text-decoration:none;} .news li a:hover{ color:red; text-decoration:none;}  </style> </head> <body><div class="title">新闻中心</div><div class="news"><ul><li><a href="#">长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li><li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li><li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li><li><a href="#">年内5次降息为买房人减负 百万房贷可省17万</a></li><li><a href="#">台湾太平岛灯塔完工 可照射越南所占岛礁</a></li><li><a href="#">解放军允许智能手机进军营安装部队自研软件</a></li><li><a href="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li></ul>  </div> </body></html>

结果如下：

0 0