CSS简单教程 —— 基本语法,类型,选择器以及使用

1. 什么是CSS

CSS:层叠样式表,也就是给HTML增加样式进行修饰美化的。它可以通过对网页中元素的排版,做到页面的样式和结构分离。

2. CSS 基本语法:

选择器 + {一条或者多条声明}
举例:
在这里插入图片描述

p 就是选择器,{ } 中的就是声明,也就是对 p 标签样式的描述。
注意:CSS要写到 style 中,style 标签可以放到页面的任意位置,为了方便修改,一般放到 head 标签中。

4. CSS 类型

CSS 类型分为三种:行内样式,内部样式,外部样式

4.1 行内样式

针对某一个标签写在行内的样式叫做行内样式。
用法:
在这里插入图片描述
缺点:只适合简单样式,对单个标签起作用。这种写法优先级较高,会覆盖其他样式。

4.2 内部样式

写在 html 内部(比如 html 的 head 或者 body)的样式叫做内部样式。
用法:
在这里插入图片描述
优点:内部样式可以做到样式与页面结构分离,方便再次修改。
缺点:分离的不够彻底,CSS 内容多的时候放在 html 中显得繁琐。
4.3 外部样式
实际工作中最常用的就是外部样式,创建一个 CSS 文件,使用 link 标签引入。

<head>
...
      <link rel = "stylesheet" href = "CSS路径">
</head>

三种样式优先级:行内样式 > 内部样式 > 外部样式

5. 选择器种类

选择器是针对修改谁就用谁。
选择器功能是选中页面中指定的标签元素,选中元素后才可以设置元素属性。

常见选择器:标签选择器、类选择器、id选择器、通配符选择器

5.1 标签选择器

标签选择器就是选择一个标签对他进行声明也就是给他设置样式。
举例:
在这里插入图片描述

在这里插入图片描述

特点:能快速为同一类型的标签都选择出来,但是不能差异化选择。

5.2 类选择器

类选择器就是使用类名,给某一类设置样式。
注意:

  1. 类名用.开头。
  2. 下方的标签使用class属性来调用。
  3. 一个类可以被多个标签使用,一个标签也能使用多个来。
  4. 不要使用纯数字,或者中文,以及标签名来命名。

举例:
在这里插入图片描述

特点:差异化表示不同的标签,可以让多个标签的都使用同一个标签。

5.3 id 选择器

id 选择器就是使用某一个元素的id,给这个元素设置样式。
注意:

  1. id 选择器中使用 # 开头后面加某个元素的 id 值。
  2. id 选择器中的 id 值和html 中元素的 id 值相同,但是是先有 html 中的 id 值才会有 CSS 中的 id 值。而类选择器是先在 CSS 中使用类名创建类选择器,html 中的标签才可以使用这个类名调用类选择器。(类选择器和 id 选择器的一个区别)
  3. id 是唯一的。

举例:
在这里插入图片描述

特点:同一个 id 值一个页面只设置使用一次。

5.4 通配符选择器

使用 * 选取所有的标签,改变样式,但是不能改变有行内样式的标签。
举例:
在这里插入图片描述
改变后:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值