搜档网
当前位置:搜档网 › css样式之高级语法

css样式之高级语法

css样式之高级语法
css样式之高级语法

css样式之高级语法

选择器的分组

你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是红色的。

h1,h2,h3,h4,h5,h6 {

color: red;

}

继承及其问题

根据CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:

body {

font-family: "微软雅黑", "宋体";color:red;

}

根据上面这条规则,站点的body 元素将使用“微软雅黑”字体(假如访问者的系统中存在该字体的话)。

通过CSS 继承,子元素将继承最高级元素(在本例中是body)所拥有的属性(这些子元素诸如p, td, ul, ol, ul, li, dl, dt,和dd)。不需要另外的规则,所有body 的子元素都应该显示“微软雅黑”字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,

那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于body 元素的规则。IE/Windows 直到IE10 还存在相关的问题,在表格内的字体样式会被忽略。

Css复习题

1、关于内容、结构和表现说法正确的是(ABD ) A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息,包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是(ABC ) A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的,空标签要加“ /”来关闭 D、注释语句为:/**/ 3、关于CSS基本语法说法正确的是( AC ) A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时,用“;”进行区分 D、如果一个属性有几个值,则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有:(ABC) A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是:(ABC ) A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时,先设的属性起作用 6、关于浏览器默认样式说法错误的是:(ABCD ) A、IE默认页边距为10px,通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。

C、IE默认列表左缩进为40px,通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px,通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是:(ABC) A、CSS作为表现标准语言,需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发,所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有( ABC ) A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现( ABCD ) A、双补浮向Bug B、图片间隙 Bug C、项目符号隐藏 Bug D、多余字符Bug 10、DIV/CSS布局模型包括( ABC ) A、Flow Model(流动模型) B、Float Model(浮动模型) C、Layer Model (层模型) D、box Model (盒模型) 11、关于CSS基本语法说法正确的是( AC ) A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时,用“;”进行区分

css样式大全(整理版)

css样式大全(整理版) 字体属性:(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位:PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/ 区块属性:(Block) /*这个属性第一次认识,要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值

CSS复习题

1、关于内容、结构和表现说法正确的是(ABD) A、内容是页面传达信息的基础 B、表现使得内容的传达变得更加明晰和方便 C、结构就是对内容的交互及操作效果 D、内容就是网页实际要传达的信息,包括文本、图片、音乐、视频、数据、文档等。 2、关于XHTML基本语法说法正确的是(ABC) A、在文档开始要定义文档类型 B、在根元素中应声明命名空间 C、所有标签需闭合的,空标签要加“/”来关闭 D、注释语句为:/**/ 3、关于CSS基本语法说法正确的是(AC) A、属性必须要包含在{}号之中 B、属性和属性值之间用等号链接 C、当有多个属性时,用“;”进行区分 D、如果一个属性有几个值,则每个属性值之间用分号分隔开 4、以下声明可将文本大小设为12px的有:(ABC) A、font-size:12px; B、font-size:9pt; C、font-size:0.75em; D、font-size:0.75; 5、关于样式表的优先级说法正确的是:(ABC) A、直接定义在标记上的css样式级别最高 B、内部样式表次之 C、外部样式表级别最低 D、当样式中属性重复时,先设的属性起作用 6、关于浏览器默认样式说法错误的是:(ABCD) A、IE默认页边距为10px,通过body的margin属性设置。 B、FF默认页边距为8px,通过body的padding属性设置。

C、IE默认列表左缩进为40px,通过ul、ol的margin属性设置。 D、FF默认列表左缩进为40px,通过ul、ol的padding属性设置。 7、关于CSS为什么会出现Bug说法正确的是:(ABC) A、CSS作为表现标准语言,需要在不同浏览器中实现表现层统一 B、各大主流浏览器由于不同厂家开发,所有的核心构架和代码也很难重和 C、各大厂商处于自身利益而设种种技术壁垒 D、网页设计师定义的命名空间不一样 8、CSS样式文件的类型有(ABC) A、内部样式表 B、内联样式表 C、外部样式表 D、包含样式表 9、以下哪些Bug在FF中不会出现(ABCD) A、双补浮向Bug B、图片间隙Bug C、项目符号隐藏Bug D、多余字符Bug 10、DIV/CSS布局模型包括(ABC) A、Flow Model(流动模型) B、Float Model(浮动模型) C、Layer Model(层模型) D、box Model(盒模型) 11、关于CSS基本语法说法正确的是(AC) A、属性必须要包含在{}号之中 B、属性和属性值之间用等于号链接 C、当有多个属性时,用“;”进行区分

css样式大全(精华版)

字体属性:(font) 大小{font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式{font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高{line-height: normal;}(正常) 单位:PX、PD、EM 粗细{font-weight: bold;}(粗体) lighter;(细体) normal;(正常) 变体{font-variant: small-caps;}(小型大写字母) normal;(正常) 大小写{text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰{text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩{background-color: #FFFFFF;} 图片{background-image: url();} 重复{background-repeat: no-repeat;} 滚动{background-attachment: fixed;}(固定) scroll;(滚动) 位置{background-position: left;}(水平) top(垂直); 简写方法{background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/ 区块属性:(Block) /*这个属性第一次认识,要多多研究*/ 字间距{letter-spacing: normal;} 数值/*这个属性似乎有用,多实践下*/ 对齐{text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进{text-indent: 数值px;} 垂直对齐{vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行)

CSS属性大全完整版

CSS属性大全完整版 字体属性:(font) 大小 font-size: x-large; (特大) xx-small; (极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式 font-style: oblique; (偏斜体) italic; (斜体) normal; (正常) 行高 line-height: normal; (正常) 单位:PX、PD、EM 粗细 font-weight: bold; (粗体) lighter; (细体) normal; (正常) 变体 font-variant: small-caps; (小型大写字母) normal; (正常) 大小写 text-transform: capitalize; (首字母大写) uppercase; (大写) lowercase; (小写) none; (无) 修饰 text-decoration: underline; (下划线) overline; (上划线) line-through; (删除线) blink; (闪烁) 常用字体

font-family: "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩 background-color: #FFFFFF; 图片 background-image: url(); 重复 background-repeat: no-repeat; 滚动 background-attachment: fixed; (固定) scroll; (滚动) 位置 background-position: Left (水平) top (垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性:(Block) 字间距 letter-spacing: normal; 数值 对齐 text-align: justify; (两端对齐) left; (左对齐) right; (右对齐) center; (居中) 缩进

CSS基础

CSS 简介
? ? CSS 教程 CSS 基础语法
需要具备的基础知识
在继续学习之前,你需要对下面的知识有基本的了解: ? HTML ? XHTML 如果你希望首先学习这些项目,请在 首页 访问相关教程。
CSS 概述
? CSS 指层叠样式表 (Cascading Style Sheets) ? 样式定义如何显示 HTML 元素 ? 样式通常存储在样式表中 ? 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 ? 外部样式表可以极大提高工作效率 ? 外部样式表通常存储在 CSS 文件中 ? 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用

、、 这样的标签, HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器 来完成,而不使用任何的格式化标签。 由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性 (比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的 站点变得越来越困难。 为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准 化的使命,并在 HTML 4.0 之外创造出样式(Style)。 所有的主流浏览器均支持层叠样式表。
样式表极大地提高了工作效率
样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。 样式通常保存在外部的 .css 文件中。 通过仅仅编辑一个简单的 CSS 文档, 外部样式表使你有 能力同时改变站点中所有页面的布局和外观。 由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为 网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如 需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。

css语法

使用C S S样式美化和布局网页 1 CSS简介 ?CSS 是Cascading Style Sheets 的缩写,称为层叠样式表。它允许网页设计者定义网页元素的样式,包括字体、颜色以及其他高级样式。 ?采用CSS 技术,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。 ?CSS 样式可以是一个单独的外部文件(.css 文件),该文件被链接到站点中的一个或多个网页页面中。 ?CSS 样式也可以定义在HTML 文档内部,在头文件部分的 标记内定义。 例如: ? ? ? ? ? ? ?

CSS层叠样式表 ? 2 CSS的使用 ?一个样式表由样式规则组成,以告诉浏览器怎样呈现一个文档。 2.1 CSS基本语法 ?CSS 语法结构由2 部分组成:选择器和声明。其中声明由样式属性和取值构成。 ?语法: 选择符{ 样式属性: 取值; 样式属性: 取值;……} ?例如: H1{color:blue; font-family: 隶书; } ?选择符:指这组样式编码所要针对的对象,可以是一个HTML标签,如body、h1;也可以是定义了特定的id或class的标签,如#main 表示选择指定了id属性值为main的标签。

CSS 网页样式大全

CSS 网页样式大全 字体属性:(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位:PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性:(Block) 字间距letter-spacing: normal; 数值 对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性:(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border:width style color; 列表属性:(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

css属性大全

字体属性:(font) 大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD 样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常) 行高line-height: normal;(正常) 单位:PX、PD、EM 粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常) 变体font-variant: small-caps;(小型大写字母) normal;(正常) 大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无) 修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁) 常用字体:(font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性:(background) 色彩background-color: #FFFFFF; 图片background-image: url(); 重复background-repeat: no-repeat; 滚动background-attachment: fixed;(固定) scroll;(滚动) 位置background-position: left(水平) top(垂直); 简写方法background:#000 url(..) repeat fixed left top; 区块属性:(Block) 字间距letter-spacing: normal; 数值 对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中) 缩进text-indent: 数值px; 垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom; 词间距word-spacing: normal; 数值 空格white-space: pre;(保留) nowrap;(不换行) 显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) 方框属性:(Box) width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左 边框属性:(Border) border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset; border-width:; 边框宽度 border-color:#; 简写方法border:width style color; 列表属性:(List-style) 类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

HTML+CSS基础知识点

HTML+CSS笔记 1.学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。 (1)HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 (2)CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 (3)JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。 2.添加样式如: 那么恭喜你,你已经使用了CSS设计网页。 那么除了这种调用CSS的方法外,还有别的吗?回答是“当然有了”,下面是系统介绍 标记加注法(in-line): 如果只有一个HTML标记需要设定样式,则可在该标记内,加上属性

CSS样式表类型

样式表类型 1、内联样式表 直接在HTML标记内,插入sytle属性,再定义要显示的样式,这是最简单的样式定 义方法。不过,利用这种方法定义样式时,效果只可以控制该标记,其语法如下: <标记名称style="样式属性:属性值;样式属性:属性值"> 如: 2、嵌入样式表 …… 标签对中,被输入的css文件中的样式规则定义语句就成了标签对中的语句。