【前端】CSS自学笔记

type
Post
status
Published
summary
这是一篇CSS的学习笔记。一直觉得拥有一个自己亲手写的网页会是一件很酷的事情,但是一直都没有开始去做这件事,最近终于下定决心从基础开始,一步步学习然后写一个自己的网页。
slug
css
date
Aug 29, 2023
tags
前端
CSS
category
基础知识
password
icon
URL
Property
Feb 28, 2024 01:05 PM

一、CSS基础

1.1、CSS样式的三种形式:

1.1.1、行内样式:

  • 写在标签的 style 属性中(又称:内联样式)
    • <h1 style="color:red;font-size:60px;">欢迎来到尚硅谷学习</h1>
  • 只对当前标签有效,不能复用

1.1.2、内部样式:

  • 写在 html 页面内部,单独放在 <style> 标签中, <style> 标签一般放在<head>标签中
  • 只对当前页面的标签有效,其他页面不能复用

1.1.3、外部样式:(最推荐)

  • 写在单独的 .css 文件中,随后在 HTML 文件中使用link标签引入使用。
    • <link rel="stylesheet" href="./xxx.css">
  • 样式可以复用、结构清晰、可触发浏览器的缓存机制,提高访问速度 ,实现了结构与样式的完全分离。
样式表优先级:行内样式 > 内部样式 = 外部样式

1.2、CSS语法规范

CSS 语法规范由两部分构成:
  • 选择器:找到要添加样式的元素。
  • 声明块:设置具体的样式(声明块是由一个或多个声明组成的),声明的格式为: 属性名: 属性值;
notion imagenotion image
  • 最后一个声明后的分号理论上能省略,但最好还是写上。
  • 选择器与声明块之间,属性名与属性值之间,均有一个空格,理论上能省略,但最好 还是写上。

1.3、CSS代码风格

  • 展开风格 —— 开发时推荐,便于维护和调试。
  • 紧凑风格 —— 项目上线时推荐,可减小文件体积。

二、CSS选择器

选择器的作用是在写内部样式或外部样式时,用来定位元素或元素内容的工具

2.1、基础选择器

通配选择器: * ;选中所有的 HTML 元素
元素选择器:直接写标签名称;选择某种元素
类选择器:. ;选择指定class属性值的元素;一个元素的 class 属性,能写多个值,要用空格隔开
Id选择器:# ;选择指定Id属性值的元素;Id值唯一;Id和class可以同时存在一个标签内

2.2、复合选择器

交集选择器:
  • 选中同时符合多个条件的元素(必须同时满足所有条件);
  • 多个基础选择器紧紧相连;选择器1选择器2选择器3...选择器n {};
  • 有标签名,标签名必须写在前面
并集选择器:
  • 选中多个选择器对应的元素(满足一个或多个条件均可);
  • 多个基础选择器用逗号相连;选择器1,选择器2,选择器3...选择器n {};
  • 一般竖着写
后代选择器:
  • 选中指定元素中符合要求的后代元素;
  • 多个元素选择器用空格相连;选择器1 选择器2 选择器3...选择器n {};
  • 不选中祖先,后代包含子代
子代选择器:
  • 选中指定元素中符合要求的子代元素;
  • 多个元素选择器用大于号相连;选择器1>选择器2>选择器3...选择器n {};
  • 不选中父代,且只选中子代
兄弟选择器:
  • 相邻兄弟选择器:选中指定元素之后的符合条件的相邻兄弟元素;两个选择器用加号相连;选择器1+选择器2 {}
  • 通用兄弟选择器:选中指定元素之后的符合条件的所有兄弟元素;两个选择器用波浪号相连;选择器1~选择器2 {}
属性选择器:
  • 选中属性值符合一定要求的元素;
  • [属性名] 选中具有某个属性的元素。
  • [属性名="值"] 选中包含某个属性,且属性值等于指定值的元素。
  • [属性名^="值"] 选中包含某个属性,且属性值以指定的值开头的元素。
  • [属性名$="值"] 选中包含某个属性,且属性值以指定的值结尾的元素。
  • [属性名*=“值”] 选择包含某个属性,属性值包含指定值的元素。
伪类选择器:
动态伪类
  • :link 超链接未被访问的状态。
  • :visited 超链接访问过的状态。
  • :hover 鼠标悬停在元素上的状态。
  • :active 元素激活的状态。
    • 💡
      遵循LVHA的顺序,即:link、visited、hover、 active。
  • :focus获取焦点的元素。
结构伪类
  • :first-child 所有兄弟元素中的第一个。
  • :last-child 所有兄弟元素中的最后一个。
  • :nth-child(n) 所有兄弟元素中的第 n 个。
  • :first-of-type 所有同类型兄弟元素中的第一个。
  • :last-of-type 所有同类型兄弟元素中的最后一个。
  • :nth-of-type(n) 所有同类型兄弟元素中的 第n个 。
    • 💡
      2n 或 even:选中序号为偶数的子元素。
      2n+1 或 odd:选中序号为奇数的子元素。
      -n+3:选中的是前3个。
  • :nth-last-child(n) 所有兄弟元素中的倒数第 n 个。
  • :nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。
  • :only-child 选择没有兄弟的元素(独生子女)。
  • :only-of-type 选择没有同类型兄弟的元素。
  • :root 根元素。
  • :empty 内容为空元素(空格也算内容)。
否定伪类
  • :not(选择器) 排除满足括号中条件的元素
UI伪类
  • :checked 被选中的复选框或单选按钮。
  • :enable 可用的表单元素(没有 disabled 属性)。
  • :disabled 不可用的表单元素(有 disabled 属性)。
目标伪类
  • :target 选中锚点指向的元素。
伪元素选择器:
  • 选中元素中的一些特殊位置
  • ::first-letter 选中元素中的第一个文字。
  • ::first-line 选中元素中的第一行文字。
  • ::selection 选中被鼠标选中的内容。
  • ::placeholder 选中输入框的提示文字。
  • ::before 在元素最开始的位置,创建一个子元素(必须用 content 属性指定内容)。
  • ::after 在元素最后的位置,创建一个子元素(必须用 content 属性指定内容)。

2.3、选择器的优先级

  • 基础选择器:行内样式>ID选择器>类选择器>元素选择器>通配选择器
  • 优先级权重格式为: (a,b,c)
    • 💡
      a : ID 选择器的个数。 b : 类、伪类、属性 选择器的个数。 c : 元素、伪元素 选择器的个数。
    • 按照从左到右的顺序,依次比较大小,当前位胜出后,后面的不再对比

三、常用属性

 
对于本文内容有任何疑问, 可与我联系.