`
lxzjsj
  • 浏览: 35027 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css定义几种格式

阅读更多

定义css几种格式
1.类型选择符,直接使用元素名称定义
   html{/*<定义网页结构总体样式>*/}
   body{/*<定义页面属性>*/}
    div{/*<定义div元素的属性>*/}
   span{/*<定义span元素的属性>*/}

2. id选择符

       #top{

                {/*<定义id为top元素的文本颜色为red>*/

                 color:red;

               }

       #top div{/*<定义id为top的所有子div元素样式,但不包含id为top的样式>*/}

       #top .child1{/*<子级样式一>*/}
       #top .child2{/*<子级样式二>*/}
      <div id="top">我是div</div>

3. class 选择符

          这个就不说了

4. 分组选择符

       h1,h2,h3,h4,h5,h6,p{/*<定义所有级别的标题和段落行高都为字体大小的1.6倍>*

                                           line-height:1.6em;

                                       /}

       .class1,class2{{/*<所有这些class类型样式>*/}

5. 包含选择符

    .div1 h2 p span{/*多层包含选择符*/

                                  font-size:18px;

                            }

6.  元素指定选择符

       span.red{/*定义div元素中class为red元素的颜色为红色*/

                color:red;

             }

    span#top{/*定义div元素中id为top元素的颜色为红色宽度为百分之百*/

                width:100%;

             }

7. 子对象选择符

      #main > table{/*定义id为main的主体模块中子对象table的样式*/}

      #main > .title{/*定义id为main的主体模块中子对象class为title的样式*/}

 

以上是定义css格式的语法格式,但是不同格式也让样式具有优先级,简单说下优先级顺序:

    id选择符 >  class选择符 > 类型选择符

分享到:
评论

相关推荐

    用CSS定义标题的几个实例

    在这个主题“用CSS定义标题的几个实例”中,我们将深入探讨如何使用CSS来美化和定制HTML文档中的标题。通过以下实例,我们将了解到CSS在标题样式化方面的多样性和灵活性。 1. **基本样式定义** CSS允许我们直接对...

    CSS定义的分类与注释

    **CSS定义的分类** 在网页设计中,CSS(Cascading Style Sheets)是用于控制页面样式和布局的重要工具。CSS的定义主要分为以下几类: 1. **内联样式(Inline Styles)**:这是最直接的CSS应用方式,通过在HTML元素...

    DIV+CSS的几种标准网页模板

    在网页设计领域,DIV+CSS是一种广泛采用的技术,用于构建高效、可维护的网页布局。这个压缩包文件“CSS+DIV模板”包含了多种常见的网页模板,如相册、清新风格、简洁风格、游戏主题、星座主题、网上超市以及博客模板...

    关于CSS的几种经典布局

    标题中的“关于CSS的几种经典布局”指的是在Web开发中,使用CSS来创建常见的、高效且灵活的页面布局方法。CSS(层叠样式表)是用于控制网页元素样式的重要工具,能够实现各种复杂的布局设计。以下是一些CSS的经典...

    使用CSS格式化网页

    CSS可以通过以下几种方式应用于HTML页面: 1. **直接定义标记的style属性**:在HTML标记内直接写入CSS样式,如`;"&gt;`。 2. **定义内部样式表**:在HTML文档的`&lt;head&gt;`标签内使用`&lt;style&gt;`标签定义样式。 3. **链接...

    css背景渐变几种样式

    CSS 渐变(Gradients)是网页设计中一种常见的视觉效果,可以为元素添加平滑的颜色过渡。在本文中,我们将探讨如何使用CSS实现不同方向的背景渐变,包括从上到下、从左上到右下以及从左到右等。 1. **从上到下渐变*...

    CSS中几种常见的注释

    CSS 中几种常见的注释 在 CSS 中,注释是一种非常重要的技巧,它可以帮助开发者在代码中添加备注、隐藏代码或调试代码。今天,我们将介绍几种常见的 CSS 注释方式,它们可以帮助你在不同浏览器中隐藏或显示代码。 ...

    几种气泡按钮样式CSS3

    5. **悬停和活性状态**:CSS3的`:hover`和`:active`伪类可以分别定义鼠标悬停和按下按钮时的样式,提供反馈。例如,改变背景色或增加透明度,使按钮在不同状态下有不同的视觉反馈。 6. **动画效果**:利用`@...

    Table常用的几种CSS样式

    以下是对"Table常用的几种CSS样式"的详细阐述。 1. **边框样式**: - `border-collapse`: 控制表格边框是否合并。`collapse`将合并相邻单元格的边框,`separate`则保持边框独立。 - `border-spacing`: 设置或获取...

    门户网站构建CSS框架的几种规则

    根据这一分析,我们可以将CSS样式表大致划分为以下几个类别: - **主体样式表**:`sjweb.css`作为所有样式表的入口,用来导入其他样式表。 - **字体样式表**:`font.css`包含所有关于字体、字号和颜色的设置。 - **...

    CSS经验几则.rar

    在网页设计领域,CSS(Cascading Style Sheets)扮演着至关重要的角色,它负责定义HTML或XML(包括SVG、XHTML等)文档的呈现样式。本压缩包“CSS经验几则.rar”似乎是一份关于CSS实用技巧和经验的集合,旨在帮助网页...

    二十几种常见css模版

    "二十几种常见CSS模板"是一个集合,包含了多种常用的设计模式,用于快速构建和美化网页。以下是一些关键的CSS知识点,这些知识点可能在这些模板中体现: 1. **选择器**:CSS选择器是用于定位HTML元素的关键部分。...

    几款不错的css特效

    在网页设计领域,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档呈现样式的语言。CSS特效是指利用CSS的特定属性和技巧,为网页元素添加视觉上的吸引力和交互性。以下将...

    css手册 css帮助字典 css帮手

    在CSS 2.0中,有以下几种选择器: - 类选择器(.class):通过类名来选中元素。 - ID选择器 (#id):通过元素的唯一ID来选中元素。 - 标签选择器 (tagname):根据元素的标签名选中元素。 - 属性选择器:根据元素...

    最新简单 几种常见的CSS阴影效果代码

    `几种常见的CSS阴影效果代码.zip`文件可能包含了一系列预设的阴影样式,供开发者快速应用到自己的项目中。通过查看`说明.txt`文件,可以了解如何使用这些代码片段。 总的来说,熟练掌握CSS阴影效果对于提升网页设计...

    csl_css_宏定义_解析

    在深入探讨《csl_css_宏定义_解析》这一主题之前,我们首先应当明确几个关键概念:宏定义、结构体以及它们在特定上下文中(如本例中的EDMA配置)的作用与意义。本文将详细解析《csl_css_宏定义_解析》,重点解读其在...

    CSS样式初始化commonInitialize.css

    在"commonInitialize.css"中,通常会包含以下几类初始化内容: 1. **重置默认样式**:这一步是为了消除浏览器之间的样式差异,如设置`*{margin:0;padding:0;}`,这将清空所有元素的内外边距,确保元素布局的一致性...

    jQuery和CSS3全屏整页切换过渡动画特效

    在网页设计领域,jQuery和CSS3是两种非常重要的技术,它们常常被用来创建吸引人的交互效果和动画。本文将深入探讨如何使用jQuery和CSS3来实现全屏整页的切换过渡动画特效,以及这两个技术各自的特点和优势。 首先,...

    CSS速查手册(CHM格式).rar

    《CSS速查手册》是一本全面且实用的参考资料,它以CHM(Compiled Help Manual)格式存储,这种格式是微软开发的帮助文档格式,通常用于软件的在线帮助系统。CHM文件将HTML页面、图像和其他资源打包在一起,方便用户...

    几款漂亮的css代码

    创建炫酷的导航条,我们可以通过以下几种方式来增强其视觉效果: 1. **响应式设计**:确保导航条在不同屏幕尺寸下都能正常工作。可以使用媒体查询(`@media`)来实现布局的自适应。 ```css @media screen and (max...

Global site tag (gtag.js) - Google Analytics