CSS学习(1)

一、CSS简介

1、什么是CSS

  • CSS:Cascading Style Sheet 层叠样式表
  • 是一组样式设置的规则,用于控制页面的外观样式

2、为什么使用CSS

  • 实现内容与样式的分离,便于团队开发
  • 样式复用,便于网站的后期维护
  • 页面的精确控制,让页面更精美

3、CSS作用

  • 页面外观美化
  • 布局和定位

二、基本用法

1、CSS语法

  • 选择器:要修饰的对象(东西)
  • 属性名:修饰对象的哪一个属性(样式)
  • 属性值:样式的取值

示例:

2、CSS应用方式

也称为CSS引用方式,有三种方式:内部样式、行内样式、外部样式

(1)内部样式

  • 也称为内嵌样式,在页面头部通过style标签定义
  • 对当前页面中所有符合样式选择器的标签都起作用

(2) 行内样式

也称为嵌入样式,使用HTML标签的style属性定义
只对设置style属性的标签起作用

(3) 外部样式

使用单独的 .CSS 文件定义,然后在页面中使用 link标签@import指令 引入
  • 使用 link标签 链接外部样式文件
<link rel=”stylesheet” type=”text/css” href=”CSS样式文件的路径”> 提示:type属性可以省略
  • @import 指令 导入外部样式文件
示例:
<style>
@import “CSS样式文件路径”;
@import url(CSS样式文件路径);
</style>

示例:

三、选择器

1、基础选择器

(1) 标签选择器

也称为元素选择器,使用HTML标签作为选择器的名称
以标签名作为样式应用的依据

(2) 类选择器

使用自定义的名称,以 . 号作为前缀,然后再通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
注意事项:
  • 调用时不能添加 .
  • 同时调用多个类选择器时,以 空格 分隔
  • 类选择器名称不能以 数字 开头

(3) ID选择器

使用自定义名称,以 # 作为前缀,然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据,一对一的关系

示例:

2、复杂选择器

(1) 复合选择器

标签选择器和类选择器、标签选择器和ID选择器,一起使用
必须同时满足两个条件才能应用样式

(2)组合选择器

也称为集体声明
将多个具有相同样式的选择器放在一起声明,使用逗号隔开

(3) 嵌套选择器

在某个选择器内部再设置选择器,通过空格隔开
只有满足层次关系最里层的选择器所对应的标签才会应用样式
注意:使用 空格 时不区分父子还是后代,使用CSS3中新增的 > 时必须是父子关系才行

示例:

(4) 伪类选择器

根据不同的状态显示不同的样式,一般多用于 标签
四种状态:
  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上,即移动在连接上
  • :active 选定的链接,被激活
注:默认超链接为:蓝色、下划线

示例:

(5) 伪元素选择器

  • :first-letter 为第一个字符的样式
  • :first-line 为第一行添加样式
  • :before 在元素内容的最前面添加的内容,需要配合content属性使用
  • :after 在元素内容的最后面添加的内容,需要配合content属性使用

示例:

3、选择器优先级

(1) 优先级

行内样式>ID选择器>类选择器>标签选择器
原因:首先加载标签选择器,再加载类选择器,然后加载ID选择器,最后加载行内样式
后加载会覆盖先加载的同名样式

(2) 内外部样式加载顺

就近原则
原因:按照书写顺序依次加载,在同优先级的前提下,后加载的会覆盖先加载的同名样式,所以离的越近越优先

(3) !important

可以使用!important使某个样式有最高的优先级

示例:

给TA打赏
共{{data.count}}人
人已打赏
前端

HTML5学习(3)

2022-8-8 9:53:12

前端

CSS学习(2)

2022-8-10 16:18:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索