`
hai_lei
  • 浏览: 3034 次
  • 性别: Icon_minigender_2
  • 来自: 大连
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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是唯一的.否则会出错


 

分享到:
评论

相关推荐

    CSS学习总结

    ### CSS学习总结 #### 一、CSS选择器与样式应用 **1. 行内样式** 行内样式是在HTML元素内部直接使用`style`属性来指定样式规则的方式。这种方式适用于临时性的样式修改,但不利于代码的维护和复用。 **示例**: ...

    CSS学习总结思维导图.xmind

    css学习总结思维导图

    html与css学习总结

    html与css学习总结

    CSS学习总结.docx

    【CSS学习总结】 CSS,全称Cascading Style Sheets,中文称为层叠样式表,是一种用于定义HTML或XML(包括SVG、XHTML等)文档样式的样式表语言。它的主要功能是让网页的设计更加美观,能够精准控制网页的布局、颜色...

    HTML-CSS学习总结

    ### HTML-CSS学习总结 在前端开发领域,HTML与CSS是构建网页不可或缺的两大基石。HTML(HyperText Markup Language)负责网页结构的搭建,而CSS(Cascading Style Sheets)则用于网页样式的定义。本次总结主要围绕...

    全网最详细 css 学习总结思维导图,适合学习以及复习css知识点

    css 学习总结思维导图,适合学习以及复习css知识点

    div+css学习总结.doc

    DIV+CSS 学习总结 DIV+CSS 是一对强大的前端开发组合, DIV responsible for structuring content on the web page, while CSS is responsible for styling and layout. In this summary, we will cover the ...

    CSS实战学习总结,很不错的

    ### CSS实战学习总结 在《CSS实战学习总结》这一篇深度文档中,作者辛磊针对CSS的实际应用进行了全面而深入的解析,旨在帮助读者掌握CSS的核心技能,提升网页设计与开发的能力。以下是对该文档中关键知识点的提炼与...

    不同浏览器 不同css学习总结

    css的颜色,在ie和ff中是不同的,一个是16进制的数字一个是二进制的数字组合,这仅仅是一点点的不同,那么如何兼容各个浏览器,写出比较好的浏览器呢。这个小小的总结应该可以给你一些提示,不是很全面,但是还算...

    CSS 学习总结.docx

    CSS具有继承性,子元素可以继承父元素的一些样式,但某些属性如`font-size`和`color`可以继承,而`display`或`position`则不会。 CSS的选择器有多种类型: 1. **通用选择器(*)**:匹配任何元素,常用于设置默认...

    CSS小结有关整体

    这是一篇关于前端页面的介绍,开放学习,望大家多多看看、 哈哈

    前端三件套之一:css学习总结思维导图

    个人总结,希望能有所帮助

    web应用基础CSS学习总结.md

    所有

    学习css及html中主要内容的总结。希望对初学则有帮助

    掌握这些基础知识后,初学者可以进一步学习盒模型、响应式设计、浮动和定位、Flexbox 和 Grid 布局等高级主题,以提升创建美观、功能完善的网页的能力。在实践中不断练习,将理论知识转化为实际技能,是成为熟练的...

    CSS样式的基础学习总结

    【CSS样式的基础学习总结】 CSS,全称Cascading Style Sheets,中文译为级联样式表,是一种用于描述HTML或XML文档(包括如SVG、MathML等各种XML方言)外观和格式的语言。它允许我们将样式信息与结构化内容分离,...

    CSS学习,css经验总结

    **CSS简介** CSS,全称为层叠样式表(Cascading Style Sheets),是用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。它的出现是为了弥补HTML在页面布局和设计方面的不足,将内容与表现...

    Html与Css学习笔记以及经验总结

    这篇学习笔记和经验总结将深入探讨这两者的核心概念,帮助初学者快速掌握这两门技术。 首先,HTML是用于创建网页内容的标记语言。它由一系列元素组成,这些元素通过标签表示,比如`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等。...

    个人css学习笔记 精华版

    个人css学习笔记 精华版 CSS学习笔记中涵盖了CSS的基本概念、分类、基本语法、常用属性等知识点。下面将对这些知识点进行详细的解释和总结。 什么是CSS? CSS(Cascading Style Sheet)是一种样式表语言,用于...

Global site tag (gtag.js) - Google Analytics