CSS快速入门（一）

目录

• CSS快速入门
  • 简介
  • 语法结构
  • 如何注释
  • 引入方式
  • 选择器
    • 简介
    • 选择器列表
    • 选择器的优先级
    • 基本选择器
      • 标签选择器
      • 类选择器
      • id选择器
      • 通用选择器（不重要）
    • 组合选择器
      • 后代选择器
      • 儿子选择器
      • 相邻选择器
      • 弟弟选择器
    • 属性选择器
      • 语法
      • 示例
      • 分组与嵌套
    • 伪类选择器
      • 语法
      • 示例
      • 标准伪类索引
    • 选择器参考表
  • 网站分享

CSS快速入门

简介

层叠样式表 — 也就是CSS — 是你在HTML之后应该学习的第二门技术。HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果；

通俗理解为：CSS就是为了给HTML标签修改样式；

语法结构

语法结构：

选择器 {
    	属性名1:属性值1;
    	属性名2:属性值2
  }

---

如何注释

/*注释内容*/
快捷键：ctrl+? (pycharm)

引入方式

1.style内部直接编写css代码,平时学习、练习的时候推荐使用
2.link标签引入外部css文件,正式工作、实际生产环境推荐使用

选择器

简介

CSS选择器是CSS规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个HTML元素应当是被选为应用规则中的CSS属性值的方式。选择器所选择的元素，叫做“选择器的对象”；

css是用来调节标签样式的 那为什么需要学选择器呢?
因为同一个页面上有很多相似的标签 并且这些标签在不同的位置有不同的样式 所以为了能够区分 ，我们肯定先需要学习如何查找指定的标签

---

选择器列表

如果你有多个使用相同样式的CSS选择器，那么这些单独的选择器可以被混编为一个“选择器列表”，这样，规则就可以应用到所有的单个选择器上了。例如，如果我的h1和.special类有相同的CSS，那么我可以把它们写成两个分开的规则。

/*方式一*/
h1 {
  color: blue;
}

.special {
  color: blue;
} 

/*方式二*/
h1, .special {
  color: blue;
} 

/*如果出现语法错误，那么样式不会生效*/
/*相同修改，优先级一般最下面的生效*/

---

选择器的优先级

• 相同选择器不同导入方式
  • 选择器系统遵循就进原则，从上往下谁离标签更近谁说了算

通俗理解：
比如两个相同的选择器都要修改p标签，最下面那个，或者离p标签更近的选择器生效；
如果p标签自己使用style参数，那么p标签自己设定的参数生效；

• 不同选择器不遵循就近原则>>>:优先级
  • 行内选择器 > id选择器 > 类选择器 > 标签选择器

基本选择器

标签选择器

通过标签名直接查找

/*查找所有的div标签*/
  	div {  
            color: red;
        }

类选择器

类选择器的关键符号为.句点符号，是通过class值查找标签；

/*查找所有含有c1样式类的标签*/
  	.c1 {
            color: red;
        }

id选择器

id选择器关键符号位#警号，通过id值查找标签；

/*查找id为d1的标签*/
  	#d1 {
            color: orange;
        }

通用选择器（不重要）

修改body内所有的标签；

/*body内所有的标签*/
    * {
      color: darkgray;
    }

组合选择器

为了区分嵌套标签之间的关系，我们发明了一种称呼，如下：

<div>
<p>
<span></span>
</p>
</div>
/*
span是p的儿子 是div的孙子也可以说是div的后代
p是div的儿子也是div后代 是span的父亲
div是p的父亲是span的爷爷 也可以说是他们的祖先
*/

后代选择器

特征符号是空格

/*查找div内部所有的后代span*/
	div span {  
            color: red;
        }
  

儿子选择器

特征是>大于号

/*查找div内部所有的儿子span*/
	div > span { 
            color: greenyellow;
        }

相邻选择器

特征为+加号，这个查找的是同级别下面紧挨着的第一个span

/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
	div + span {  
            color: pink;
        }

弟弟选择器

特征为~

/*查找同级别下面所有的span(不需要紧挨着)*/
	div ~ span {  
            color: deeppink;
        }

属性选择器

CSS 属性选择器通过已经存在的属性名或属性值匹配元素;

语法

• [attr]

  表示带有以 attr 命名的属性的元素。

• [attr=value]

  表示带有以 attr 命名的属性，且属性值为 value 的元素。

• [attr~=value]

  表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。

• [attr|=value]

  表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。

• [attr^=value]

  表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。

• [attr$=value]

  表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。

• [attr*=value]

  表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。

• [attr operator value i]

  在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。

• [attr operator value s]

  在属性选择器的右方括号前添加一个用空格隔开的字母 s（或 S），可以在匹配属性值时区分大小写（支持 ASCII 字符范围之内的字母）。

示例

/* 存在title属性的<a> 元素 */
a[title] {
  color: purple;
}

/* 存在href属性并且属性值匹配"https://example.org"的<a> 元素 */
a[href="https://example.org"] {
  color: green;
}

/* 存在href属性并且属性值包含"example"的<a> 元素 */
a[href*="example"] {
  font-size: 2em;
}

/* 存在href属性并且属性值结尾是".org"的<a> 元素 */
a[href$=".org"] {
  font-style: italic;
}

/* 存在class属性并且属性值包含以空格分隔的"logo"的<a>元素 */
a[class~="logo"] {
  padding: 2px;
}

分组与嵌套

如果存在多个标签需要调整为同一样式，那么使用分组和嵌套可以减少代码的冗余；

匹配标签之间用逗号隔开，标签与标签是或的关系；

并列写可以标签和标签、标签和选择器、意思就是可以多个相同选择器或多个不同选择器都可以并列使用；

/*并列的情况*/
/* 多个相同选择器并列使用*/ 
div,span,p {  /*查找div或者span或者p*/
            color: red;
        }
/*多个不同选择器并列使用*/
div,#d1,.c1 {  /*标签查找div id查找d1 类查找c1*/
            color: red;
        }
/*不并列的情况*/
/*不并列同样可以使用组合选择器*/
.c1 p {   /*查找class为c1的后代p标签*/
            color: red;
        }
/*直接筛选*/
	div#d1 {  /*查找id为d1的div标签*/
  	color: red;
  }
  div.c1 {  /*查找class为c1的div标签*/
    color: red;
  }

伪类选择器

CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。

语法

selector:pseudo-class {
  property: value;
}

示例

/*鼠标悬浮在上面*/
a:hover {  
            color: orange;
        }
/*a标签默认的颜色会变化 第一次是蓝色 后面是紫色*/


input:focus {
            background-color: red;
        }
/*我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)*/

标准伪类索引

• :active
• :any-link
• :blank
• :checked
• :current (en-US)
• :default
• :defined
• :dir()
• :disabled
• :drop
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :fullscreen
• :future (en-US)
• :focus
• :focus-visible
• :focus-within
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link (en-US)
• :not()
• :nth-child()
• :nth-col() (en-US)
• :nth-last-child()
• :nth-last-col() (en-US)
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past (en-US)
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within (en-US)
• :user-invalid (en-US)
• :valid
• :visited
• :where()

选择器参考表

选择器	示例	学习CSS的教程
类型选择器	h1 { }	类型选择器
通配选择器	* { }	通配选择器
类选择器	.box { }	类选择器
ID选择器	#unique { }	ID选择器
标签属性选择器	a[title] { }	标签属性选择器
伪类选择器	p:first-child { }	伪类
伪元素选择器	p::first-line { }	伪元素
后代选择器	article p	后代运算符
子代选择器	article > p	子代选择器
相邻兄弟选择器	h1 + p	相邻兄弟
通用兄弟选择器	h1 ~ p	通用兄弟

网站分享

• 组件 | Element

• Bootstrap

• [转载网站](CSS选择器 - 学习 Web 开发 | MDN (mozilla.org))