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

CSS简单笔记

阅读更多

一、加入样式表到HTML文档
1、内联样式
<p style="color: #F00">
2、内嵌样式
<style type="text/css">p {color: #F00;}</style>
3、外部样式
<link rel="stylesheet"type="text/ css" href="external.css"/>
4、样式表适用的环境
所有流行的浏览器都支持最普通的media属性。该属性可以应用到<link>元素中来确定样式表适用的环境。比如:
<link rel="stylesheet" media="handheld" type="text/ css" href="external.css"/>
说明样式表适用于手持设备。media支持的属性值有screen,print,all等

二、样式表的语法
CSS的定义是由三个部分构成:选择符(selector),属性(properties)和属性的取值(value)。
基本格式如下:
selector {property: value} ,多个属性/值对必须由分号隔开。

选择符可以是多种形式:
1、要定义样式的HTML标记,例如BODY、P、TABLE……,你可以通过此方法定义它的属性和值,属性和值要用冒号隔开:
body {color: black}
2、类选择符,以点号开头,比如
.right {text-align: right}
应用类选择符到标记
在标记的class属性中填入类的名称,注意不要点号。如:
<div class="dreamdu1">连接div标签与dreamdu1样式<div>
<div class="dreamdu12px dreamdublack dreamdubold">使用空格分开多个样式连接div标签<div>

3、ID选择符

在HTML页面中ID参数指定了某个单一元素,ID选择符是用来对这个单一元素定义单独的样式,样式只应用于ID参数指定的元素。例如:
<p id="intro">
这个段落向右对齐
</p>
定义ID选择符要在ID名称前加上一个“#”号。下面这个例子,ID属性将匹配所有id="intro"的元素:
#intro
{
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}

将ID和选择器结合
h2#title{

}
标识应用于ID属性为title的h2标记

4、选择符组

你可以把相同属性和值的选择符组合起来书写,用逗号将选择符分开,这样可以减少样式重复定义:
h1, h2, h3, h4, h5, h6 { color: green }

5、包含选择符

可以单独对某种元素包含关系定义的样式表,元素1里包含元素2,这种方式只对在元素1里的元素2定义,对单独的元素1或元素2无定义,
table a
{
font-size: 12px
}

三、样式表层叠
样式表层叠指可以将多个样式表应用到同一个页面元素,该元素展现所有应用的样式,对于多个样式表中重复定义的部分,高层样式将覆盖低层样式。最高层的样式是内联样式,其次是内嵌式样式,最后是外部样式。可以使用内联或内嵌式样式表覆盖外部定义的样式表。
对于外部定义的样式表,按照加入的顺序层次逐渐变高,最有加入的外部样式表在外部样式中具有最高的层次。
比如,依次加入如下样式表:
<link rel="stylesheet"type="text/ css" href="first.css"/>
<link rel="stylesheet"type="text/ css" href="second.css"/>
<link rel="stylesheet"type="text/ css" href="third.css"/>
最后一个链接样式表(third.css)层次最高,优先执行它所包含的所有规则。任何在third.css中没有定义的规则则按照第二个样式表(second.css)执行,以此类推。third.css中定义的样式将覆盖在first.css或second.css中定义的同名样式。

四、样式表继承
在Html元素中,子元素将继承赋予父元素的特定CSS值。


五、样式表的组织
大型工程中可能会存在多个样式表,如何组织这些样式表呢?
1、文件夹方式
css
--default
----default.css
--user
----register.css
----login.css
--news
----news.css
将样式表按照对应的网站模块分门别类的存放。

2、应用import属性
@import url("default.css");
@import url("news.css");
 

分享到:
评论

相关推荐

    html和css学习笔记

    ### HTML与CSS学习笔记 #### 一、基础知识概述 HTML(HyperText Markup Language)与CSS(Cascading Style Sheets)是构建网页的基础技术。通过学习HTML与CSS,我们可以创建结构化且美观的网页。 - **WWW (World ...

    黑马前端css笔记.zip

    总结,"黑马前端css笔记.zip"包含了CSS3的重要知识点,如选择器扩展、媒体查询、响应式设计、渐变效果、布局技术(Flexbox和Grid)以及动画过渡等。这些内容对于前端开发人员深入理解和运用CSS3至关重要,能帮助他们...

    Web前端网页初级课程 - css(笔记)

    ### Web前端网页初级课程 - CSS(笔记) #### CSS 概述 CSS,全称为 Cascading Style Sheets(层叠样式表),是一种用来描述 HTML 或 XML(包括各种 XML 语言如 SVG、XHTML 等)文档样式的计算机语言。CSS 的主要...

    黑马基础学习html+css课程笔记和案例

    比如创建一个简单的个人简历网页,你需要使用HTML定义各个部分(如个人信息、教育背景、工作经验等),然后用CSS进行美化,调整各元素的位置和样式。还可以尝试实现一个导航栏,通过CSS实现鼠标悬停效果,或者使用...

    《韩顺平轻松搞定网页设计》DIV+CSS学习笔记

    假设我们需要构建一个简单的两栏布局,左侧栏为固定宽度,右侧栏填充剩余空间。我们可以使用`div`和`float`来实现这样的布局效果: 1. **HTML结构**: ```html 左侧栏 右侧栏 ``` 2. **CSS样式**: ```...

    CSS基础知识学习笔记

    ### CSS基础知识学习笔记 #### 一、CSS简介与基本概念 **CSS**(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS的作用在于控制网页的布局和样式,使网页内容的展现更加...

    Head First HTML&amp;CSS 学习笔记.zip

    《Head First HTML&cSS 学习笔记》是一套极具特色的学习资料,它基于同名畅销书籍《Head First HTML与CSS》,通过生动有趣的方式帮助初学者掌握HTML和CSS的基础知识。该资源不仅提供了详尽的笔记内容,还包含了丰富...

    韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记

    "韩顺平《轻松搞定网页设计HTML+CSS+JAVASCRIPT》之DIV+CSS学习笔记" 本资源主要讲解了 DIV+CSS 的概念和应用, DIV 是 HTML 文档中用来提供结构和背景的元素,而 CSS 是一种用来表现 HTML 或 XML 等文件式样的...

    CSS备课笔记

    【CSS备课笔记】 在IT领域,特别是网页设计与开发中,CSS(Cascading Style Sheets)扮演着至关重要的角色。这门技术主要用于定义HTML或XML(包括SVG、XHTML等)文档的呈现方式,让内容与表现分离,使得页面布局...

    CSS学习笔记(手写版)

    ### CSS学习笔记(手写版) #### CSS基础知识 **CSS**(Cascading Style Sheets,层叠样式表)是一种用于定义HTML文档外观的语言。它可以让网页具有更好的视觉表现力,同时使得HTML文档更加语义化。 1. **CSS选择...

    html css笔记

    ### HTML CSS 笔记知识点详解 #### 页面自动刷新 页面自动刷新是指网页可以在设定的时间间隔后自动重新加载,实现页面内容的更新。这种技术在早期的网页开发中较为常见,通常用于实现简单的内容轮播或者定时获取...

    CSS_Demo,文章《CSS笔记》配套代码

    这个名为“CSS_Demo”的压缩包文件是与一篇名为《CSS笔记》的文章配套的代码示例,文章作者通过CSDN平台分享了关于CSS的学习心得和实践案例。这篇文章的链接是:...

    css学习简单笔记.doc

    本篇笔记主要介绍了CSS的基础概念、元素类型、引入方式以及选择器的使用。 首先,CSS中的元素分为块级元素和行内元素。块级元素如`div`、`p`和`h1-h6`等,它们默认占据一整行,可以容纳其他任何类型的元素。而行内...

    CSS学习笔记

    ### CSS学习笔记 #### 第一课 HTML和CSS核心基础 **1. 在HTML中引用CSS的方法** CSS(层叠样式表)是一种用于控制文档呈现样式的语言,它能够有效地将内容与表现形式分离,使网站设计更加灵活且易于维护。在HTML...

    HTML CSS笔记.zip

    2. **Flexbox** 和 **Grid布局**:现代CSS布局解决方案,Flexbox用于一维布局(行或列),Grid用于二维布局,让复杂的页面布局变得简单易行。 3. **CSS预处理器**:如Sass、Less和Stylus,它们扩展了CSS的功能,...

    css3.0学习笔记

    这篇学习笔记将带你深入理解CSS3的核心概念和应用。 首先,CSS3的模块化是其一大特点。它被划分为多个独立的模块,如选择器、边框与背景、布局、颜色、文本等,这使得开发者可以根据需求更精确地控制样式。 1. **...

    html5 css3 简单基础知识笔记

    html5 css3 简单基础知识笔记

    韩顺平html+css+javascript-----div+css笔记

    以下是一个简单的DIV+CSS示例: ```html &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;title&gt;DIV+CSS入门案例 &lt;link href="my.css" type="text/css" rel="stylesheet"/&gt; &lt;td&gt;1 ...

    CSS3学习笔记

    **CSS3学习笔记** 在网页设计领域,CSS(层叠样式表)是用于定义HTML或XML(包括SVG、XHTML等)文档呈现的关键技术。随着技术的不断发展,CSS3已经成为了现代网页设计的标准,提供了丰富的样式控制和布局能力。本...

    css学习笔记

    在这个“CSS学习笔记”中,我们将深入探讨CSS背景属性的几个关键方面。 首先,`background-color`属性用于定义元素的背景颜色。颜色可以使用颜色名称(例如"red")、十六进制值(例如"#ffffff")或RGB函数(例如...

Global site tag (gtag.js) - Google Analytics