- 2
- 0
- 约4.7千字
- 约 12页
- 2017-06-07 发布于湖北
- 举报
昨日回顾
CSS,称为“层叠样式表”。
CSS就是给HTML标记来指定格式的。
CSS规则是由“选择器”和“格式语句”。
CSS选择器:就是去查找指定的HTML标记,然后给该标记加样式。
CSS格式语句:就是CSS的属性,CSS的属性有很多类别。如:尺寸、文本、背景、边框等。
CSS选择器——基本选择器(单个选择器)
通配符“*”:将匹配所有的HTML标记,只要body中存在的标记都会生效。
标签选择器:对应于HTML标记,有什么样的HTML标记,就有什么样的标签选择器。如:p{color:red;}
类选择器:给HTML标记中,class属性值相同的元素,添加样式。命名必须以“.”开头。如:.news{}
Id选择器:给HTML标记中,具有id属性的元素,添加样式。唯一性。命名以“#”开头。如:#news{}
CSS选择器——组合选择器(多个选择器)
多元素选择器:同时给多个元素添加样式,各个选择之间用逗号“,”分开。如:p,h1,#box{}
后代元素选择器:给某个元素的所有后代元素,添加样式。用空格隔开。如:#box h1{}
子元素选择器:给某个元素的子元素添加样式。用“”隔开。如:#box h1{}
CSS伪类选择器:给超链接加的样式(链接的不同状态加样式)
一个超链接,有四个状态:
正常状态(:link):鼠标没放上之前链接的样式。
放上状态(:hover):鼠标放到链接上时的样式。
激活状态(:active):按住鼠标左键不松开的样式,这个状态特殊短暂。
访问过的状态(:visited):按下鼠标左键,并弹起,这时的样式效果。
在平常工作中,会使用以下写法,来给链接加不同的样式:
a:link, a:visited{ color:#444; text-decoration:none; } //将“正常状态”和“访问过的状态”合二为一。
a:hover{ color:#990000; text-decoration:underline; } //“鼠标放上”单做一种效果
CSS列表属性
list-style:列表样式,取值:none。去掉项目符号或编号前面的各种符号。
CSS边框属性:每个元素都可以加边框线
border-left:左边框线。
格式:border-left:粗细 线型 线的颜色;
线型:none(无线)、solid(实线)、dashed(虚线)、dotted(点状线)
举例:border-left:5px dashed red;
border-right:右边框线。
border-top:上边框线。
border-bottom:下边框线。
border:同时给四个边加边框线。
CSS内边距属性:边框线到内容间的距离
注意:平常我们所说的width和height属性,它们指内容的宽度和高度,不含内、外边距、边框线。
padding-left:左内填充距离,左边线到内容间的距离。
padding-right:右内填充距离,右边线到内容间的距离。
padding-top:上内填充距离,上边线到内容间的距离。
padding-bottom:下内填充距离,下边线到内容间的距离。
缩写形式
padding:10px; //四个边的内填充分别为10px
padding:10px 20px; //上下为10px,左右为20px
padding:5px 10px 20px; //上为5px,左右为10px,下为20px
padding:5px 10px 15px 20px; //顺序一定是“上右下左”
CSS外边距属性:边线往外的距离
margin-left:左边线往外的距离。
margin-right:右边线往外的距离
margin-top:上边线往外的距离。
margin-bottom:下边线往外的距离。
简写式
margin:10px; //四个外边距分别为10px
margin:10px 20px //上下外边距10px,左右外边距20px
margin:5px 10px 15px; //上外边距5px,左右外边距10px,下外边距15px
margin:5px 10px 15px 20px; //顺序一定是“上右下左”
我们可以把网页中的每个元素,都看成是一个“盒子”。
“盒子”有哪些特征:内容的宽度或高度、边框线、内填充、外边距。
Firefox浏览器中,Firebug调试工具的安装使用
如果你的Firefox的版本高于30的话,请使用Firebug2.0及以上版本。
如果你的Firefox的版本低于30的话,请使用Firebug1.9、Firebug10.6
Firebug插件的位置:飞秋共享
如果安装Firebug插件
CSS背景属性
background-colo
原创力文档

文档评论(0)