电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

CSS基础深造_CSS/HTML

2021-03-01 21:19:15 出处:[ 菜菜电脑网 ] 人气:次阅读
一.样式表基础

  1. 样式表中每一个条目由选择符(selector)和对应的规则组合而成,选择符通常是HTML元素名称,也可以是类(class)、标识符(id)、伪类(pseudo class,它们标明了超链接的完全相同状态)等。

  2. 将样式表(规则)掺入到HTML文档中有3种方式:

  ① 外部样式表。

  ② 应用于整个文档的样式,地处区,有数插入样式表和回传样式表。

  ③ 行内样式,通过绝大多数元素的style属性意味着。

  3. 样式表内的编者用/* …*/。通过将样式规则猛攻在HTML注解之间可以让那些不拥护样式表技术的老浏览器也能正常工作而不是这样一来把样式规则揭示在屏幕上。一般而言,浏览器才会忽略不交往的元素和属性,但围困在元素之间的内容则会推断出来。

  4. 每一条规则必须以分号;中止。

  5. 如果多个元素构建相同的样式规则,可以运用于逗号将它们分组定义。这里分组的概念与分类(class)或标识符(id)的概念不尽相同,前者设置的规则对整个文档中所有的该元素都起关键作用,而后者只对该元素的一个子集(class或id相同的)起关键作用。其实组规则和其他规则都相关到同一个元素时,它们将被复合上来,以转换成某个元素的非常简单的样式。

  举例:成组规则的领域。

h1,h2,h3 {background : yellow; color : black;}

h1 {font-size : 200%;}

h2 {font-size : 150%;}

h3 {font-size : 125%;}

  二.外部样式表

  外部样式表通过在区内采用<link>元素来提到,<link>元素有三大属性:

  ① rel:请注意了链接关系,这里是stylesheet。

  ② href:标明了外部样式表的URL。

  ③ type:请注意了样式表的类型,这里是text/css。(其他还有jss)

  举例:外部样式表的引述方式。

Style Sheet Linking Example

<link rel = "stylesheet" href = "\css\css1.css" type = "text/css">

  三.应用于整个文档的样式表

  3.1 填充样式表

填充样式表的运用于方式是单独写出在head区的style元素内,从而演化成应用领域与整个文档的样式表。这种情况下只需用做style元素的type属性。

  举例:比如说样式表的可用。

<style type = “text/css”>

</style>

  3.2 重定向样式表

  转换样式表也是提到一个外部样式表,但不是通过link元素而是在style区内通过@import语法来提及:@import url(css的url地址);可以在<style>元素内所述一些转换样式表,同时又所选一些只应用于本文档的样式。但是(Netscape)浏览器对转换样式表的大力支持还不普遍性,所以建议用到<link>来举出外部样式表。

  举例:回传样式表和映射样式表的联合行动采用。

<style type = “type/css”>

</style>

  四.行内样式

  绝大多数元素都有style属性。行内样式信息并不需要从不拥护样式表的浏览器中像是,因为浏览器就会忽略它们不了解的任何属性。

  举例:行内样式的可用。

CSS1 Inline

  五.样式规则的辖域

  以上发表意见了样式表的存放在前方,现在探讨样式表的依赖性范围,两者既有联系又有区别:行内样式规则自然同意了它的影响范围是当前元素,而其他样式规则可以轻松地设置规则的功用范围。

  5.1 恰当规则

  最简单的规则不妨说是它们为文档规则和行内规则。前者可以技术的发展到整个文档中再次出现的所有的某元素(如所有的

元素),后者只技术的发展到当前元素。

  5.2 id规则

  常用id属性的元素除了可以作为超链接的目标外(近似于name属性,在复制到页面时将推断定位在页面的指明后方),还可以用它来和样式表中的某个样式规则可选(比name属性强劲的地方)。无论是作为超链接的href还是样式规则的选择符,援引id的格式为:#id值。在一个HTML文档中,id属性值必须全局唯一。

  举例:id属性与超链接或样式表的混合可用。

如有

,则可以如下引述:

Go to SecondParagraph 或者

<style type = “text/css”>

</style>

  5.3 class规则

  和id属性一样,class属性也是HTML核心属性之一,多数元素都有该属性。class属性定义了一个元素所属类的名称。class个数不允许唯一,同一类元素的多个实例、多个各不相同类的元素都也许归属于同一个类。常用类可以显着地增加文档中必须的样式规则的数量。样式规则中有两种摘录class的格式:

  ① 为所有该类的元素设置样式:.类名{样式规则;}

  ② 为统称该类的所有X元素设置样式:X.类名{样式规则;}

  举例:class规则的常用。

<style type = “text/css”>

</style>

  5.4 伪类(pseudo-classes)和伪元素(pseudo-elements)

  5.4.1 伪类

  一组专门的按计划义的类称作伪类,主要用来处置超链接的状态。超链接文字的状态可以通过伪类选择符+样式规则来操控。伪类选择符都有:

  ① a:link:未回访链接

  ② a:visited:已访问期间链接

  ③ a:active:酪氨酸时(链接获取焦点时)链接的颜色

  ④ a:hover:鼠标移置到链接上时

  一般a:hover和a:visited链接的状态(颜色、下划线等)无论如何是相同的。前三者分别对应body元素的link、vlink、alink这三个属性。四个“状态”的先后过程是:a:link ->a:hover ->a:active ->a:visited。另外,a:active无法设置不对下划线(总是有的)。

  举例:伪类的罕见状态值

<style type = “text/css”>

</style>

  5.4.2 伪元素

  两个伪元素::first-letter和:first-letter。它们常常和像

这样的元素借助的一段文字一起运用于,用来影响其中首字母或者首行的表明,如p:first-letter和p:first-line。

<style type = “text/css”>

</style>

  5.5 情景选取(contextual selection)

  情景选取无需对地处某嵌套层次内的某元素透过样式压制,该规则通过按照嵌套的顺序请注意元素的名称,然后得出样式规则来创建人。

  举例:使所有浮现在

元素内的元素都有黄色的背景颜色。

p strong {background-color : yellow;}

  六.样式规则的后继者与嵌套

  该性质而无须对元素的多种规则顺利进行第一组,既可以从父元素那里承传一些属性,也可以润色某些属性。层叠(CSS中的C)的一般思想有效地建立了一个系统以已确定在有多个样式表的文档中哪些规则将被应用领域。例如,用于id属性为一个特定的

元素登录规则,这相对于通过class规则而无须的规则很强优先权,而class规则相对于为

元素自身以外的规则有优先权。相对于应用于整个文档的样式或链接付钱的外部样式,通过一个style属性原则上的行内样式是更最重要的。考虑到究竟哪一个规则将最终生效的直观方法是:越专门的规则优先级越高,和标记所在位置越多达的规则优先级越高。

如果所需一个特定的规则永远不被后面的另一条规则润色,可以用!important声明。对想绝不被忽略的规则,可以在这个规则的分号之前断开声明!important,它一定要置于规则的最后,分号之前的左边,否则将被忽略。另外,许多版本的浏览器并不赞成该声明。

  举例:应用于!important声明不被草稿的规则。

P {color:red !important;font-size:12pt;}

元素最终将以红色、24点大小推断。

七.CSS1属性

3.1 font属性

字模、字体样式、字体大小、字体效果等。常用属性有:

① font-family:字模,Cursive、Fantasy、Comic Sans MS等。

② font-size:字体物理大小或相对大小,物理大小包含:xx-small、x-small、small、medium、large、x-large、xx-large分别对应1~7号字体。

③ font-style:是不是斜体, normal、italic、oblique(=italic)。

④ font-weight:文字粗,normal、bold、bolder、lighter。

⑤ font-variant:小型大写字母,normal、small-caps(小型大写字母)。

3.2 text属性
文本标记、文本一个大、单词间距、字母间距、行间距、文本的水平对齐和斜向对齐以及空白大小的高度集中。常用属性有:

① text-transform:单词大小写,none、capitalize、uppercase、lowercase。

② text-decoration:特殊效果,none、line-through、overline、underline。

③ word-spacing:单词间距,normal、英寸(in)、厘米(cm)、point(pt)、pica(pc)、em(em)、像素(px)。

④ letter-spacing:字母间距。

⑤ vertical-align:文本或图像的纵向定位,baseline(普通用户)、sub、super、top、text-top、middle、bottom、text-bottom。

⑥ text-align:文本水平对齐方式,left、right、center、justify。

⑦ text-indent:为段落元素第一行产生后端。

⑧ line-height:当前先为的高度,这样设置的行上下会空借助于相同的距离。

⑨ white-space:依靠元素内空格的处理方式,normal(普通用户)、pre(不加速空格)、nowrap(即使文本行多于了元素内容的宽度也可能会十六进制)

3.3 color属性和background属性

① color:文字颜色

② background-color:背景色

③ background-image:背景图像,背景色揭示在背景图像的下面,以缺少不透光的背景,比④ background-repeat:不得不当背景图像比元素的画布空间小时该如何依序。

repeat:意味着,在水平和横向两个方向上平铺;

repeat-x:仅在水平方向平铺;

repeat-y:仅在横向方向平铺;

no-repeat:不平铺。

⑤ background-attachment:

scroll:普通用户,图像和文本一起倒转;

fixed:图像不不止,水印效果。

⑥ background-position:背景图像在元素画布空间中的定位方式,选定了图像左上角相对于画布的水平间距和侧向间距。可以用绝对距离(像素)、百分比或类似关键字。

水平方向关键字:left、center、right

向下方向关键字:top、center、bottom

举例:background-image属性适用。

b{background-image:url(donut-tile.gif);background-color:white;}

p{background-image:url(picture.gif);background-position:20% 40%;}

body{background-image:url(picture.gif);background-position:center center;}

3.4 box属性

元素这样的块级元素可以作为屏幕上的一个矩形容器来选择。可以通过样式属性来操纵这些容器的三个方面。可以掌控的box属性如下:

① margin属性:提议元素的box的边和相连元素的边的距离。

② border属性:立即围困元素的边的边框的视觉特性。

③ padding属性:尽快元素内它的边和它的实际内容间的距离。

④ height,width和positioning属性:重新考虑由元素产生的box的大小和后方。

3.4.1 margin属性

单边距的设置规则:

① margin-top:上边距

② margin-right:右边距

③ margin-bottom:下边距

④ margin-left:左边距

举例:单边距的设置。

body {margin-top:20px; margin-bottom:20px; margin-left:30px; margin-right:50px;}

p {margin-bottom:20mm;}

div.fun {margin-left:1.5cm; margin-right: 1.5cm;}

也可以用margin属性来一次性为四条边设置边距。

举例:通过margin属性设置边距的规则。

① 如果仅均须了单个值,则该值被应用领域到4个“空白”。

如:p{margin:1.5cm;}

② 如果四个值都所选了,则它们按照顺时针方向分析方法到各个空白(上、右、下、左的顺序),

最后一个距离后分号,之间用空格之遥。

如:p{margin:10px 5px 15px 5px;}

③ 如果在规则中仅选定了两个或三个值,缺失一边的给定将由它的对边重新考虑。

如:p{margin:10px 5px ;}

将设置上边、下边的空白为10像素,右边、左边的空白为5像素。

3.4.2 border属性

border设于空白(margin)和间隙(padding)之间。

(一)border-style属性

① none:无边框

② dotted:点边框

③ dashed:虚线边框

④ solid:实线边框

⑤ double:双边框内

⑥ groove:很薄边框

⑦ ridge:引人注目边框

⑧ inset:凹进边框

⑨ outset:隆起边框

也可以通过border-top-style,border-right-style,border-bottom-style,border-left-style来单独设置各边的边框类型。当用作border-style来设置四边时,规则同margin多种不同。

(二)border-width属性

border-width、border-top-width、border-right-width、border-bottom-width、border-left-width可以分别设置边框的长短。典型个数有:thin、medium、thick,当然也所谓其他长度值。

(三)border-color属性

border-color、border-top-color、border-right-color、border-bottom-color、border-left-color可以分别设置边框的颜色。

可以将border-style、border-width、border-color一起领域到border、border-top、border-right、border-bottom、border-left上来借助对就其border属性的快速设置。当三个属性在放于一起设置时,最出色按照border-style、border-width、border-color的顺序来注意到值。

举例:border复合属性的设置。

#RainbowBox

{

background-color:yellow;

border-top:solid 20px red;

border-right:double 10px blue;

border-bottom:solid 20px green;

border-left:dashed 10px orange;

}

3.4.3 padding属性

在元素的边框和它的实际内容之间的空白可以通过padding属性来掌控。元素的4个间隙(padding)可以通过padding-top、padding-right、padding-bottom、padding-left来设置。与空白(margin)和边框(border)一样,你可以可用速记九宫形式的padding属性来一次性地对四边的间隙完成设置。

举例:一个牵涉margin、border、padding的综合领域。

<style type = “text/css”>

3.4.4 width、height属性

举例:综合。

P

{

width:300px;

height:400px;

padding:10px;

border:solid 5px;

background-color:yellow;

color:black;

}

3.4.5 float、clear属性

float属性影响元素在水平方向上的对齐方式,值得注意与多数html元素的align属性。它使得它所举例来说的元素“流”向左边或右边,这时我们称之为这个元素为“流动”元素。 clear属性对“流动”元素进行时度角定位,最终到底之后或拔除当前的流动方式,类似于html元素br的clear属性,个数有left、right、both、none(匹配)。

3.4.6 display属性

CSS模型定义了三种类型的揭示元素:块级元素、行内元素和列表。display属性受限制一个元素的标示出类型沦为下面四个值中的一个:block,inline,list-item和none。

① none:元素将没有推断出来,并且也一定会守住画布空间,这点和设置visibility属性相同。

② block:块级元素。

③ inline:行内元素。

④ list-item:列表元素

举例:display属性采用。

① “暂停”一个段落,使其不揭示出来:

p.remove{display:none;}

② 将一个块级元素(比如段落)发生变化种种原因内元素,这样就可以不字串辨识!

p{display:inline;}

③ 将一个行内元素转变成块级元素,这样就上升了一个(冒号)!

em{display:block;}

④ 强行一个元素在一定程度上像列表那样标示出:

b{display:list-item;}

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152