层叠样式表CSS



1.何为层叠样式表

css就是对网页进行样式的显示进行控制

2.设置css的几种方式

内联样式表(Inline styles)

设置标签的style属性

在使用内联样式表时,html4.01标准建议添加如下

<meta http-equiv="Content-Style-Type" content="text/css">

原因:新版本的html不仅可以使用css还可以使用其他的方式,例如使用text/sml来控制xml在html中的显示效果

弊端:每个标签中都需要设置,内联样式表会在所有的介质上起作用

嵌入样式表

在<head>标签中定义

<stype type="text/css" media="screen,projection">

<!--   :防止浏览器不支持css

P{}

-->    :防止浏览器不支持css

</style>

在<style></style>标签对中定义的每条样式规则的基本格式如下:

selector{property:value;property:value;...}

selector:当定义一条样式规则时,必须制定受这条规则作用的网页元素,

在一条规则中定义的网页元素就是selector(选择器),也就是选择该样式规则作用的网页元素

property:指定那些要被修改的样式名称,即css属性,如color

value:赋给property的值,即css属性值

弊端:每个页面中都要写

外部样式表

<link rel="styleSheet" href="test.css" type="text/css" media="screen"></link>

type和media属性是可选的

将外部样式表,保存在缓冲区中,可以加快网页的加载

优点:能使网页瘦身

输入样式表

可以使用css的@import声明将一个外部样式表(css文件)输入到两外一个css文件中,被输入的css

文件中的样式规则定义语句就成为了输入到的css文件的一部分。

也可以使用@import声明将一个css文件输入到网页的<style></style>标签中,被输入的css文件中的

样式规则定义语句就成了<style></style>标签对中的语句。

使用@import声明的例子语句如下:

<style type="text/css" media="screen,projection">

<!--

@import url("http://www.it315.org/style.css");

P{}

在本网页中定义的css,如果与输入样式表冲突(相同),则本页面的样式覆盖输入样式表中的样式

-->

</style>

3.样式规则的选择器

HTML selector:html标签

Class selector:

要将一种html标签所创建的各个网页元素分成几类,需要将这个HTML标签的class属性设置为不同的值

<p class="stop"> paragraph1 </p>

<p class="worning"> paragraph1 </p>

<p class="normal"> paragraph1 </p>

在样式表中,可以分别为某个HTML标签的各个类别定义样式规则

<style>

P.stop{color:red}

P.worning{color:yellow}

P.normal{color:green}

</style>

在样式表中,可以为某个类别的所有HTML标签定义样式规则:

<style>

.blueone(color:blue)

</style>

<h1 class="blueone">蓝色题目</h1>

<p class="blueone">蓝色段落</p>

ID selector

ID属性用来定义某一个特定的HTML元素,一个网页文件中只能有一个元素使用某一个ID属性值

ID Selector就是为样式规则定义语句选择具有某一ID属性值的HTML元素。

<sapn id="yellowone">terst</span>

在样式表中,id值为yellowone的HTML的元素样式规则定义语句如下:

<style>

#yellowone(color:blue)

</style>

关联选择器

关联选择器是指一个用空格隔开的两个或更多的单一选择器组成的字符串

例如:P EM {background:yellow}

其中的"P EM"就是关联选择器,它表示段落中的强调文本(<em></em>标签对中的内容)的背景为黄色,

而其它地方出现的强调文本则不受影响

关联选择器定义的样式规则的选择权比单一选择器定义的样式规则的优先权高,即使在

P EM{background:yellow}的后面部分定义了如下样式规则:EM{background:green}

但是,在段落标签<p>中定义的强调文本仍用黄色背景

组合选择器

为了减少样式表的重复声明,可以在一条样式规则定义语句组合若干选择器,每个选择器之间用逗号(,)隔开

例如:H1,H2,H3,H4,H5,H6,td{color:red}

伪元素选择器

伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。

例如,对于超链接标签<a>的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态,

对于段落的首字母和首行,都可使用伪元素选择器来定义。

使用伪元素作为选择器的样式规则定义:

HTML:伪元素{属性:值}

常用的伪元素:

A:active 选中超链接时的状态

A:hover 光标移动到超链接上的状态

A:link 超链接的正常状态(没有任何动作前)

A:visited 访问过的超链接状态

P:first-line 段落中的第一行文本

P:first-letter段落中的第一个字母

类选择器与伪元素一起使用的格式:

HTML元素.类名:伪元素{属性:值}

4.样式规则的注释

css中的样式属性非常多,大体可以分为以下几类:

字体、背景、文本、位置、布局、边缘、列表、其他

5.样式属性详解

Filter(css滤镜)

时间: 2024-11-13 06:31:12

层叠样式表CSS的相关文章

web-10. 层叠样式表CSS概述

10. 层叠样式表CSS概述 10.1 DHTML和CSS概念 一个好的Web页面,不但有丰富的内容,同事也需要有精美和"引人注目"的显示效果.DHTML就是具有动态属性和动态显示效果的HTML,而CSS则规定了各种显示风格样式的名称和设置值的规则. 10.2 CSS的基本类型 样式规则定义的第一部分成为selector(选择器),它定义了HTML文件中受该样式规则影响的HTML元素.selector包括有HTML selector.class selector.ID selector

HTML学习笔记(CSS)NO.3

css指层叠样式表 css样式表极大地提高了工作效率 属性选择器 selector{ property:value; } 如h1{ color:red; front-size:14px; } 选择器分组 如 h1,h2,h3{ color:red; } 将h1,h2,h3的标签属性设置成相同的属性 继承: 如 body{ color:red; } 派生选择器:通过依据元素在其位置的上下文关系来定义样式 id选择器:可以为有id的HTML元素指定特定的样式,以#来定义 目前比较常用的方式是id选择

css入门001

css层叠样式表 css的使用方式 在元素的style属性内 行内式 内联式 写在<style>标签内 写在外部css文件中,用<link>关联到html中 @import可以引入css,用于css中引入css css的格式 选择器{ 属性:值; 属性:值: } css的长度单位 px 像素 em 相对于默认大小倍数 百分比 颜色的表示 英文单词 rgb方式 rgb(0~255,0~255,0~255) rgb(百分比,百分比,百分比) rgb(255,255,255) 白色 rg

CSS学习一

想起来自己一直以来也没有系统的学习过HTML+CSS.适逢工作需要,决定这段时间系统的过一遍html与css,在这将自己的学习情况整理成博客. 在此强烈推荐王福朋的博客,本人也是通过该博客学习. 上图展示了 在浏览器中 html 与css是如何工作的. 浏览器将载入的html变为dom树,但是此时没有任何显示样式.所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式. (1)理解css 层叠样式表 css 意为层叠样式表.样式表比较好理解,但是层叠是指什么呢? 层叠指 浏览器对多

CSS入门

一.CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 二.CSS语法:         selector{             property:value;         } 例如:         h1{             color:red;             font-size:14px;         } 属性大于一个之后,属性之间要用分号隔开 如果值大于一个单词,则需要加上引号         p{             font-family

CSS样式总结

CSS: Cascading Style Sheet,层叠样式表 Css由三部分组成:选择符.样式属性.值: 基本语法:选择符 {样式属性:值:样式属性:值.....} 一,选择器 常用的选择器有:标签选择器.class选择器(类选择器).id选择器.后代选择器. 组合选择器和并列选择器等等. 1.多元素的组合选择器: 1.并列选择器(E,F,G,...) 这类选择器之间用逗号作分割,能匹配选择器列出的所有标签元素. 2.后代选择器(E F; E>F) E F,标签之间用空格隔开,表示匹配E标签

【3】CSS简单样式

CSS发展史 1996年12月 css第一版诞生. 1998年5月 css2正式发布 2004年 css2.1发布 Css3的发布--.不是一个时间而是一个时间段 css3模块介绍 css1中定义网页的基本属性: 字体.颜色.补白.基本选择器 css2中在 css1基础上添加了高级功能 浮动和定位.高级选择器(子选择器.相邻选择器.通用选择器) css3遵循的是模块化开发.发布时间并不是一个时间点,而是一个时间段. css简介 CSS的基本概念 CSS是层叠样式表(Cascading Style

html/css随笔

那个,,,由于上一篇发的那个,在前端哪里搜索不到,我感觉是我上一篇弄的标题不对了,所以现在在发一篇,应该在前端哪里就能直接找到 声明下,本人小白,望大神看了勿喷,多多指点,下面咱们进入正题. 为了界面好看点,先在WPS编写了一遍,弄了几个框架图片,会添加一些色彩,更容易让大家看明白,过一段时间就会发Java的,大概也就是一周一 篇,,或者是一周两篇博客,因为现在正在学,只能一边学,然后在星期的时候把学到的总结一下,发出来学到的东西,给大家分享,希望大家喜欢... 1.HTML的基础 HTML是用

HTML第四课+(CSS基础)

回顾 结构标签 html body head 头部标签 meta title link 格式标签 hn br hr p pre center 列表标签 ul li ol dl dt dd 文本标签 em strong q blockquote cite bdo kbd var code sub sup address abbr ....... 超链接 a 图像 img map area 表格标签 table caption thead tbody tfoot tr td th colgroup