文章目录
（一）初识CSS
1、CSS的作用
- 使用HTML标签属性对网页进行修饰的方式存在很大的局限和不足，因为我们所有的样式都是写在标签中，这样既不利于代码阅读，将来维护代码也非常困难。如果希望页面美观、大方、维护方便，就需要使用CSS实现结构与表现的分离。结构与表现相分离是指在页面设计中，HTML标签只用于搭建网页的基础结构，不适用标签属性设置显示样式，所有的样式交由CSS来设置。
2、CSS的定义
- CSS 是Cascading Style Sheet的缩写，译作“层叠样式表单”，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标签性语言。在实际开发中，CSS主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
- CSS定义的规则：选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;…}
- 在上述的样式规则中，选择器用于指定CSS样式作用的HTML对象，花括号内的属性是对该对象设置的具体样式。其中，属性和属性值以键值对“属性:属性值”的形式出现，例如字体大小、文本颜色等。属性和属性值之间用“:”（英文冒号）连接，多个“键值对”之间用 “;”（英文分号）进行分隔。
- 通过CSS样式对
标签进行设置
div{ border: 1px solid red; width: 600px; height: 400px;}
- div为选择器，表示CSS样式作用的HTML对象，border、width和height为CSS属性，分别表示边框、宽度和高度，其中border属性有3个值“1px solid red;”分别表示该边框为1像素、实心边框线、红色。
3、CSS的计量单位
- 在CSS中，通常使用像素单位px作为计量文本、边框等元素的标准量，px 是相对于显示器屏幕分辨率而言的。而百分比（%）是相对于父对象而言的，例如一个元素呈现的宽度是400px，子元素设置为50%，那么子元素所呈现的宽度为200px。
4、CSS中颜色的取值
（1）预定义的颜色值
- 如red、green、blue等
（2）十六进制表示的颜色值
- 如#FF0000、#FF6600、#29D794等。
（3）RGB代码表示的颜色值
- 如红色可以用rgb(255,0,0)或rgb(100%,0%,0%)来表示。如果使用RGB代码百分比方式取颜色值时，即使值为0，也不能省略百分号，必须写为0%
（二）CSS样式的引用方式
1、行内式
- 行内式（inline style）也被称为内联式，是通过标签的style属性设置标签的样式。
- 行内式基本语法格式：<标签名 style=“属性1:属性值1;属性2:属性值2;属性3:属性值3;”>内容</ 标签名>
- style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。属性和属性值的书写规范与CSS样式规则一样。行内式只对其所在的标签及嵌套在其中的子标签起作用。
- 行内式是写在根标签中
<h1 style="font- size:20px; color:blue;">
使用CSS行内式修饰一级标题的字体大小和颜色
</h1>
2、内嵌式
- 内嵌式（inner style）是将CSS代码集中写在HTML文档的头部标签中，并用
<head>
<style type="text/css">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
3、外链式
- 外链式（outer style）也叫链入式，外链式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标签将外部样式表文件链接到HTML文件中。
外链式引用CSS的基本语法格式
<head>
<link href="CSS文件的路径" type="text/css" rel="stylesheet" />
</head>
4、导入式
导入式与链入式相同，都是针对外部样式表文件的。对HTML头部文档应用
- 导入式引用CSS的基本语法格式
<style type="text/css" >
@import url (CSS文件路径); 或 @import "CSS文件路径";
/*在此还可以存放其他CSS样式*/
</style>
（三）CSS选择器
1、标签选择器
- 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的样式。
- 标签选择器的基本语法格式：标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 所有的HTML标签都可以作为标签选择器的标签名，例如
<body>标签、<h1>标签、<p>标签等。用标签选择器定义的样式对页面中该类型的所有标签都有效，这是它的优点，但同时这也是其缺点，因为这样不能设计差异化样式。
2、类选择器
- 类选择器使用“.”（英文点号）进行标识，后面紧跟类名。
类选择器的基本语法格式：.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } - 类名即为HTML页面中元素的class属性值，大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式。
3、id选择器
- id选择器使用“#”进行标识，后面紧跟id名。
- id选择器的基本语法格式：#id{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- id名即为HTML页面中元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。
4、通配符选择器
- 通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。
- 通配符选择器的基本语法格式：*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
- 在实际网页开发中，不建议使用通配符选择器，因为它设置的样式对所有的HTML标签都生效，这是其优点也是其缺点，因为这样不能设计差异化样式。
（四）CSS常用属性
| 属性名称 | 功能描述 |
|---|---|
| margin | 用于指定对象的外边距，也就是对象与对象之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔 |
| padding | 用于指定对象的内边距，也就是对象的内容与对象边框之间的距离。该属性可指定1~4个属性值，各属性值以空格分隔 |
| background | 用于设置背景颜色、背景图片、背景图片的排列方式、是否固定背景图片和背景图片的位置。该属性可指定多个属性值，各属性值以空格分隔，没有先后顺序 |
| font-family | 规定元素的字体系列 |
| border | 用于设置边框的宽度、边框的样式和边框的颜色。该属性可以指定多个属性值，各属性值以空格分隔，没有先后顺序 |
| font | 用于设置字体样式、小型的大写字体、字体粗细、文字的大小、行高和文字的字体 |
| height | 用于指定对象的高度 |
| line-height | 用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高 |
| color | 用于指定文本的颜色 |
| text-align | 用于指定文本的对齐方式 |
| text-decoration | 用于指定文本的显示样式，其属性值包括line-through（删除线）、overline（上划线）、underline（下划线）、blink（闪烁效果，Firefox和Opera可以看到效果）和none（无效果）等 |
| vertical-align | 用于设置元素的垂直对齐方式 |
| display | 用于指定对象的显示形式 |
531
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
