CSS菜鸟学习小结

css

一、基本概念  
1、 选择符:就是HTML当中可用的任何元素,例如:body,a,td p..... 
2、 类: 就是我们自己给格式起的名字,应用的时候叫名字(class=类) 
3、 伪类:visited、 active 、link 等 

二、基本语法 

1、选择符 { 属性: 值 }

  例如: TD { FONT-SIZE: 9pt} 

2、选择符.类 { 属性: 值 }

  例如: td.aaa { color: #191970 } 

只能在该元素下有效 引用方法: <P CLASS=aaa> 

3、.类 { 属性: 值 }

   例如: .aaa { color: #191970 }

 任何元素都能用

例如: <p class=aaa  ... > </p>

   <a class=aaa  ... > </a> 

   <td class=aaa ... > </td> 
  
4、 选择符:伪类 { 属性: 值 }  例如:a:link {color:red}

5、 选择符.类:伪类 { 属性: 值 } 例如:a.bbb:link {color:blue}

引用方法: <a CLASS=aaa ...> </a> 

6、 .类:伪类 { 属性: 值 } 

例如: .mainnv:hover {COLOR: #ff0000} 
                                      
三、具体使用  
 
1、行内: 用选择符 { 属性: 值 }

例如: TD { FONT-SIZE: 9pt} 

2、文件头:方在<head> </head> 之间 例如: 

  <style type="text/css"> 

  <!--  

    A:link {text-decoration: none; color:#0072A8} //选择符:伪类 { 属性: 值 }

    A:visited {text-decoration: none; color: #0072A8} 

    A:active {text-decoration: none; color: #FF0000} 

    A:hover {text-decoration: underline; color: FF0000} 

    A.a1:active {COLOR: #ffffff} //选择符.类:伪类 { 属性: 值 }

    A.a1:link {COLOR: #ffffff} 

    A.a1:visited {COLOR: #ffffff} 

    A.a1:hover {COLOR: #faf108; TEXT-DECORATION: underline}

    body{font-size=9pt}   //选择符 { 属性: 值 } 
    H{FONT-SIZE: 9pt}      
    TD{ FONT-SIZE: 9pt}    

    --> 
    </STYLE> 

3、外连文件: 要求文件扩展名为 css,<head> </head> 加如下链接代码: 

 <LINK rel="stylesheet" href="first.css"  type="text/css">//first.css 是文件名 
    
  first.css 内容如下: 

  A:link { COLOR: #3a2a00; TEXT-DECORATION: none} //选择符:伪类{属性: 值 } 
  A:visited {COLOR: #602400; TEXT-DECORATION: none}// 用a元素的连接都是这种方式  
  A:active {COLOR: #ff6600; TEXT-DECORATION: none} 
  A:hover {COLOR: #ff3300; TEXT-DECORATION: underline} 

  A.hot:link {COLOR: #dd0000}// 选择符.类:伪类 { 属性: 值 } 
  A.hot:visited {COLOR: #dd0000}// 用a元素的而且指明类 class 用hot 的显示方式 
  A.hot:hover {COLOR: #ff0000}   // 引用方法 class=hot 
  A.hot:active {COLOR: #ff3300} 
       
  A.blk:link {COLOR: #000000}  // 选择符.类:伪类 { 属性: 值 } 
  A.blk:visited {COLOR: #000000}// 用a元素的而且指明类 class 用blk 的显示方式 
  A.blk:hover {COLOR: #000000} 

.mainnv{FONT-SIZE: 12px;FONT-WEIGHT:bold}// .类 { 属性: 值 } 指明类用mainnv的显示 
.mainnv:link {COLOR: #cccc99}                          
.mainnv:visited {COLOR: #cccc99} // .类:伪类 { 属性: 值 }   
.mainnv:active {COLOR: #cccc99} // 所有指明类用mainnv 的连接效果用这种方式显示 
.mainnv:hover {COLOR: #ff0000; TEXT-DECORATION: none} 

.main1 {BACKGROUND: #cccc99}              //.类 { 属性: 值 } 
.main1t {COLOR: #cccc99}     // 所有指明类用main1t的都用这种方式显示 
.main2 {BACKGROUND: #c5c5b2} 
.main3 {BACKGROUND: #e6e0b2} 

  五、控制优先级:

  优先级: 1、行内插入式   2、头部方式    3、外连文件方式 

--------------------------------------------------------------- 

我想问一下,要在一个页面同时实现两个效果,就是说onmouseover时,字体有的显示为黑色,有的显示为白色,请问大侠,用Css该怎么定义呢?谢了! 
--------------------------------------------------------------- 

南山居士, 
用类咯! 
2、 类: 就是我们自己给格式起的名字,应用的时候叫名字(class=类) 
 
比如说:a.black:hover{COLOR: #000000}  
a.white:hover{COLOR: #ffffff} 
<a class=black>这里显示黑色</a> 
<a class=white>这里显示白色</a> 
具体的蚊子已经说过了, 
自己看看咯 
--------------------------------------------------------------- 

补充几个很重要的CSS用法: 
1. 
div#divID {color: #ff0000} 

<div id=divID>div1</div> 
<div>div2</div> 

2. 
div#divID table td{color: #FF0000} 

<div id=divID><table><tr><td>table1</td></tr></table></div> 
<div><table><tr><td>table2</td></tr></table></div> 

对CSS的样式不一定只用 class=CSSName 引用, 其实这两种定义才更能体现出CSS的妙处. 
注意:用 div#divID 对某个ID赋样式时应该确保网页里这个ID是唯一的.否则会出错

时间: 2024-10-31 02:22:10

CSS菜鸟学习小结的相关文章

JavaScript学习小结之被嫌弃的eval函数和with语句实例详解_javascript技巧

前面的话 eval和with经常被嫌弃,好像它们的存在就是错误.在CSS中,表格被嫌弃,在网页中只是用表格来展示数据,而不是做布局,都可能被斥为不规范,矫枉过正.那关于eval和with到底是什么情况呢?本文将详细介绍eval()函数和with语句 eval 定义 eval()是一个全局函数,javascript通过eval()来解释运行由javascript源代码组成的字符串 var result = eval('3+2'); console.log(result,typeof result)

node.js操作mongodb学习小结

  node.js操作mongodb学习小结          这篇文章主要介绍了node.js操作mongodb学习小结,本文给出了mongodb创建数据库.插入数据以及连接mongodb数据库并查询数据等代码实例,需要的朋友可以参考下 一.准备工作 1.在mongodb创建将要读取的表 创建数据库mongotest 代码如下: use mongotest; 向user表中插入数据 代码如下: db.user.insert({ name:'flyoung', age:'18', sex:tru

python 正则表达式学习小结

在Python中实现正则的方式是通过re(regular expression的缩写)模块来实现的,你可以调用re模块的各种方法来实现不同的功能,下面我们就来说下,在Python中通过re模块可以调用那些方法,以及这些方法的作用都是什么:还有就是正则的实例以及各种特殊符号的含义: 1.re.sub和replace: sub的全拼是substitute,也就是替换的意思:既然知道是替换了,那就很容易用到实例中了,其实replace也是替换的意思,只不过它们的用法不太相同,下面用一个例子来详细说明下

python 正则表达式学习小结_正则表达式

在Python中实现正则的方式是通过re(regular expression的缩写)模块来实现的,你可以调用re模块的各种方法来实现不同的功能,下面我们就来说下,在Python中通过re模块可以调用那些方法,以及这些方法的作用都是什么:还有就是正则的实例以及各种特殊符号的含义: 1.re.sub和replace: sub的全拼是substitute,也就是替换的意思:既然知道是替换了,那就很容易用到实例中了,其实replace也是替换的意思,只不过它们的用法不太相同,下面用一个例子来详细说明下

点滴的积累---J2SE学习小结

点滴的积累---J2SE学习小结         什么是J2SE         J2SE就是Java2的标准版,主要用于桌面应用软件的编程:包含那些构成Java语言核心的类.比如:数据库连接.接口定义.输入/输出.网络编程.         学习感受         近半个月的坎坷,总算是将马士兵的<J2SE教程>视频看完了,期间一些其他的事一些不得不处理的事总是打断我的安排.看了视频之后觉得东西确实都很基础给我印象最深的是关于程序运行的内存分析.IO和线程,这谁在之前无论是学习VB.VB.

Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中]

原文:Asp.Net Web API 2 官网菜鸟学习系列导航[持续更新中] 前言 本来一直参见于微软官网进行学习的, 官网网址http://www.asp.net/web-api.出于自己想锻炼一下学习阅读英文文章的目的,又可以学习下微软新发布的技术,其实也很久了,但自己菜鸟一枚,对自己来说都是新技术了.鉴于以上两个原因,本人打算借助google翻译和有道词典,来翻译学习这个系列,并通过博客园来记录自己的翻译学习过程.由于自己阅读水平的确太菜,在借助工具的情况下,有时候搞出来的也是蹩脚的语句,

每天一篇javascript学习小结(RegExp对象)_javascript技巧

1.正则表达式test方法 var text = "cat, bat, sat, fat"; var pattern = /.at/; if (pattern.test(text)){ alert("The pattern was matched."); } 2.正则的toString()方法 var pattern = new RegExp("\\[bc\\]at", "gi"); alert(pattern.toStrin

JavaScript事件学习小结(三)js事件对象_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www

JavaScript事件学习小结(二)js事件处理程序_javascript技巧

相关阅读: JavaScript事件学习小结(五)js中事件类型之鼠标事件 http://www.jb51.net/article/86259.htm JavaScript事件学习小结(一)事件流 http://www.jb51.net/article/86261.htm javaScript事件学习小结(四)event的公共成员(属性和方法) http://www.jb51.net/article/86262.htm JavaScript事件学习小结(二)js事件处理程序 http://www