CSS基础知识1

最新推荐文章于 2024-10-01 23:20:42 发布

搬砖搬到互联网

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量47

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/m0_64204485/article/details/131794852

版权

文章目录

前言
一丶CSS引入规则
二丶基本选择器

前言

**网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。**标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，p 标签表达了这样一种语义：这是一个文本段。

网页的表现层（presentation layer）由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

**网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。**例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

一丶CSS引入规则

1.1 CSS语法

CSS 规则由两个主要的部分构成：选择器[核心]，以及一条或多条声明**[规则]：**

在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素(我们可以通过各种选择器灵性的选择页面的各种元素)。

每条样式声明由一个属性[样式属性]和一个值[样式值]组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS声明总是以分号(;)结束，声明总以大括号({})括起来。

1.2 三种CSS样式引入规则

插入样式表的方法有三种：

外部样式表
内部样式表
内联样式

1.2.1 内联样式

**行内样式(内联样式)引入规则：**样式写在标签的style属性中行内样式的语法规则:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;..."> 内容 </标记名>

该语法中style是标记的属性，实际上任何HTML标记都拥有style属性，用来设置行内样式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标记及嵌套在其中的子标记起作用(部分样式)。

1.2.2 内部样式表

**内嵌[内部]样式引入规则：**样式放在head或body标签的style标签中:

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用<style>标签在文档头部定义内部样式表;

语法规则：

<head>
<style type="text/css">
选择器{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
....
}
</style>
</head>

该语法中，<style>标记一般位于<head>标记中的<title>标记之后，也可以把它放在HTML文档的任何地方。但是由于浏览器是从上到下解析代码的，**把CSS代码放在head便于提前被下载和解析，以避免网页内容下载后没有样式修饰带来的尴尬。同时最好设置type的属性值为“text/css“，**这样浏览器才知道<style>标记包含的是CSS代码，因为<style>标记还可以包含其他代码，如JavaScript代码。

内嵌式CSS样式只对其所在的HTML页面有效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果在一个网站，不建议使用这中方式，因为它不能充分发挥CSS代码的重用优势。

1.2.3 外部样式表

外部样式[链入式]引入规则；一个单独的样式文件,存放我们的样式

链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中。

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在（文档的）头部：

链入式的语法规则:

<head>
	<link href="CSS文件的路径" type="text/css" rel="stylesheet"/>
</head>

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要制定为”text/css“，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet“，表示被链接的文档是一个样式表文件。

1.2.4 样式引入优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下，优先级如下：

(内联样式）Inline style > （内部样式）Internal style sheet =（外部样式）External style sheet > 浏览器默认样式

内部样式和外部样式都是通过选择器来选择元素的，所以他们的优先级和文件顺序、选择器优先级有关；

**注意：**如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

1.3 CSS注释

不管什么注释直接选中ctrl+/、

二丶基本选择器

2.1 基本选择器

元素选择器（Element Selector）：使用元素名称作为选择器来选择页面中的元素。例如，要选择所有的段落元素，可以使用 p 元素选择器。示例：
```
p {
  color: blue;
}
```
类选择器（Class Selector）：使用类名称来选择具有相同类的元素。类选择器以点开头，后跟类名。例如，要选择所有具有 “highlight” 类的元素，可以使用 .highlight 类选择器。示例：
```
.highlight {
  background-color: yellow;
}
```
ID选择器（ID Selector）：使用元素的唯一ID来选择特定的元素。ID选择器以井号开头，后跟ID名称。请注意，每个页面上的ID应该是唯一的。例如，要选择具有 “logo” ID的元素，可以使用 #logo ID选择器。示例：
```
#logo {
  width: 200px;
}
```
属性选择器（Attribute Selector）：使用元素的属性值来选择元素。属性选择器包括属性名、可选的比较运算符和属性值。例如，要选择所有具有 target="_blank" 属性的链接元素，可以使用 [target="_blank"] 属性选择器。示例：
```
a[target="_blank"] {
  color: red;
}
```
伪类选择器（Pseudo-class Selector）：用于选择元素的特定状态或位置。伪类选择器以冒号开头，后跟伪类名称。例如，要选择鼠标悬停在链接上的元素，可以使用 :hover 伪类选择器。示例：
```
a:hover {
  text-decoration: underline;
}
```
通配符选择器：*
```
*{
	margin: 0;
	padding: 0;
}
```
注：在编写CSS时，选择器的选择应尽量简洁和高效，以提高性能。

2.2 组合选择器

后代选择器（Descendant Selector）：使用空格分隔的两个选择器，选择指定元素的后代元素。后代选择器选择在指定元素内的所有后代元素。例如，要选择段落元素内的所有strong元素，可以使用 p strong 后代选择器。示例：
```
p strong {
  color: red;
}
```
子元素选择器（Child Selector）：使用大于号（>）分隔的两个选择器，选择指定元素的直接子元素。子元素选择器只选择在指定元素的直接子级中的元素。例如，要选择列表元素中的所有列表项元素，可以使用 ul > li 子元素选择器。示例：
```
ul > li {
  list-style: none;
}
```
相邻兄弟选择器（Adjacent Sibling Selector）：使用加号（+）分隔的两个选择器，选择与指定元素相邻的下一个兄弟元素。相邻兄弟选择器只选择出现在指定元素之后的第一个兄弟元素。例如，要选择标题元素后的第一个段落元素，可以使用 h1 + p 相邻兄弟选择器。示例：
```
h1 + p {
  margin-top: 0;
}
```
后继兄弟选择器（General Sibling Selector）：使用波浪号（~）分隔的两个选择器，选择与指定元素相邻的所有兄弟元素。通用兄弟选择器选择出现在指定元素之后的所有兄弟元素。例如，要选择标题元素后的所有段落元素，可以使用 h1 ~ p 通用兄弟选择器。示例：
```
h1 ~ p {
  font-weight: bold;
}
```

2.3 属性选择器

存在属性选择器（Existence Attribute Selector）：使用方括号（[]）和属性名来选择具有指定属性的元素，无论属性值是什么。例如，要选择具有 “href” 属性的所有链接元素，可以使用 [href] 存在属性选择器。示例：
```
[href] {
  color: blue;
}
```
等于属性选择器（Equality Attribute Selector）：使用方括号和等号（=）来选择具有特定属性值的元素。例如，要选择具有 “type” 属性值为 “submit” 的所有按钮元素，可以使用 [type="submit"] 等于属性选择器。示例：
```
[type="submit"] {
  background-color: green;
}
```

设置表单样式

示例：

input[name="nickname"] {
	width: 150px;
	margin-bottom: 10px;
	background-color: yellow;
}
input[type="button"] {
	width: 120px;
	margin-left: 48px;
	display: block;
}