FavoriteLoading
0

我的php学习第六天之css篇

昨日回顾

CSS的介绍

CSS,Cascading Style Sheets层叠样式表。

一个网页由三个部分:结构、表现、行为,对应的标准是:XHTML、CSS、JavaScript。

这三个标准语言,是浏览器直接可以识别的,并且能直接进行解释(翻译)的。

CSS的格式

一个CSS样式表(<style></style>)由多个CSS规则构成;

一个CSS规则由“选择器”和{}构成;

选择器就是给哪一个HTML元素定义;

 

CSS选择器

第一:基本选择器(单一)

  • 通用选择器(*):将匹配所有的HTML元素;
  • 标签选择器:对应所有的HTML标记,名称与标记名称一样。
  • 类选择器:可以通过给一类HTML元素,定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如:
    1. .news表示class=news的元素增加样式
    2. news表示class=news的<div>元素增加样式
    3. .news title表示class=news下的class=title的<div>元素
  • ID选择器:给标记特定ID属性的HTML元素来增加样式。\
    1. Id选择器的定义,以“#”号开头
    2. 网页不能出现同一个ID的值,ID像身份证号,具有唯一性;
    3. HTML元素的ID属性,一般给JavaScript使用

第二:组合选择器

  • 多元素选择器:也就是同时给多个HTML元素定义。
    1. body,p,a,ul,li,p{margin:0px;padding:0px;}
    2. 每一个HTML元素都具有默认样式。
  • 后代元素选择器:用空格来分隔各个选择器。
    1. .news .title p{background-color:#FF0000;}
  • 子元素选择器:用>号来分隔父子选择器,不存在第三层级的问题。

 

第三:伪类选择器

伪类选择器一般是给超链接<a>标记来增加样式。

超链接具有四个状态:

正常状态 a:link{  }

放上状态 a:hover{  }

激活状态a:active{  }

访问过状态 a:visited{   }

全局链接

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

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

给链接增加类样式 (class=“a2”)

a.a2:link,a.a2:visited{  }

a.a2:hover{  }

 

CSS的继承性

CSS内部元素将继承外部元素的样式,多个外层元素的样式就叠加到内层元素上。<body>元素是网页中最大的标记,它中的样式将被其它子元素继承。

哪些CSS属性能被继承:color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等

 

 

引入CSS的方式

(1)内嵌式

通过<style></style>来书写CSS代码。

只能应用于当前网页,不能被其它网页共享。

注意:<style>标记可以放在网页的任何地方,但一般放在<head>。

(2)外联式

通过<link>标记来引入外部的CSS文件(.css)。

可以被其它网页共享。public.css    index.css    news.css   about.css

格式:<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />

注意:<link>标记只能放在<head>中

(3)行内样式

通过style的属性来书写CSS代码。

每一个HTML元素,都有 style、class、id、name、title 属性。

举例:<p  style=“font-size:24px;”></p>

 

 

CSS的字体/文本属性

Font-size:文字大小

Font-weight:加粗

Font-style:斜体

Color:颜色

Line-height:行高

Text-indent:首行缩进

Text-align:水平对齐

Letter-spacing:字符间距

CSS列表

List-style-type:列表类型,取值:none、circle、 square

List-style-position:符号位置,取值:inside、outside

List-style-image:图片路径,举例:list-style-image:url(images/li01.gif);

 

CSS背景属性

Background-color:背景颜色

Background-image:背景图片,举例:background-image:url(images/bg.gif);

Background-repeat:背景平铺,取值:no-repeat(不平铺)、repeat(平铺)、repeat-x(x方向)、repeat-y(y方向)

Background-position:背景定位,取值:固定值或百分比

格式:background-position:水平方向  垂直方向;

用固定值定位:background-position:100px 0px;   //距离左边100px,距离上边0px

用百分比定位:background-position:50% 50%;    //水平方向居中 垂直方向居中

用单词来定位:background-postion:left|center|right  top|center|bottom;  三个值取其中一个

Background-attachment:附加信息,取值:scroll(滚动)、fixed(固定)

简写形式:background:url(images/bg.gif) repeat-x 100px 0px;  //多个属性值间用“空格”隔开

 

 

CSS浮动和清除

Float:元素浮动,取值:left或right。

Clear:清除浮动,取值:left或right或both

 

CSS浮动元素将向左向右浮动;

浮动可以叫“飘”起来;

浮动的元素,直到碰到父元素的边框或前一个浮动元素的边框为止;

浮动元素是一个块元素框,不管它原来是什么元素(行内元素);

浮动元素不再占用空间脱离了普通文档流,层级比普通元素的级别高;

 

清除浮动

  • 清除浮动特性后,清除元素之后的其它元素将恢复默认排版;
  • 清除浮动特性后,包围元素从视觉上看起来,像包围住了浮动元素;

 

CSS边框属性

Border:同时设置四个边框的属性

Border-left:设置左边框的属性

Border-right:设置右边框的属性

Border-top:设置顶边框的属性

Border-bottom:设置底边框的属性

格式:border-bottom:粗细 线型 线颜色;

举例:border-bottom:2px solid #FF0000;  //元素的下边线为2px粗的实线,颜色为红色

 

线型取值:none(无边线)、solid(实线)、dashed(虚线)、dotted(点状线)、double(双线)

image001

“盒子”模型

每一个HTML元素可以看成一个“盒子”。

一个“盒子”具有:宽度、边框、内填充、外边距

宽度(width)和高度(height):是指内容的宽度和高度,不含边框、外边距、内填充。

内填充(padding):是指内容到边框线间的距离,含四个方向:上、右、下、左

外边距(margin):是指边框线以外的距离。

image003image004

计算一个“盒子”的总空度

假设:总宽度为100px,边框为1px,内填充为10px,求内容的宽度

Width = 100px – 1px*2 -10px*2 = 78px

假设:总宽度为100px,内容的宽50px,求左右内填充分别是多少?

Padding-left = (100px – 50px )/2 = 25px

 

 

CSS内填充padding

Padding-left:左边线到内容间的距离

Padding-right:右边线到内容间的距离

Padding-top:顶边线到内容间的距离

Padding-bottom:底边线到内容间的距离

Padding:同时设置四个边的内填充距离

padding:10px;      //表示:上下左右四个内填充都是10px

padding:5px 10px;   //表示:上下为5px,左右为10px

padding:5px 10px 15px;   //表示:上为5px,左右为10px,下为15px

padding:5px 10px 15px 20px;    //表示:上右下左分别设置不同的内填充,顺序不可乱

CSS外边距margin

Margin-left:左边线以外的距离

Margin-right:右边线以外的距离

Margin-top:顶边线以外的距离

Margin-bottom:底边线以外的距离

Margin:10px;         //表示:四个外边距都是10px

Margin:10px 15px;     //表示:上下外边为10px,左右外边距为15px

Margin:5px 10px 15px  //表示:上外边距为5px,左右外边距为10px,下外边距为15px

Margin:5px 10px 15px 20px;   //分别设置四外外边距,顺序为“上右下左

 

综合案例:PHP首页

一、首先要确定的事情

主页的宽度:973px

主页的背景色、背景图片

网页的结构:网页头部、网页尾部、网页主要内容(左右两列)

 

二、网页结构图

image006

欢迎分享本文,转载请保留出处!—重蔚自留地 站长邮箱:951076433@qq.com