CSS基础选择器

CSS基础选择器

相信学过HTML的都知道,用HTML做出来的网页用一个共性就是"丑",看上去总觉得不像那么回事,所以今天我们就来学着怎么装饰网页.

提到装饰网页我们就不得不想到CSS,而CSS是什么?

什么是CSS?

• CSS又叫层叠样式表( Cascading Style Sheets)
• CSS也是一种标记语言

为什么要引入CSS?

• CSS样式的加入,是为了解决内容与表现分离的问题

CSS可以干什么?

• CSS样式可以对网页中元素位置的排版进行像素级精确控制

CSS的作用?

• CSS可以使页面的布局更加灵活

CSS样式格式书写

• 书写时尽量书写规范,这样的话让人看起来更加直观

选择器 {
       属性: 值;
       属性: 值;
}

CSS样式大小写的书写

• 一般情况下书写时全部使用小写字母,特殊情况除外

CSS样式空格的风格

• 属性值前,冒号的后面都保留一个空格
• 选择器和大括号中间保留空格

CSS样式由两部分组成:

• 选择器
• 声明

什么是选择器?

• 选择器就是用于指定CSS样式的HTML标签

什么是声明?

• 花括号内对某个对象设置的具体的某一样式叫做声明

• 花括号内的属性和属性值是以键值对的方式出现的

• 属性和属性值之间使用:分开

• 多个声明之间使用;分开

选择器的分类

选择器分为:

• 基础选择器
• 复合选择器

基础选择器又分为:

标签选择器

• 标签选择器按照标签名称进行分类,对页面中某一个标签去增加统一的样式

书写格式

标签名 {
       属性: 值;
       属性: 值;
       ...
}

id选择器

• id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

• HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

• id属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用

• id属性只能在每个 HTML 文档中出现一次

书写格式

html：<div id="名字"></div>   
css：  #名字{属性：属性值}

类(class)选择器

• 标签中结构需要class属性来调用class类

• class 选择器用于描述一组元素的样式

• class选择器可以差异化的装饰不同的标签

• class 选择器有别于id选择器，class可以在多个元素中使用

• class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示

• 类名要自己起,最好是见名知意

• 类名的第一个字符不能使用数字！

书写格式

html：<div class="名字"></div>   
css：  .名字{属性：属性值}

class选择器——多类名

• class属性中写了多个名字

• 多个名字之间使用空格分开

• 这样可以更好的对网页进行修饰,减少代码量,方便后期的维护

书写格式

.类名 {
       属性: 值;
       属性: 值;
       ...
}

通配符选择器

• 通配符选择器是选取页面中的所有元素

• 在CSS中,通配符选择器使用*定义

书写格式

* {
       属性: 值;
       属性: 值;
       ...
}

基础选择器总结:

基础选择器	作用	特点	使用情况
标签选择器	可以选择所有相同的标签	不能差异化的使用CSS样式	较多
类(class)选择器	可以选出一个或多个标签	可以根据需求随意选择	非常多
id选择器	一次只能选择一个标签	只能在每个HTML文档中出现一次	通常情况下配合js使用
通配符选择器	选择所有的标签	选择的太多,有一部分可能不需要修改样式	特殊情况下才会使用