CSS 初探

Css: 指层叠样式表 (Cascading Style Sheets),它是用来进行网页风格设计的。通俗的说就是进行网页美化的,没有html依然存在,多了css 它会更好。但是没有html,css就没用多大用处了。

一、定义:

1、样式定义如何显示 HTML 元素

2、是为了解决内容与表现分离的问题

3、多个样式定义可层叠为一

4、外部样式表可以极大提高工作效率(外部样式表通常存储在 CSS 文件中)

二、分类:

1、外部样式表(写在css文件中)

使用情况:当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

在页面中引用如下:

<head>

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

</head>

mystle是定义样式表文件的名称。

2、内部样式表(在head头部)

单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过<style> 标签定义内部样式表。

<head>

<style type="text/css">

body{background-color: red}

p{margin-left: 20px}

</style>

</head>

3、内联样式(在html中)

当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<pstyle="color: red; margin-left: 20px">

Thisis a paragraph

</p>

三、语法:

两个主要部分构成:选择器,以及一条或多条声明。

selector{declaration1; declaration2; ... declarationN }

selector:选择器通常是您需要改变样式的 HTML 元素。

Declarationx:每条声明由一个属性和一个值组成。

1、选择器

Html标签选择器

没有标识,直接引用。

ID 选择器

以“#”标识引用

类选择器

以“.”标识引用

2、三个选择器的异同:

同:都可以通过各自的选择器,来为html内容制定样式。

异:

html 标签选择器比较“整块化”:大家都知道html标签是用来调整html 页面布局的,所以,这个分块比较整齐,是页面的框架,不会总是具体到某个控件或者某个文本。而ID 标签和class标签是个人设定的,我们可以在我们操作的任何地方定义,id 或者class ,或者两者。这样可以把页面样式细化。

重复定义:ID 选择器不可以重复定义,一个页面中,ID 号是唯一的,一定有地方占用,其他地方就不可以占用。class选择器则不同,我们可以把多个地方定义成同一个类,这样方便在样式表统一定义格式,而不用同一个样式多出定义。

注意:html 标签也是有ID 和class属性的。也就是说,如果您给html标签定义了ID ,class 属性,在css 中也可以通过使用ID选择器或者class 选择器来达到目的。一般我们直接使用html 标签,不使用ID,CLASS ,不是那个更好,只是给html 标签定义样式,有现成的html 标签,就没有必要在定义id 或者class.反之,不是html标签的,只能根据需要定义ID ,class 来定义样式了。

也就是:html ,ID ,class 是灵活使用的。

3、书写规则:

大小写:

选择器是对标签的大小写敏感的。

冒号::属性和值之间

属性(property)是您希望设置的样式属性(style attribute)。

每个属性有一个值。属性和值被冒号分开。

selector{property: value}

引号:“”。属性值为若干个单词。

p{font-family: "sans serif";}

分号:;多个属性之间。

p{text-align:center; color:red;}

上一篇:Linux C学习--getline()函数


下一篇:KoaHub平台基于Node.js开发的Koa的连接MongoDB插件代码详情