`
leshor
  • 浏览: 18710 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS学习(三)

 
阅读更多
       类选择器:以点号开头,针对所有拥有某一类的元素。
         /*所有拥有center类的元素均居中*/
         .center {text-align:center; }
        <p class="center">居中显示</p>
        <h1 class="center">居中显示</h1>

        类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
        和 id 一样,class 也可被用作派生选择器.
         .center p {
                     text-align:center;
                   }
        元素也可以基于它们的类而被选择.
         p .center {
                     text-align:center;
                    }

         属性选择器:对带有指定属性的HTML元素指定样式。
           /*带有title属性的所有元素设置为红色*/
         [title] {
                   color:red;
                  }
         /*title属性值="abc"的所有元素设置为红色*/
         [title=abc] {
                      color:red;
                     }
          /*包含指定值的title属性的所有元素设置为红色,适用于由空格分隔的属性值*/
         [title~=abc] {
                      color:red;
                      }
          /*带有包含指定值的 lang 属性的所有元素设置为红色,适用于由连字符分隔的属性值*/
         [lang|=en] {
                    color:red;
                    }

         插入样式表的三种方法
         外部样式图:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。
            <head>
                 <link rel="stylesheet" type="text/css" rel="fileName.css" />
          </head>

         内部样式图:当单个文档需要特殊的样式时,就应该使用内部样式表。可以使用 <style> 标签在文档头部定义内部样式表。
            <head>
                 <style type="text/css">
                   p {color:red; font-size:10px}
                 </style>
          <head>

          内联样式:要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
            <p style="color: sienna; margin-left: 20px">
            This is a paragraph
          </p>

          如果某些属性在不同的样式表中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

           注:大部分内容均参考copy自http://www.w3school.com.cn/css/index.asp

分享到:
评论

相关推荐

    css样式工具 css学习工具

    三、CSS学习资源 1. MDN Web Docs:权威的Web开发教程,包含详尽的CSS参考和教程。 2. W3School:提供在线教程和交互式练习,适合初学者。 3. CodePen:一个在线的前端开发社区,可以查看和分享CSS代码片段。 4. CSS...

    精通CSS 第三版

    《精通CSS 第三版》是一本专为想要深入理解CSS技术的读者精心编写的书籍。CSS,即层叠样式表(Cascading Style Sheets),是网页设计中的核心技术,用于控制网页元素的布局、颜色、字体等视觉表现。本书作为第三版,...

    css学习手册

    《CSS学习手册》 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予了HTML或XML文档以样式和布局。本手册旨在深入解析CSS的相关知识,帮助初学者快速上手并掌握其核心概念。 一、CSS基础 ...

    CSS学习资料,初级

    本资源包“CSS学习资料,初级”专为初学者设计,旨在提供一个易于理解的学习平台,帮助初学者快速掌握CSS的基础知识。 **一、CSS简介** CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如...

    css学习大全(包括css生成器,各种经典样式,css学习文档)

    这个压缩包文件看起来是一个全面的CSS学习资源集合,包含了CSS生成器、各种经典的CSS样式示例以及CSS的学习文档。接下来,我们将深入探讨这些知识点。 首先,CSS生成器是一个在线工具,它允许用户通过图形用户界面...

    CSS电子书 CSS电子书 三合一

    《CSS电子书 CSS电子书 三合一》是一份集大成的CSS学习资源,适合初学者和有一定基础的开发者深入理解和提升CSS技能。这个压缩包包含的文件名为“css”,很可能是一个包含多个CSS相关文档或者电子书籍的文件,可能是...

    DIV+CSS学习文档

    【DIV+CSS学习文档】 网页设计与开发领域中,`DIV+CSS`是一种常见的布局技术,它极大地提升了网页的可维护性和效率。本学习文档旨在深入解析`DIV+CSS`的核心概念,帮助初学者理解并掌握这一技术。 一、什么是DIV?...

    css经典学习笔记.zip

    综上所述,《CSS经典学习笔记》旨在提供一个全面的CSS学习路径,无论你是初学者还是有经验的开发者,都能从中受益,提升你的CSS技能和网页设计能力。通过深入实践和不断探索,你会发现CSS不仅可以打造出美观的界面,...

    DIV+css学习 精通CSS实例

    本教程“DIV+CSS学习 精通CSS实例”旨在帮助初学者掌握这一关键技术,通过20个精心设计的实例,深入浅出地讲解了CSS的布局原理和实际应用。 首先,我们要理解什么是CSS。CSS(Cascading Style Sheets)层叠样式表,...

    CSS学习手册

    **CSS学习手册** 在网页设计领域,层叠样式表(Cascading Style Sheets,简称CSS)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,让网页内容更加丰富多彩且易于维护。作为史上最全的CSS学习手册,我们将深入...

    个人css学习笔记 精华版

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

    CSS学习资料

    《CSS学习资料》 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它赋予HTML或XML文档以视觉样式,使网页呈现出丰富多彩、布局精致的效果。本资料主要聚焦于“DIV+CSS”布局技术,这是一种广泛...

    轻松学习CSS.doc

    CSS分为三种类型: 1. **内嵌样式(Inline Style)**:直接在HTML元素中使用`style`属性定义样式,如`; color:red"&gt;`,仅对该元素生效。 2. **内部样式表(Internal Style Sheet)**:将CSS代码放在HTML文件的`&lt;head&gt;`...

    css教程、学习文档、参考资料

    综上所述,"css学习文档.pdf"这份资料可能会涵盖以上提到的各个方面,帮助读者深入理解CSS,提升前端开发技能。无论你是初入前端的新人,还是想要深化CSS知识的开发者,都应该仔细研读这份文档,掌握CSS的核心概念和...

    css学习文档资料

    【CSS学习文档资料】 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于控制网页的样式和布局。本学习资料主要聚焦于CSS的基础知识、进阶技巧以及实际应用,帮助你深入理解和掌握这一技术...

    css3学习与例子

    **CSS3学习与实例解析** CSS3是层叠样式表(Cascading Style Sheets)的最新版本,相较于CSS2,它引入了许多新的特性和功能,极大地丰富了网页设计的视觉表现力。本教程将深入探讨CSS3的基础部分、关键布局、阴影...

    前端三件套css学习笔记分享

    前端三件套css学习笔记分享

    CSS基础学习视频 百度网盘下载

    【CSS基础学习】 在网页设计领域,CSS(Cascading Style Sheets)是不可或缺的一部分,它用于控制网页的布局和外观。本视频教程是针对初学者设计的,旨在帮助新手快速掌握CSS的基本概念和实际应用。 一、CSS简介 ...

    很好的css学习笔记,pdf格式(64页)

    ### CSS+DIV 学习笔记知识点总结 #### 一、CSS 概述 - **CSS 定义**:层叠样式表(Cascading Style Sheets, CSS)是一种用于定义网页表现形式的语言,它使得开发者能够独立地管理和控制文档的内容与样式。 - **CSS...

Global site tag (gtag.js) - Google Analytics