css基础精解和实例分析_成都软件开发公司

css基础精解和实例分析

作者：zhaozj
发表时间：2020-12-23 10:58
来源：未知

css就是cascading style sheets层叠样式表　　一、基本语法　　1、选择符　　selector {proper: value} 　　选择符 {属性：值} 　　如：body {color: black} 　　（body页面主体部分，color控制的文字颜色属性，black属性的值，此例的效果是页面文字为黑色。）　　　　如果属性的值由多个单词组成，必须加引号，如　　p {font-family: “sans serif“} 　　　　如果一个选择符指定多个属性时，用分号分开，如　　p {text-align: center; color: black} 　　为了便于阅读，分行书写　　p {text-align: center; 　　 color: black; 　　 font-family: arial} 　　（段落居中排列，段落中文字为黑色，字体为arial）　　　　2、选择符组　　把相同属性和值的选择符组合起来，用逗号分开，如　　h1,h2,h3,h4,h5,h6 {color: green} 　　（以上所有标题的颜色为绿色）　　p,table {font-size: 9pt} 　　（段落和表格了的文字尺寸为9号字）　　等价于p {font-size: 9pt} 　　 table {font-size: 9pt} 　　　　3、类选择符　　如你想要两个不同的段落，一个向右对齐，一个居中，你可以先定义两个类　　p.right {text-align: right} 　　p.center {text-align: center} 　　然后用在不同的段落里，只要在HTML标记里加入你定义的class参数：　　<p class=“right“>段落向右对齐</p> 　　<p class=“center“>段落居中对齐</p> 　　类的名称可以为任何英文单词或英文开头与数字的组合　　　　类选择符的另一个用法是在选择符中省略html标记名，这样可以把几个不同的元素定义成相同的样式：　　.center {text-align: center}（定义.center为文字居中排列）　　这样的类可以应用到任何元素，如：　　<h1 class=“center“>这个标题居中排列</h1> 　　<p class=“center“>这个段落居中排列</p> 　　　　4、ID选择符　　定义ID选择符要在ID名称前加一“#”号，黑类选择符一样也有两个方法。　　下面的例子只匹配id=“intro“的段落元素：　　p#intro 　　{ 　　font-size: 100%; 　　font-weight: bold; 　　color: #0000ff 　　background-color: transparent 　　} 　　（该段落的字体尺寸为默认尺寸的110%；粗体；兰色，背景颜色透明）　　下面的例子，id属性匹配所有的id=“intro“的元素：　　#intro 　　{ 　　font-size: 100%; 　　font-weight: bold; 　　color: #0000ff 　　background-color: transparent 　　} 　　　　5、包含选择符　　可以对某元素包含关系定义，元素1包含元素2，这种方式对元素1里的元素2定义，对元素1或元素2没有定义，如：　　table a 　　{ 　　font-size: 12px 　　} 　　在表格内的链接文字为12像素，而表格外的链接文字仍为默认大小。　　　　6、样式表的层跌性　　层跌性就是继承性，例如在div标记中嵌套p标记：　　div {color: red; font-size:9pt} 　　... 　　<div> 　　<p> 　　这个段落的文字为红色9号字　　</p> 　　</div> 　　（p元素的内容继承div定义的属性）　　当样式表的继承有冲突时，以最后定义的为准，如：　　div {color: red; font-size:9pt} 　　p {color: blue} 　　... 　　<div> 　　<p> 　　这个段落的文字为蓝色9号字　　</p> 　　段落里的文字继承了div属性，而color属性依照最后的定义。　　　　优先级!important > id选择符 > 类选择符 > 选择符，如：　　p. {color: #FF0000 !important} 　　.blue {color: #0000FF} 　　#id1 {color: #FFFF00} 　　我们同时对一个段落加上这个3个样式，它最后会依照!important申明为红色文字，如果去掉!important则依照优先权id选择符为黄色文字。　　　　7、注释　　注释便于阅读，不会在浏览器中显示，如　　/* 定义段落样式 */ 　　p 　　{ 　　text-align: center; /* 文本居中排列 */ 　　color: black /* 文字为黑色 */ 　　font-family: /*字体为arial */ 　　} 　　　　二、伪类——动态链接　　1、语法　　selector:pseudo-class {property: value} 　　选择符：伪类{属性：值} 　　　　类选择符及其他选择符可以和伪类混用　　selector.class:pseudo-class {property: value} 　　选择符.类：伪类{属性：值} 　　　　2、锚的伪类　　最常用的4中a(锚)元素的伪类　　a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */ 　　a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */ 　　a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */ 　　a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */ 　　上面的例子中，这个链接位访问为红色无下划线，访问时为绿色无下划线，激活时为蓝色有下划线，鼠标在链接上时为紫色有下划线。　　　　3、伪类和类选择符的组合　　我们定义一组连接为红色，访问后为兰色，另一组为绿色，访问后为黄色　　a.red:link {color: #FF0000} 　　a.red:visited {color: #0000FF} 　　a.blue:link {color: #00FF00} 　　a.blue:visited {color: #FF0000} 　　应用　　<a class=“red“ href=“...“>第一组连接</a> 　　<a class=“blue“ href=“...“>第二组连接</a> 　　　　4、其他伪类　　首字和首行（frist-letter和frist-line），ie5.5以上支持。　　<style type=“text/css“> 　　p:frist-letter {font-size: 300%} 　　</style> 　　... 　　<p> 　　这个段落的首字为默认的300% 　　</p> 　　--------------- 　　<style type=“text/css“> 　　div:first-line {color: red} 　　</style> 　　... 　　<div> 　　<p> 　　这个段落第一行　　第二行　　第三行　　</p> 　　</div> 　　（段落第一行为红色，第2，3行为默认颜色）　　　　三、如何在网页中插入css 　　1、链入外部样式表，如　　<head> 　　... 　　<link rel=“stylesheet“ type=“text/cs“ href=“mystyle.css“> 　　... 　　</head> 　　表示从mystyle.css文件中读出定义的样式表，rel=“stylesheet“ 指页面中使用的是外部样式表，type=“text/cs“指文件的类型为样式表文本　　　　。 href=“mystyle.css“是文件所在的位置。一个外部样式表可以应用多个页面，样式表文件可以用记事本编辑，扩展名为css。　　　　2、内部样式表　　<head> 　　<style type=“text/css“> 　　 　　</style> 　　</head> 　　　　3、导入外部样式表　　<head> 　　<style type=“text/css“> 　　 　　</style> 　　</head> 　　导入外部样式表必须在其他内部样式表的上面　　　　4、内嵌样式　　<p style=“color: sienna; margin-left:20px“> 　　... 　　</p> 　　这个段落颜色为土黄，左边距为20像素　　　　5、多重样式表叠加　　优先级　　内嵌样式〉内部样式（链入外部样式表，二者按最后定义确定优先级〉导入外部样式表　　　　四，实例分析　　1、某index.css源码分析　　<style type=“text/css“> 　　 　　</style> 　　　　2、某style.css源码分析　　A 　　{ 　　TEXT-DECORATION: none; 　　} 　　A:hover 　　{ 　　COLOR: #0099FF; 　　} 　　A:link { 　　color: #205064; 　　} 　　A:visited { 　　color: #006699; 　　} 　　/* 定义4个常用锚 */ 　　BODY 　　{ 　　FONT-FAMILY: 宋体; 　　FONT-SIZE: 9pt; 　　text-decoration: none; 　　line-height: 150%; 　　background-color: #FBFDFF; 　　} 　　TD 　　{ 　　FONT-FAMILY:宋体; 　　FONT-SIZE: 9pt; 　　} 　　Input 　　{ 　　FONT-SIZE: 9pt; 　　HEIGHT: 20px; 　　} 　　/* 定义输入框 */ 　　Button 　　{ 　　FONT-SIZE: 9pt; 　　HEIGHT: 20px; 　　} 　　/* 定义按钮 */ 　　Select 　　{ 　　FONT-SIZE: 9pt; 　　HEIGHT: 20px; 　　} 　　/* 定义选择框 */ 　　.border 　　{ 　　border: 1px solid #CCCCCC; 　　} 　　/* 定义边界类 */ 　　.border2 　　{ 　　background:#fef8ed; 　　BORDER-RIGHT: #999999 1px solid; 　　BORDER-LEFT: #999999 1px solid 　　} 　　.title 　　{ 　　 background:#f6f6f6; 　　　　} 　　/* 定义标题类 */ 　　.title_left 　　{ 　　background:url(images/left_bg.gif); 　　} 　　.title_right 　　{ 　　background:url(images/right_bg.gif); 　　} 　　/* 定义标题类的背景图片 */ 　　.title_main 　　{ 　　background:url(Images/jiaodian_bg.gif); 　　} 　　.tdbg{ 　　background:#FFFFFF; 　　line-height: 120%; 　　} 　　/* 定义td标记类的 */ 　　.tdbg_left{ 　　background:#fef8ed; 　　line-height: 150%; 　　} 　　.tdbg_right{ 　　background:#EAF1FB; 　　line-height: 150%; 　　} 　　.tdbg_main{ 　　background:#ffffff; 　　line-height: 150%; 　　} 　　.topborder 　　{ 　　border-right: 1px solid #6687BA; 　　border-left: 1px solid #6687BA; 　　border-bottom: 1px solid #6595D6; 　　width: 760px; 　　} 　　.nav_top 　　{ 　　background-image: url(Skin/1/topbg.gif); 　　} 　　.nav_bottom 　　{ 　　background-image: url(Skin/1/bottombg.gif); 　　} 　　.nav_menu 　　{ 　　background:url(Skin/1/topBar_bg.gif); 　　} 　　.menu 　　{ 　　background-color: #F0F9FF; 　　width:97%; 　　border: 1px; 　　} 　　/* 定义菜单类 */ 　　td.MenuBody 　　{ 　　background-color: #F0F9FF; 　　} 　　这个其实大都是他根据自己具体情况定义的类选择符，注释倒成了画蛇添足，如果要更改某一种样式可以根据他定义的类选择符到标记中更改　　　　相关的类选择符的属性值。　　<!-- 　　青风剑客制作整理，保留所有权利。　　原创新动力网 http://www.jalihh.com 　　e-mail:jalihh@21cn.com 　　--〉　　　　这个是我根据以前的笔记一个字一个字敲的，不可谓不经典，希望对大家有点帮助，如果你掌握了这些知识，别人的ccs文件大都能被你看穿和利用：）　　再结合苏沈小雨的css中文手册，css就没有什么了。我上传了供大家下载，地址： http://www.jagl.com.cn/soft/css2.0.chm 这个我常用的一个很好的编辑器TopStyle Lite2.10,附带了几个不错英文注释的css例子。　　我上传了供大家下载，地址： http://www.jagl.com.cn/soft/TopStyle2.rar