CSS介绍

  • CSS简介
  • CSS基础选择器
  • CSS字体属性
  • CSS文本属性
  • CSS的引入方式

CSS简介

CSS是层叠样式表(Cascading Style Sheets)的简称。

作用:

  • 用于HTML文档中元素的样式定义
  • 实现内容(html元素)与表现(css样式)的分离
  • 实现代码的可重用性和可维护性

CSS主要部分:选择器及一条或多条声明。

  • 选择器用于指定CSS样式的HTML标签,花括号内是对该对象设置的的具体样式。
  • 属性和属性值以“键值对”的形式出现。
  • 属性是对制定对象设置的样式属性,例如字体大小、文本颜色等。
  • 属性和属性之间用英文“:”分开。
  • 多个键值对之间用英文“;”进行区分。

CSS基础选择器

CSS选择器作用:选择标签

  • 标签选择器
    用HTML标签名作为选择器,按标签名分类,为页面中的某一类标签指定统一的CSS样式。

  • 类选择器
    为了差异化选择不同的标签,单独选一个或某几个标签,可以使用类选择器。

  • id选择器
    样式#定义,结构id调用,只能用一次,别人勿使用
    样式点调用,结构类(class)调用,一个或多个,开发最常用

  • 通配符选择器
    使用“*”定义,表示选中所有元素(标签)。

CSS字体属性

(1)常用字体属性

(2)font复合属性

可以把以上文字样式综合来写,节约代码。

格式:

font: font-style font-weight font-size/line-height font-family;

比如:

body{
    font: normal 400 25px 'Microsoft yahei'; 
}
  • 使用font属性时,必须按上面语法格式中的顺序写,不能更换顺序,各个属性间以空格隔开。
  • 不需要设置的属性可以省略,但必须保留font-size和font-family属性,否则font属性将不起作用。

CSS文本属性

CSS的引入方式

(1)行内样式表(行内式)

在标签内部写个style属性,适合修改简单的样式。

(2)内部样式表(嵌入式)

将所有的CSS代码抽取出来,单独放到一个<style></style>标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

<style></style>标签一般放在<head></head>标签里。

(3)外部样式表(链接式)

开发过程中,使用的最多的方式。

先单独写一个CSS样式文件,然后在HTML页面通过<link>标签引用

<link rel="stylesheet" href="css文件路径">

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):