您的位置：首页 > Web前端 > CSS

CSS 初探

2013-07-05 16:47 127 查看

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;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航