文章目录

  • （一）初识CSS
  • 1、CSS的作用
  • 2、CSS的定义
  • 3、CSS的计量单位
  • 4、CSS中颜色的取值
  • （1）预定义的颜色值
  • （2）十六进制表示的颜色值
  • （3）RGB代码表示的颜色值
  • （二）CSS样式的引用方式
  • 1、行内式
  • 2、内嵌式
  • 3、外链式
  • 4、导入式
  • （三）CSS选择器
  • 1、标签选择器
  • 2、类选择器
  • 3、id选择器
  • 4、通配符选择器
  • （四）CSS常用属性


（一）初识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

用于指定对象的显示形式