CSS＜1＞-CSDN博客

本文链接：https://blog.csdn.net/weixin_43918232/article/details/122754961

1.CSS简介

选择器（简单选择器组合器选择器伪类选择器伪元素选择器属性选择器）

样式继承

选择器的权重

1.CSS简介

层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.样式表

内联样式

将样式直接编写到style属性中，这样只对当前元素中的内容起作用。

代码示例：


	<p style="color:red;font-size:25px;">锄禾日当午，汗滴禾下土</p>

内部样式

将css样式编写到head中的style标签里，选中指定元素，同时为这些元素一起设置样式。

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS</title>
		<!--
			text:表示写的内容为文本
			css：表示编写的是一个CSS的样式表
			type是一个固定值，或默认值
		-->
		<style type="text/css">
		p{
			color:red;
			font-size:25px;
		}
		</style>
	</head>
	<body>
	<p>锄禾日当午，汗滴禾下土</p>
	<p>谁之盘中餐，粒粒皆辛苦</p>
	</body>
</html>

外联样式

编写到外部css文件中，然后通过link标签来将外部的css文件引入到当前页面中，这样外部文件中的CSS样式表将会应用到当前页面中。

优势：

1.完全使结构和表现分离，可以是样式表在不同的页面使用，最大限度的使样式可以进行复用。
2.可以利用浏览器的缓存，加快用户访问的速度提高用户体验。

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Sign Up Page</title>
    <link rel="stylesheet" href="style.css" type="text/css">

CSS

body {
    background-color: #59CD90;
    color: #3FA7D6;
    font-family: "Fjalla One", Arial;
  }

CSS基本语法

选择器（选中页面的指定元素）

声明块（为元素设置样式，由声明组成，一个样式名一个样式值）

注释 /* */

选择器

简单选择器（根据名称、id、类来选取元素）

p {
  text-align: center;
  color: red;
}
/*元素选择器，选中为p的元素,页面上的所有 <p> 元素都将居中对齐，并带有红色文本颜色*/

#para1 {
  text-align: center;
  color: red;
}
/*id选择器 要选择具有特定 id 的元素，请写一个井号（＃），后跟该元素的 id。
这条 CSS 规则将应用于 id="para1" 的 HTML 元素*/

.center {
  text-align: center;
  color: red;
}
/*类选择器选择有特定 class 属性的 HTML 元素。
如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。例：p.center
在此例中，所有带有 class="center" 的 HTML 元素将为红色且居中对齐*/

* {
  text-align: center;
  color: blue;
}
/*通用选择器，影响页面的所有元素*/

h1, h2, p {
  text-align: center;
  color: red;
}
/*分组选择器，可选择所以样式一样的元素*/

组合器选择器（根据它们之间的特定关系来选取元素）

div p {
  background-color: yellow;
}
/*后代选择器 匹配属于指定元素后代的所有元素。
例子选择 <div> 元素内的所有 <p> 元素 */

div > p {
  background-color: yellow;
}
/*
子选择器 匹配属于指定元素子元素的所有元素。
例中选择属于 <div> 元素子元素的所有 <p> 元素 */

div + p {
  background-color: yellow;
}
/*
相邻兄弟选择器 匹配所有作为指定元素的相邻同级的元素。
兄弟（同级）元素必须具有相同的父元素，“相邻”的意思是“紧随其后”。
例中选择紧随 <div> 元素之后的所有 <p> 元素*/

div ~ p {
  background-color: yellow;
}
/*
通用兄弟选择器匹配属于指定元素的同级元素的所有元素。
例中选择属于 <div> 元素的同级元素的所有 <p> 元素：*/

伪类选择器（根据特定状态选取元素）

/*锚伪类
链接能够以不同的方式显示：
注：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。*/
/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}


/*伪类和 CSS 类
伪类可以与 CSS 类结合使用：鼠标悬停在例子中的链接上时，它会改变颜色*/

a.highlight:hover {
  color: #ff0000;
}

/*简单的工具提示悬停
把鼠标悬停到 <div> 元素以显示 <p> 元素（类似工具提示的效果）：*/
p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}

/*CSS - :first-child 伪类
:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素。

匹配所有 <p> 元素中的首个 <i> 元素
在下面的例子中，选择器匹配所有 <p> 元素中的第一个 <i> 元素：*/

p i:first-child {
  color: blue;
}

伪元素选择器（选取元素的一部分并设置其样式）

selector::pseudo-element {
  property: value;
}

/*::first-line 伪元素(只能应用于块级元素)  用于向文本的首行添加特殊样式。
为所有 <p> 元素中的首行/首字母添加样式：*/
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}
/* 伪元素和 CSS 类 将以红色和较大的字体显示 class="intro" 的段落的首字母。*/

h1::before {
  content: url(smile.gif);
}

/*CSS - ::before 伪元素  可用于在元素内容之前插入一些内容。
将在每个 <h1> 元素的内容之前插入一幅图像 
::after 类似*/

::selection {
  color: red; 
  background: yellow;
}
/* ::selection 伪元素匹配用户选择的元素部分。
以下 CSS 属性可以应用color background cursor outline*/

属性选择器（根据属性或属性值来选取元素）

/*CSS [attribute] 选择器
[attribute] 选择器用于选取带有指定属性的元素。
下例选择所有带有 target 属性的 <a> 元素*/

a[target] {
  background-color: yellow;
}
/*CSS [attribute="value"] 选择器
[attribute="value"] 选择器用于选取带有指定属性和值的元素。
选取所有带有 target="_blank" 属性的 <a> 元素*/

a[target="_blank"] { 
  background-color: yellow;
}

/*CSS [attribute~="value"] 选择器
[attribute~="value"] 选择器选取属性值包含指定词的元素。
下例选取 title 属性包含 "flower" 单词的所有元素*/

[title~="flower"] {
  border: 5px solid yellow;
}

/*CSS [attribute|="value"] 选择器
[attribute|="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素：
注释：值必须是完整或单独的单词，比如 class="top" 或者后跟连字符的，比如 class="top-text"。*/
[class|="top"] {
  background: yellow;
}


/*CSS [attribute^="value"] 选择器
[attribute^="value"] 选择器用于选取指定属性以指定值开头的元素。
下例选取 class 属性以 "top" 开头的所有元素,值不必是完整单词！*/
[class^="top"] {
  background: yellow;
}


/*CSS [attribute$="value"] 选择器
[attribute$="value"] 选择器用于选取指定属性以指定值结尾的元素。
下例选取 class 属性以 "test" 结尾的所有元素*/
[class$="test"] {
  background: yellow;
}

/*CSS [attribute*="value"] 选择器
[attribute*="value"] 选择器选取属性值包含指定词的元素。
下例选取 class 属性包含 "te" 的所有元素*/
[class*="te"] {
  background: yellow;
}


/*设置表单样式
若需为不带 class 或 id 的表单设置样式，属性选择器会很有用*/

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}