昨日回顾
CSS的介绍
CSS，Cascading Style Sheets层叠样式表。
一个网页由三个部分：结构、表现、行为，对应的标准是：XHTML、CSS、JavaScript。
这三个标准语言，是浏览器直接可以识别的，并且能直接进行解释(翻译)的。
CSS的格式
一个CSS样式表(<style></style>😉由多个CSS规则构成；
一个CSS规则由“选择器”和{}构成；
选择器就是给哪一个HTML元素定义；
CSS选择器
第一：基本选择器（单一）
- 通用选择器(*)：将匹配所有的HTML元素；
- 标签选择器：对应所有的HTML标记，名称与标记名称一样。
- 类选择器：可以通过给一类HTML元素，定义同一个class属性来增加样式。类样式定义以“.”开头定义。CSS的CLASS属性一般给层叠样式用表。比如：
- .news表示class=news的元素增加样式
- news表示class=news的<div>元素增加样式
- .news title表示class=news下的class=title的<div>元素
- ID选择器：给标记特定ID属性的HTML元素来增加样式。\
- Id选择器的定义，以“#”号开头
- 网页不能出现同一个ID的值，ID像身份证号，具有唯一性；
- HTML元素的ID属性，一般给JavaScript使用
第二：组合选择器
- 多元素选择器：也就是同时给多个HTML元素定义。
- body,p,a,ul,li,p{margin:0px;padding:0px;}
- 每一个HTML元素都具有默认样式。
- 后代元素选择器：用空格来分隔各个选择器。
- .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(双线)
“盒子”模型
每一个HTML元素可以看成一个“盒子”。
一个“盒子”具有：宽度、边框、内填充、外边距
宽度(width)和高度(height)：是指内容的宽度和高度，不含边框、外边距、内填充。
内填充(padding)：是指内容到边框线间的距离，含四个方向：上、右、下、左
外边距(margin)：是指边框线以外的距离。
计算一个“盒子”的总空度
假设：总宽度为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
主页的背景色、背景图片
网页的结构：网页头部、网页尾部、网页主要内容（左右两列）
二、网页结构图
本文来自投稿，不代表科技代码立场，如若转载，请注明出处https://www.cwhello.com/184.html
如有侵犯您的合法权益请发邮件951076433@qq.com联系删除
