我的php学习第五天之css篇

昨日回顾

表单

主要功能：收集客户的信息。

表单的开发分两个部分：前台静态页面制作、后台PHP程序来处理。

用户名：<input type=“text”name=“username” />

密码：<input type=“password” name=“userpwd” />

</form>

Method提交方式

POST方法：提交大量数据、相对安全些、可以提交多样化的格式数据，提交的数据用户不可见。

GET方法：提交少量数据，安全性比较低、数据的格式比较单一，提交的数据显示在地址栏

Username=itcast

Userpwd=itcast

http://www.itcast.cn/register.php?username=itcast&userpwd=itcast

enctype：有两个值：普通的表单数据编码application/x-www-form-urlencoded”

上传文件时，数据编码multipart/form-data

框架

在框架定义页面，不能包含<body>及其子标记。<body>和<frameset>只能使用其中一个。

一个框架由框架集(frameset)和框架页(frame)构成。

<frameset>标记：定义框架的类型、大小、位置，主要定义框架的结构。

<frame>标记：指定窗口的默认页面、是否可以改变大小、是否出现滚动条。

</frameset>

<noframes></noframes>标记

含义：当浏览器不支持框架时，显示的提示信息。

<iframe></iframe>浮动框架

网页标准

一个网页由三个部分构成：结构、表现、行为。对应的标准也有三个，分别为XHTML、CSS、JS

CSS基础

CSS，Cascading Style Sheets层叠样式表，“级联样式表”、“样式表”。用户可以自己定义HTML元素的样式外观。

CSS样式表由多个CSS样式规则构成；

一个CSS样式规则，由选择器和样式格式声明语句构成，比如：选择器body或h1

选择器就是指给不同的HTML元素指定样式的一个名称；

格式声明语句，必须放在{}中；

一个格式声明语句，由“属性名:属性值”形式构成；比如：color:#FF000

每一条格式声明语句，必须以分号（;）结束；

CSS属性值，不需要加引号；

CSS的数值属性值，一般都要加单位px；比如：div{width:500px;}

CSS中不区分大小写，建议一般都用小写。

body{margin:0px;padding:0px;}

h1{color:#FF0000;}

</style>

CSS选择器

一、基本选择器

（1）通用选择器：将匹配所有的HTML元素，举例：*{margin:0px;padding:0px;}

注意：*在IE6不支持、门户网站会增加客户端负担

（2）标签选择器：所有的HTML标记，都可以做为CSS的选择器，它们是一一对应的关系

举例：h1{color:#FF0000;}

（3）类选择器：给一类HTML元素定义样式。每个HTML元素都有一个class的属性，在CSS中class的写法，是以“.”开头。

CSS样式写法：.news{color:#FF0000;}

HTML元素：

提示：类样式可以给任何HTML元素增加，只需要在HTML标记，增加一个class的属性即可。

（4）ID选择器，也就是说：每一个HTML元素，都有id属性，在CSS中id选择器的写法，是以“#”开头。

CSS样式的写法：#title{color:#FF0000;}

HTML元素：<span id=“title”></span>

提示：ID样式只能给某一个HTML元素增加样式，不能是多个同名ID。ID相当于身份证号，具有唯一性。

二、组合选择器

（1）多元素选择器（E,F,G,H）：同时匹配E\F\G\H元素。并列关系

举例：body,h1,p,a{margin:0px;padding:0px;}

（2）后代元素选择器（E F）：将匹配E元素下的所有F元素。（后代关系）

举例：div.news div.title{font-size:24px;}

说明：div.news表示，class=news的<div>元素

Div#news表示id=news的<div>元素

没有清除margin和padding之前的效果

去除margin和padding的效果

（3）子元素选择器(E > F)：将匹配E元素下的子元素F。（父子关系）

举例：.news>h2{color:#FF0000;font-size:24px;font-family:黑体;}

三、伪类选择器：主要是给链接的不同状态加样式

一个链接有四种状态：正常状态、鼠标放上状态、激活状态(时间太短)、访问过的状态

正常状态：a:link{color:#0000FF;text-decoration:none;}

放上状态：a:hover{}

激活状态：a:active{}

访问过的状态：a:visited{color:#0000ff;text-decoration:none;}

全局链接样式设置

平常使用时，请将a:link和a:visited写一致的样式。

a:link,a:visited{color:#0000FF;text-decoration:none;}

a:hover{color:#FF0000;text-decoration:underline;}

自定义链接样式，也就是增加类样式

a.a1:link,a.a1:visited{color:#FF0000;}

a.a1:hover{color:#0000FF;}

CSS尺寸属性

Width：设置元素的宽度；

Height：设置元素的高度；

CSS字体/文本属性

font-size：设置元素的文本大小，默认单位px。比如：font-size:24px;

color：设置元素的文本颜色；

font-family：设置元素的文本字体；比如：font-family:宋体,楷体,黑体;

注意：如果是英文字体，并且英文字体由多个单词构成，请使用引号引起来

Font-family："Times New Roman",Georgia,Serif;

font-weight：加粗；比如：font-weight:bold;

font-style：斜体；比如：font-style:italic;

text-align：水平对齐，取值：left、center、right

line-height：设置行高，取值：固定值或百分比。比如：line-height:150%、line-height:24px;

text-indent：首行缩进，比如：text-indent:24px;

letter-spacing：字符间距；

word-spacing：单词之间的距离

text-decoration：文本修饰线，取值：underline(下划线)、overline(上划线)、line-through(删除线)、none(无)

CSS列表属性

List-style-type：设置列表前的符号，取值：none、disc、circle、square

List-style-position：设置符号的位置，取值：inside(内)、outside(外)

List-style-image：设置图片项目符号，举例：list-style-image:url(images/li01.gif);

简写的形式：list-style:disc inside; //将上面三项的值分别写入，中间用空格隔开

实现一个<div>中的单行文本上下居中，需要设置两个属性：

div{ height:30px; line-height:30px; }

HTML文件引入CSS的方法

（1）通过<style></style>来书写CSS代码 嵌入式

格式：

<style type=“text/css”>

body{margin:0px;padding:0px;}

</style>

（2）通过<link>标记引入外部的CSS文件(.css) 链入式

格式：<link href=“css/public.css” rel=“stylesheet” type=“text/css” />

属性：

Href：指定外部CSS文件的路径；

Rel：指定外部CSS文件与当前网页的关系，取值：stylesheet

Type：指定引入的文件类型，取值：text/css

说明：这种方式，可以实现多个网页共享同一个CSS文件。

（3）每个HTML元素都有一个style属性，通过该属性设置“行内样式”

格式：<div style=“color:#FF0000;font-size:24px;”></div>

总结：HTML元素的公共属性有哪些？ name、 id、style、title、class等

CSS的继承性和优先级

1、CSS继承性

HTML中，内层元素将继承外层元素的样式；多个外层元素的样式，最终叠加到内层元素上。

如果里面元素的CSS属性与外层元素的CSS属性相同时，将替换外层的CSS属性。

以下CSS属性具有继承性：

文本相关的属性是继承的
- text-align、color、text-indent、font-family、font-size
- font-style、font-weight、 letter-spacing、word-spacing
- text-transform、line-height等

2、CSS优先级

（1）单个选择器的优先器

!important > 行内样式 > ID选择器 > 类选择 > 标签选择器

注意：!important兼容性不太好，在IE6下不支持，尽量少用。

h1{color:#FF0000!important;}

（2）组合选择器的优先级

当多个选择器组合在一起时，如何判断其优先级？我们平常这么做，假设：标签的优先为1、类选择器优先级为10、ID选择器的优先级为100，行内样式的优先级为1000。

.news h1{} 优先级值为11

.title 优先级值为10

div.news h1{color:#FF0000;} 优先级为12

#title{color:#009900;} 优先级为100

本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/175.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

我的php学习第五天之css篇

昨日回顾