一.初识css
1.什么是css
Cascading Style Sheet:层叠样式表,简称样式表。
作用:实现网页布局,美化网页
2.css的特性
- 表现层和结构层完全分离,符合web标准
- 便于团队开发(视觉设计师和内容编辑分离)
- 便于网站的更新升级,维护性好
- 用户体验好,网站性能高
- 能够适应不同的显示设备
二.CSS基本语法
1.引入css的三种方法
(1)行内样式
就是直接在标签的开始标签中,使用style属性,如下:
<body>
<h1 style=”color:red;”>行内样式</h1>
</body>
(2)内部样式
直接使用style标签来完成,注意,style标签要写在head部分,不要写到body里面了。
在head部分,添加style标签,如下:
<style>
p{color:red;}
</style>
<body>
<p>内部样式</p>
</body>
(3)外部样式
分两步,
a.将css作为一个独立的文件来保存,一般后缀**.css**
b.使用link标签引入
说明:
- 在实际开发的时候,通常使用外部方式
- 在学习的时候,我们通常使用内部的方式
注意:还有一种方式,是@import ,但一般不建议使用,因为它会牺牲页面性能。
内联对应的是行内。
2.css基本语法
CSS样式(或规则)都必须由两部分组成:
- 选择器(selector)
- 声明块(declaration),包括属性(property)和属性值(value)
注意:
- 声明块是由{}来构成的
- 声明之间必须有一个分号,所以在写单个声明的时候,尽量加上最后的分号
- 声明的属性和属性值之间使用冒号隔开,
- 在写这些符号的时候,要注意必须是英文的。
CSS有一个特性,如果写错了,它不会报错,只是不起作用而言。
其中selector,翻译为选择器或选择符。
3.css选择器
通过前面的一个分析,我们发现在一条css规则中,真正重要的有三个东西:
选择器
属性
属性值
CSS非常强大,其中的一个表现就是他提供了灵活好用的选择器。
作用:用于选中我们需要处理的标签或内容。
(1)基本选择器
选择器 | 语法 | 说明 |
---|---|---|
类选择器 | e1 | 以文档对象类型的元素作为选择器,如p、div、span等 |
id选择器 | #id | 以作为元素对象的唯一标识符id属性作为选择器 |