文章目录
前言
在页面排版时,内容与样式和混合设计导致页面代码过于臃肿、难维护,也不利于搜索引擎的检索层叠样式表(Cascading Style Sheets CSS)将页面内容与样式分离,极大改善了HTML在页面显示的缺陷。
一、CSS概述
- CSS(Cascading Style Sheets)通常称为CSS样式表或层叠样式表(级联样式表),使用CSS可以控制HTML标签的显示样式,如页面中的文本内容(字体,大小,对齐方式,颜色等)。
1、CSS基本语法结构
- CSS是声明式语言(和SQL语言类似),针对哪些元素给哪些相应的样式。
- 选择器;用于指定网页中哪些元素使用这个样式,{}内是对该对象设置的具体样式。
- 声明;属性和属性值以“键值对”的形式出现。
- 属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等。
- 属性和属性值之间用英文“:”连接。
- 多个“键值对”之间用英文“;”进行区分。
二、CSS的使用
如何将HTML与CSS进行关联?
- 内部关联 < style>
- 外部关联
<link rel="stylesheet" href="css的URL">
- 内联关联 元素的< style>属性
样式表的优先级
- 多重样式是说外部样式、内部样式和内嵌样式同时应用于页面中的某一个元素。在多重样式的情况下,样式表的优先级采用就近原则。
- 一般情况下,多重样式的优先级由高到低的顺序是 内嵌 ----> 内部 ---->外部 ---->浏览器默认。
- 习惯上,将外部样式放在内部样式之前。
三、CSS 选择器
认识选择器(selector)
- 选择指定的元素:从整个html文件中选择,选择的是所有符合条件的元素
- 例如选择body : body {}
- 所有的元素都支持两个属性
- id:用来唯一表示一个元素,建议不要重复
- class:描述元素的分类,当有多个class时,建议空格分开
基本选择器
1、通用选择器
- 是一个星号*,功能类似于通配符,用于匹配文档中所有的元素类型。通用选择器可以使页面中所有的元素都使用该规则。
- 语法格式&