跳至正文

CSS格式规则由什么和什么组成(css格式规则由什么和什么组成?)

css的格式的设置规则由选择器和什么两部分组成

css的格式的设置规则由选择器和什么两部分组成

属性 选择器{ 属性 }

Css的基本规则有几部分组成

Css的基本规则有几部分组成

选择器、属性

css规则具体有哪些!?

css规则具体有哪些!?

基本语法

规则

选择符

任何HTML元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。例如,

P { text-indent: 3em }

当中的选择符是P。

类选择符

单一个选择符能有不同的CLASS(类),因而允许同一元素有不同样式。例如,一个网页制作者也许希望视其语言而定,用不同的颜色显示代码 :

code.html { color: #191970 }

code.css { color: #4b0082 }

以上的例子建立了两个类,css和html,供HTML的CODE元素使用。CLASS属性是用于在HTML中以指明元素的类,例如,

每个选择符只允许有一个类。

例如,code.html.proprietary是无效的。

类的声明也可以无须相关的元素:

.note { font-size: small }

在这个例子,名为note的类可以被用于任何元素。

一个良好的习惯是在命名类的时候,根据它们的功能而不是根据它们的外观。上述例子中的note类也可以命名为small,但如果网页制作者决定改变这个类的样式,使得它不再是小字体的话,那么这个名字就变得毫无意义了。

ID 选择符

ID 选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为他具有一定的局限。一个ID选择符的指定要有指示符”#”在名字前面。例如,ID选择符可以指定如下:

#svp94O { text-indent: 3em }

这点可以参考HTML中的ID属性:

文本缩进3em

关联选择符

关联选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,而且因为层叠顺序的规则,它们的优先权比单一的选择符大。例如, 以下的上下文选择符

P EM { background: yellow }

是P EM。这个值表示段落中的强调文本会是黄色背景;而标题的强调文本则不受影响。

声明

属性

一个属性被指定到选择符是为了使用它的样式。属性的例子包括颜色、边界和字体。

声明的值是一个属性接受的指定。例如,属性颜色能接受值red。

组合

为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

H1, H2, H3, H4, H5, H6 {

color: red;

font-family: sans-serif }

继承

实际上,所有在选择符中嵌套的选择符都会继承外层选择符指定的属性值,除非另外更改。例如,一个BODY定义了的颜色>值也会应用到段落的文本中。

有些情况是内部选择符不继承周围的选择符的值,但理论上这些都是特殊的。例如,上边界属性是不会继承的;直觉上,一个段落不会有同文档BODY一样的上边界值。

注解

样式表里面的注解使用C语言编程中一样的约定方法去指定。CSS1注解的例子如以下格式:

/* COMMENTS CANNOT BE NESTED */

伪类和伪元素

伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素(例如,visited links(已访问的连接)和active links(可激活连接)描述了两个定位锚(anchors)的类型)。伪元素指元素的一部分,例如段落的第一个字母。

伪类或伪元素规则的形式如

选择符:伪类 { 属性: 值 }

选择符:伪元素 { 属性: 值 }

伪类和伪元素不应用HTML的CLASS属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类: 伪类 { 属性: 值 }

选择符.类: 伪元素 { 属性: 值 }

定位锚伪类

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visited links)和可激活连接(active links)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。

一个有趣的效果是使当前(或“可激活”)连接以不同颜色、更大的字体显示。然后,当网页的已访问连接被重选时,又以不同颜色、更小字体显示。这个样式表的示例如下:

A:link { color: red }

A:active { color: blue; font-size: 125% }

A:visited { color: green; font-size: 85% }

首行伪元素

通常在报纸上的文章,例如Wall Street Journal中的,文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等等)。以下是一个首行伪元素的例子:

P:first-line {

font-variant: small-caps;

font-weight: bold }

Dreamweaver8的CSS样式是什么东西?怎么设置?怎么用呢?

是一种样式… 可以对web页面布局的..学网页也是必修的~!

可以使用的css规则一般都有哪些,以及这些规则都具有哪些方面的作用.北外

DIV+CSS规则整理

一、善用css缩写规则

/*注意上、右、下、左的书写顺序*/

1. 关于边距(4边):

1px 2px 3px 4px (上、右、下、左)

1px 2px 3px (省略的左等于右)

1px 2px (省略的上等于下)

1px (四边都相同)

2. 简化所有:

*/ body{margin:0}————表示网页内所有元素的margin为0

#menu{ margin:0}————表示menu盒子下的所有元素的margin为0

3. 缩写(border)特定样式:

Border:1px solid #ffffff;

Border-width:0 1px 2px 3px;

4. 关于文字的缩写规则:

Font-style:italic; 斜体形式

Font-variant:small-caps/normal; 变体样式:小型大写字母/正常

Font-weight:bold;

Font-size:12px;

Line-height:1.2em(120%)/1.5em(150%);

Font-family:arrial,sans-serif,verdana;

缩写成:

Font:italic small-caps bold 12px/1.5emarrial,sans-serif;

注意:Font-size和Line-height用斜杠组合在一起不能分开写。

5. 关于背景图片的:

Background:#FFF url(log.gif) no-repeatfixed top left;

6. 关于列表:

List-style-type:square/none;

List-style-position:inside;

List-style-image:url(filename.gif);

缩写成:

List-style:none inside url(filename.gif)

二、运用4种方法来引入CSS样式

1.link

rel 关系

type 数据类型,有多种

href 路径

部分浏览器支持候选样式,关键字:alternate:

2.内部样式块

3.@import

@import url{a.css}

注意:此指令必须放在

中的设定

--外部引用css文件

(2)优先级不是按访问顺序来设定的,而是又css中的声明顺序来设的。

如上例中此处显示为黄色

也显示为黄色,因为在css定义中.yellow在.blue

的后面。

八、书写正确的链接样式

当用css定义链接的各种状态时,要注意书写的顺序即::link :visited :hover :active利用首字母:L V H A,

你可以通过记忆LoVe,Hate,两个单词来记住其顺序。

:link --------链接的颜色

:visited -----鼠标点击后的颜色

:hover -------鼠标放上去未点的颜色(悬停)

:active-------鼠标点击瞬间的颜色

九、:hover的灵活运用

IE6不支持除a标签以外的:hover属性,我们了解:hover属性是鼠标悬停效果。在IE7和FF中,对几乎任意元素

都可以设置:hover属性效果。这对我们做不同的访问效果很好。

如:

p {

width : 360px;

height : 80px;

padding : 20px;

margin : 50px auto 0 auto;

border : 1px solid #ccc;

line-height : 25px;

background : #fff;

}

p:hover {

border : 1px solid #000;

background : #ddd;

}

----------------此效果针对IE7和FF

p a {

color : #00f;

text-decoration : none;

font-size : 13px;

}

p a:hover {

color : #036;

text-decoration : underline;

}

-----------------此效果针对IE6

十、定义A标签要注意的小问题

当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义

a:hover就可以了,其它三种状态就是A中所定义的样式。

只定义了一个a:link时,一定要记得把其它三种状态定义出来!

十一、禁止内容换行与强制内容换行

在表格或层中我们可能希望内容不换行或强制换行,我们可以通过一些css属性来达到这些要求。

禁止换行:white-space:nowrap

强制换行:word-break:break-all; white-space: normal;

十二、区别relative和absolute

Absolute---CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合

TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为

原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行

定位,位置将由TRBL决定。

Relative---CSS中的写法是:position:relative;他的意思是绝对相对定位,他是参照父级的原始点为原始点,

无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始

点则参照父级内容区的原始点进行定位。

十三、区别块级元素block和内联元素inline

块级---可定义宽高,另起独占一行(如:divul)

内联---不可定义宽高,如文本元素(如a span)

十四、区别display和visibility

display:none和visibility:hidden都可以隐藏一个元素,但visibility:hidden只是隐藏了元素的内容,但其使用的

位置空间仍然被保留。而display:none则相当把元素从页面中去除,其占用位置也将被删除。

十五、背景background的一些语法

background-image:url(背景图案.jpg,gif,bmp);

background-color:#FFFFFF; (背景颜色)

background-color : transparent; <--设定背景为透明色–>

background-repeat 改变背景图片的重复并排的设定

说明

repeat 背景图片并排

repeat-x 背景图片以X方向 并排

repeat-y 背景图片以Y方向 并排

no-repeat 背景图片不 以并排的方式处理

background-attachment是否固定图片位置

说明

scroll 拉动卷轴时,背景图片会跟着移动(缺省值)

fixed 拉动卷轴时,背景图片不会跟着移动

以长度定位background-position:x y

使用百分比定位background-position: x% y%

说明

x% 往右移

y% 往下移

backgroud-position: 0% 0%; 左边上方

backgroud-position: 0% 50%; 左边中间

backgroud-position: 50% 0%; 中间上方

backgroud-position: 50% 50%; 正中间

backgroud-position:100% 0%; 右边上方

backgroud-position: 0% 100%; 左边下方

backgroud-position: 100% 50%; 右边中间

backgroud-position: 50% 100%; 中间下方

backgroud-position: 100% 100%; 右边下方

以关键字定位

关键字说明

top 上 ( y = 0 )

center 中 ( x = 50, y = 50 )

bottom 下 ( y = 100 )

left 左 ( x= 0 )

Exp:

background-position:center;

图片在指定背景中央X=50% Y=50%位置

background-position: 200px 30px

十六、注释的写法

在Html中:

content

在CSS中:

/* ---------- header ----------------- */

Style

十七、CSS的命名规范

1. id的命名

(1)页面结构

容器: Container

页头:header

内容:content/container

页面主体:main

页尾:footer

导航:nav

侧栏:sidebar

栏目:column

页面外围控制整体布局宽度:wrapper

左右中:left right center

(2)导航

导航:nav

主导航:mainnav

子导航:subnav

顶导航:topnav

边导航:sidebar

左导航:leftsidebar

右导航:rightsidebar

菜单:menu

子菜单:submenu

标题: title

摘要: summary

(3)功能

标志:logo

广告:banner

登陆:login

登录条:loginbar

注册:regsiter

搜索:search

功能区:shop

标题:title

加入:joinus

状态:status

2. class的命名

(1)颜色:使用颜色的名称或者16进制代码,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如

.barnews { }

.barproduct { }

注意事项::

u 一律小写;

u 尽量用英文;

u 不加中杠和下划线;

u 2个组合的单词不用中杠和下划线可以将第二个单词的首字母大写(eg:mainContent);

u 尽量不缩写,除非一看就明白的单词.

3. 主要的站点css文件

主要的 master.css

模块 module.css

基本共用 base.css(root.css)

布局,版面 layout.css

主题 themes.css

专栏 columns.css

文字 font.css

表单 forms.css

补丁 mend.css

打印 print.css

十八、Padding影响宽度问题

如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位

于外面的标签的padding

十九、完美的单象素外框线表格

table{border-collapse:collapse;}

td{border:1px solid #000;}

二十、如果文字过长,则将过长的部分变成省略号显示

二十一、并不是所有样式都要简写

当样式表前定义了如p{padding:1px2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白

6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{paddingtop:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义

了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的

p.style1的样式也要变。(此种方法对后期修改样式很重要)

二十二、几个常用到的CSS细节处理上的样式

1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;

2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不让其换行,不过只能

处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

***万能强制换行:white-space:normal;word-break:break-all

禁止换行:white-space:nowrap

强制换行:word-wrap:break-word; word-break: normal;

.AutoNewline

{

/*word-break: break-all; 方法一必须*/

/*word-wrap:break-word;overflow:hidden; 方法二*/

/*word-wrap:break-word; word-break: normal;方法三 */

word-wrap:break-word; word-break:break-all;}

.NoNewline

{

/*word-break: keep-all; 方法一必须*/

white-space:nowrap;

}

3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。

4)文字用鼠标放在前面的文

字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。

5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通

过,FF未通过,这是因为这个样式是IE私有的东西;

6)FLASH透明:选中swf,打开原代码窗口,在前输入

value=”transparent”> 以上是针对IE的代码。

针对FIREFOX 给标签也增加类似参数wmode=”transparent”

7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤

镜:

.pictures img {

filter: alpha(opacity=45); }

.pictures a:hover img {

filter: alpha(opacity=90); }

8)层在浏览器中居中对齐问题

body { text-align: center }

#content { text-align: left; width: 700px;margin: 0 auto }

CSS样式表的基本语言格式

最基本,最常见的格式有以下两种: #box{width:300px;height:200px;} .box{width:300px;height:200px;}由此可见,css的基本格式组成是: 定义对象{属性名:属性值;} 例子中#box表示给id为box的元素定义的样式; .box表示给class类名为box的元素定义的样式. 所有css的属性定义必须包含在{}中,且每个属性之间用;隔开.

css 样式详解

可以理解为背景图片靠上的30px和靠左的80px是溢出隐藏的 就是图片只显示上部分30px以下和左面部分80px以右的部分

css,,在哪,,它又是什么????

层叠样式表 (CSS) 是一系列格式设置规则,它们控制 Web 页面内容的外观。使用 CSS 设置页面格式时,内容与表现形式是相互分开的。页面内容(HTML 代码)位于自身的 HTML 文件中,而定义代码表现形式的 CSS 规则位于另一个文件(外部样式表)或 HTML 文档的另一部分(通常为 部分)中。使用 CSS 可以非常灵活并更好地控制页面的外观,从精确的布局定位到特定的字体和样式等。

CSS 使您可以控制许多仅使用 HTML 无法控制的属性。例如,您可以为所选文本指定不同的字体大小和单位(像素、磅值等)。通过使用 CSS 从而以像素为单位设置字体大小,还可以确保在多个浏览器中以更一致的方式处理页面布局和外观。

CSS 格式设置规则由两部分组成:选择器和声明。选择器是标识已设置格式元素(如 P、H1、类名称或 ID)的术语,而声明则用于定义样式元素。在下面的示例中,H1 是选择器,介于大括号 ({}) 之间的所有内容都是声明:

H1 {

font-size:16 pixels;

font-family:Helvetica;

font-weight:bold;

}

声明由两部分组成:属性(如 font-family)和值(如 Helvetica)。上述示例为 H1 标签创建了样式:链接到此样式的所有 H1 标签的文本都将是 16 像素大小并使用 Helvetica 字体和粗体。

术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如,可以创建一个 CSS 规则来应用颜色,创建另一个规则来应用边距,然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到您的 Web 页面上的元素,并最终创建您想要的设计。

CSS 的主要优点是容易更新;只要对一处 CSS 规则进行更新,则使用该定义样式的所有文档的格式都会自动更新为新样式。

在 Dreamweaver 中可以定义以下规则类型:

自定义 CSS 规则(也称为“类样式”)使您可以将样式属性应用到任何文本范围或文本块。所有类样式均以句点 (.) 开头。例如,您可以创建称为 .red 的类样式,设置规则的 color 属性为红色,然后将该样式应用到一部分已定义样式的段落文本中。

HTML 标签规则重定义特定标签(如 p 或 h1)的格式。创建或更改 h1 标签的 CSS 规则时,所有用 h1 标签设置了格式的文本都会立即更新。

CSS 选择器规则(高级样式)重定义特定元素组合的格式,或其它 CSS 允许的选择器形式的格式(例如,每当 h2 标题出现在表格单元格内时,就应用选择器 td h2)。高级样式还可以重定义包含特定 id 属性的标签的格式(例如,由 #myStyle 定义的样式可以应用到所有包含属性/值对 id="myStyle" 的标签)。

关于CSS样式的书写规则

.menu ul li:hover a{……} 和 .menu ul li a:hover{........}虽然最终目标都是a标签,但是前者是a的父级li元素鼠标移上去时触发,后者是a元素本身鼠标移上去时触发。在a和li的大小是一样的时候两者的效果类似,但下面的就不一样了:

.menu ul li a, .menu ul li a:visited {……} 逗号分隔是同时应用的意思,a:visited是指访问过的a元素,是a元素的子集,所以整条可以用.menu ul li a{……}替代,但是不能用.menu ul li a:visited{……}替代