CSS简介

First Post:
Last Update:

CSS主要作用是设置HTML的文本内容(文字、 大小、对齐方式)、图形的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

1. CSS简介

1.1 HTML的局限性

只关注内容的语义,很单纯的标记语言(结构)

HTML可以做简单的样式,但是会很臃肿和繁琐

1.2 CSS-网页的美容师

CSS是层叠样式表的简称。

有是又称为CSS样式表或级联样式表。

CSS也是一种标记语言。

CSS主要作用是设置HTML的文本内容(文字、 大小、对齐方式)、图形的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

CSS可以简单理解为:CSS可以美化HTML,让HTML更漂亮,让布局更简单。

总结:

  1. HTML主要做结构,显示元素内容。
  2. CSS美化HTML,布局网页。
  3. CSS最大的价值:HTML(结构)和CSS(样式)相分离,HTML专注结构,CSS专注样式。

1.3 CSS的语法规范

想要熟练的使用CSS布局,首先要了解CSS的样式规则。

CSS规则有两部分构成:选择器和声明。

选择器 { 属性 : 值 };

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

1.4 CSS代码风格

  1. 样式格式书写
  2. 样式大小写风格
  3. 样式空格风格

1. 样式格式书写

紧凑格式

1
h3 {color:deeppink;font-size:20px}

展开格式

1
2
3
4
h3 {
color:pink;
font-size:20px;
}

推荐使用展开式的格式书写

2. 样式大小写

1
2
3
4
h3 {
color:pink;
font-size:20px;
}

一般推荐选择器,属性名,属性值关键字全部使用小写字母,特殊情况除外。

3. 空格规范

1
2
3
4
h3 {
color: pink;
font-size: 20px;
}
  1. 在属性值的前面,冒号的后面,保留一个空格。
  2. 选择器(标签)和大括号之间保留一个空格。

2. CSS基础选择器

2.1 CSS选择器的作用

选择器(选择符)就是根据不同的需求把不同的标签选出来这就是选择器的作用。简单来说,就是选择标签用的

1
2
3
4
h1 {
color: red;
font-size: 25px;
}

以上的CSS做了两件事:

  1. 找到所有的h1标签。(选择器选对人)
  2. 设置这些标签的样式。(做对事)

2.2 选择器的分类

选择器分为基础选择器复合选择器两个大类,我们这里讲一下基础选择器:

  • 基础选折起是由单个选择器组成的。
  • 基础选择器又包括:标签选择器类选择器ID选择器通配符选择器

2.3 标签选择器

标签选择器(元素选择器)是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。

1
2
3
4
5
6
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
···
}

作用:

标签选择器可以把某一类标签全部都选择出来,比如所有的div标签和所有的span标签。

优点:

能快速的为页面中同类型的标签统一样式。

缺点:

不能差异化设置,只能悬着全部的当前标签。

2.4 类选择器

单独的选择一个或某几个标签,可以使用类选择器

语法:

1
2
3
4
.类名 {
属性1: 属性值1;
···
}

语法:

结构需要用class属性来调用class类的意思。

打赏
支付宝 | Alipay
微信 | WeChat