php-CSS-1
一.层叠样式表
1.什么是CSS
CSS是Cascading Style Sheets的缩写,它除了可以设置网页元素的显示位置和格式外,甚至还能产生滤镜,图像淡化,网页淡入淡出的渐变效果;一个样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档;简而言之,CSS就是对网页显示效果实现与word一样的排版控制
2.CSS语言语法
格式: 属性1:值1;属性2:值2;
单位:颜色:#rgb #8fa #aaffaa red green rgb(255,0,10)
大小:em px pt(点,1点=1/72英寸) pc(帕,1帕=12点) cm mm(米) in(英寸)
注释:/* */ 在其中不要再包含注释
3.CSS的四种设置方式
内联样式表:在HTML元素中使用style属性内联
每个HTML标签都可以加样式;代码量大,不利于更新
嵌入样式表:通过HTML的<style>标签将CSS嵌入到HTML中使用
可以控制当前页面的所有样式;不能控制其他页面的样式
外部样式表:将样式单独定义在一个后缀名为.css的文档中,并在HTML中通过link元素连接到HTML中使用
多个页面都可以使用
输入样式表 :可以将一个样式文件输入到另外一个文件中,或将一个样式文件输入到<style>元素中 @import url(css文件)
他们的优先级:内联的高于其他的,其他三个看加载的顺序
内联:
<html>
<head><title>CSS练习</title>
</head>
<body>
<p>111111</p>
<p style="color:#FF0000;background-color:#00FF00;border:2px solid blue;font-size:4cm;text-align:center">222222</p>
<p>333333</p>
</body>
</html>
嵌入:
<html>
<head><title>CSS练习</title>
<style>
p{
color:red;
background-color:green;
font-size:2cm
}
</style>
</head>
<body>
<p>111111</p>
<p>222222</p>
<p>333333</p>
</body>
</html>
外部: layout.css
/* 这里直接写入CSS即可 */
p{
color:green;
background-color:red;
border:5px solid #000;
font-size:3cm;
}
css设置.html
<html>
<head><title>CSS练习</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<p>111111</p>
<p>222222</p>
<p>333333</p>
</body>
</html>
二.CSS多种选择器的使用
1.什么是样式选择器
selector{ /* selector是样式选择器 */
property:value; /* color:red; */
property:value; /* font-size:4cm */
}
selector:当定义一条样式规则时,必须指定这条样式规则作用的网页元素,在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用于的网页元素。
HTML选择器
HTML有标签,CSS就有选择器;选择符就是赋予内部或外部样式表的名字;
HTML的标签,用来改变一个指定标签的样式;任何一个HTML元素都可以是一个CSS选择器
类选择器:同一个选择器有不同的类,因而允许同一个元素有不同的样式
定义的方式:[tag].类名(类名是自定义的,如果不加tag则代表所有HTML元素)
<tag class="类名 类名1 类名2"> (同一个元素可以使用多个类,类名之间使用空格分开)
<html>
<head><title>HTML 类样式选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" >
<style>
p.cla1{ color:red;
}
p.cla2{ background-color:#00ff00;
}
p.cla3{ font-size:1cm;
}
p { border:1px solid #0000ff;
}
</style>
</head>
<body>
<p class="cla1">1111111111</p>
<p class="cla2">2222222222</p>
<p class="cla3">3333333333</p>
<p class="cla3">4444444444</p>
<p class="cla2">5555555555</p>
</body>
</html>
ID选择器:在HTML页面中,ID属性指定了某个单一元素,ID属性就是用来对单一元素定义单独样式;一个HTML页面中,ID属性值要唯一
#idname{} (idname是自定义的名称)
<tag id="idname">
<html>
<head>
<title>ID选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
#id1{ color:#ff0000;
font-size:1cm ;
}
#id2 { color:#00ff00;
font-size:30px;
}
#di { color:#0000ff;
font-size:20px;
}
</style>
</head>
<body>
<p id="id1">111111111111</p>
<p id="id2">222222222222</p>
<b id="di">333333333333</b>
</body>
</html>
关联选择器:只不过是一个用空格隔开的两个或更多单一选择器组成的字符串;因为层叠顺序的规则,他们的优先级比单一的选择符大;必须按关联关系使用,顺序不能反;只要能保持关联关系就可以,不管是在多少层
<html>
<head><title>关联选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div #one .cla p{ color:#ff0000;
font-size:4cm;
}
</style>
</head>
<body>
<div>
<div id="one">
<div class="cla">
<p>5555555555555</p>
</div>
</div>
</div>
</body>
</html>
组合选择器:为了减少样式表的重复声明,组合是允许的;只要使用英文逗号(,)隔开每个选择符就可以了
<html>
<head><title>组合样式选择器</title>
<meta equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div,#one,.cla,a,h1,h2{ color:#ff0000;
font-size:3cm;
}
</style>
</head>
<body>
<div>aaaaaaaaaaaa</div>
<a>bbbbbbbbbbbb</a>
<h1>cccccccccccccc</h1>
</body>
</html>
伪元素选择器:是指同一个HTML元素在不同的状态下的一种定义方式;目前只有a和p两个HTML元素可以使用; 语法: 标签[.类名]:伪元素
a:link 没有任何动作前的状态 a:hover 光标移动到超链接的状态
a:active 选中超链接的状态 a:visited 访问过超链接的状态
p:first-letter 一个段落中首个字母的状态 p:first-line 一个段落首行的状态
<html>
<head><title>伪元素选择器</title>
<meta http-equiv="Contetn-Type" content="text/html;charset=gb2312">
<style>
a:link{ color:#00ff00;
font-size:1cm;
}
a:hover { color:#0000ff;
font-size:2cm;
}
a:active { color:#ff0000;
font-size:2cm;
}
a:visited { color:yellow;
font-size:1cm;
}
</style>
</head>
<body>
<a href="www.xxxx.com">xxxx</a><br>
<a href="www.yyyy.com">yyyy</a><br>
<a href="www.zzzz.com">zzzz</a><br>
</body>
</html>
样式规则的继承:所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。
<html>
<head><title>样式的继承选择器</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<style>
div { color:#0000ff;
font-size:3cm;
background-color:yellow;
}
</style>
</head>
<body>
<div><p>aaaaaaaaaaaaaa</p>
</div>
</body>
</html>
样式规则的优先级:关联选择器>ID选择器>CLASS选择器>HTML标签选择器
三.CSS常见的属性和值
CSS中修饰字体的属性
font-family 字体族科 任意字体族科名称都可以使用例如Times、serif、courier、sans-serif等,而且多个族科的赋值是可以使用的,中间用逗号分隔,以防止选择不存在的字体族科
font-size 字体大小 可以使用绝对大小、相对大小、长度或百分比
font-style 字体风格 normal(普通) italic(斜体) oblique(倾斜)
font-weight 字体加粗 normal、bold、bolder、lighter
font-variant 字体变形 normal(普通) small-caps(小型大写字母)
格式:font:[<字体风格>||<字体变形>||<字体加粗>]?<字体大小>[/<行高>]?<字体族科>
font:italic bold 12px courier,serif;
CSS中常见的控制文本的属性
letter-spacing 字母间隔 该值必须符合长度格式,允许使用负值
word-spacing 文字间隔 该值必须符合长度格式,允许使用负值
text-decoration 文字修饰 underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)或默认使用无
text-align 横向排列 left right center或justify
text-indent 文本缩进 该值必须是一个长度或一个百分比,若百分比则视上级元素的宽度而定
text-transform 字母大小写 lowercase uppercase
line-height 行高 可以接受一个控制文本基线之间的间隔的值。当值为数字时,行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值
CSS中常见的控制背景的属性
background-color 背景颜色 值和color属性值设定方式相同,或使用transparent(透明)值
background-image 背景图像 图片URL或none
background-repeat 背景重复 repeat repeat-x repeat-y no-repeat
background-attachment 背景附件 scroll(滚动)或 fixed(固定)
background-position 背景位置 横向的关键字(left center right),纵向的关键字(top center bottom)百分比和长度也可用作安排背景图像的位置
格式: background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>
应用多个图标放到同一个图片里
多个图标放到同一个图片里,通过定义某区块的背景定位,调用同一个图片中不同位置上的小图标,好处是可以减少对服务器的请求次数,从而加快页面的访问速度。
边框属性
任何一个元素都可以设置边框;边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写,可以一起设置四边的边框,也可以对上边框、右边框、下边框和左边框单独设置。
通过边框风格属性border-style设定上右下左边框的风格,该属性用于设置一个元素边框的样式,而且必须用于指定可见的边框。可以使用1到4个关键字,如果四个值都给出了,他们分别应用于上、右、下和左边框的式样;如果给出一个值,他将被运用到各边上;如果给两个或三个值,省略的值与对边相同;也可以分别使用border-top-style、border-right-style、border-bottom-style和border-left-style属性单独设置各边的风格。
各边的风格使用的属性值:
none:无边框 dotted:点线式边框
dashed:破折式边框 solid:直线式边框
double:双线式边框 groove:槽线式边框
ridge:脊线式边框 inset:内嵌效果边框 outset:突起效果边框
边框宽度属性:
可以通过边框宽度属性border-width设定上右下左边框的宽度,该属性用1到4个值来设置元素的边框,值是一个关键字或长度,不允许使用负值长度;如果只给一个值,它将被运用到各边上;如果给两个或三个值,省略的值与对边相同;如果给四个值,它们分别应用于上、右、下和左边框的式样;也可以分别使用border-top-width、border-right-width、border-bottom-width和border-left-width属性单独设置各边的宽度。除了可以使用长度单位定值外,还可以使用medium(是默认值)、thin(比medium细)或thick(比medium粗)
边框颜色设置:
可以通过边框颜色属性border-color设定上右下左边框的颜色,该属性用1到4个值来设置元素的边框颜色;如果只给一个值,它将被运用到各边上;如果给两个或三个值,省略的值与对边相同;如果给四个值,它们分别应用于上、右、下和左边框的式样
略写的边框属性:
CSS属性border是边框属性的一个快捷的综合写法,是一个用于设置一个元素边框的宽度、式样和颜色的略写,它包含border-width、border-style、border-color属性;边框属性border只能设置四种边框,也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值,网页制作者必须用一个或更多的属性,如:上边框、右边框、下边框、左边框、边框宽度、边框式样、边框颜色、上边框宽度、右边框宽度、下边框宽度和左边框宽度。
鼠标光标属性:
在网页中默认的鼠标指针只有两种,一种是最普通的箭头,另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术,当鼠标移动到链接上时,可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变,其属性可以是默认的鼠标形状default、小手形状pointer、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及各个方向的箭头属性值。
CSS中常见的控制列表的属性:
list-style-type 设定引导列表项的符号类型,可以设置多种符号类型,值为disc、circle、square等
list-style-image 使用图像作为定制列表符号
list-style-position 决定列表项目缩进的程度
<html>
<head> <title>列表属性</title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
</head>
<body>
<ul style="list-style-type:circle list-style-image:url(../picture/01.jpg)" >
<li>aaaaaaaaa</li
<li>bbbbbbbb</li>
<li>cccccccccc</li>
</ul>
</body>
</html>
四.DIV CSS标准化网页布局
DIV+CSS标准化布局的优势:使用“DIV+CSS”对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中,已经不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块,然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单的说,div用于搭建网站结构(框架)、css用于创建网站表现(样式/美化)。该标准简化了HTML页面代码,获得一个较优秀的网站结构,有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局,例如数据页面、报表之类的页面,还是使用HTML的表格会比较方便,web标准里并没有说要抛弃table。优点:表现和内容分离;代码简洁,提高页面浏览速度;易于维护和改版;提高搜索引擎对页面的索引效率
各个浏览器之间的差异:安装多种浏览器,对比差异进行调试;在FF浏览器中安装firebug(firebug为你的firefox集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的CSS、HTML和JavaScript进行实时编辑、调试和监控);就算在不同的浏览器中效果不完全一致,也要做到大概一致。
“无意义”的元素div和span
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式,所以当样式表失效时它就没有任何的作用
它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的,用在一小块的内联HTML中。而div(division)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码,为HTML 文档内大块的内容提供结构和背景的元素,可以包含段落、标题、表格甚至其他部分,这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由div标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。
盒子模型
每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。
![](https://images2015.cnblogs.com/blog/942838/201605/942838-20160523204844334-2103939094.jpg)
布局中的主要模式
font line-height color margin
padding border text-align background
•width:
•height
•float:
•clear
•display
定位属性:
position:用于定义一个元素是否absolute(绝对),relative(相对),static(静态),或者fixed(固定)
top:层距离顶点纵坐标的距离
left:层距离顶点横坐标的距离
width:层的宽度,可以用一个长度或“auto”值来指定其宽度,不允许使用负值
height:层的高度,可以用一个长度或“auto”值来指定其高度,不允许使用负值
z-index:决定层的先后顺序和覆盖关系,值高的元素会覆盖值比较低的元素
display:是一个显示属性,设定block值是以块状显示,在元素后面添加换行符,既其他元素不能在其后面并列显示。如果设定inline值则内联显示,在元素后面删除换行符,多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示
visibility:这个属性是针对嵌套层的设置,如果存在嵌套的层(子层)和被嵌套的层(父层)时,可以使用inherit值设置子层继承父层的可见性,如果父层可见,子层也可见。当使用visible值时,无论父层是否可见,子层都可见。而值为hidden时,无论父层是否可见,子层都隐藏
overflow:用于设置层内的内容超出层所能容纳的范围处理方式,为该属性设置visible值时,无论层的大小,内容都会显示出来。当设置hidden值时,会隐藏超出层大小的内容。当设置值为scroll时,不管内容是否超出层的范围,选中此项都会为层添加滚动条。而值使用auto值时,只在内容超出层的范围时才显示滚动条
<html>
<head><title>DIV+CSS网页设计</title>
<style>
#main{ width:300px;
height:200px;
border:solid 2px;
background-color:#ff0000;
position:absolute;
top:50%;
left:50%;
margin-top:-100px;
margin-left:-150px;
}
</style>
</head>
<body>
<div id="main">
aaaaaaaaaa
</div>
</body>
</html>
使用区块框设计页面布局