了解CSS样式表基础知识|Fooage's Blog

fooage

1.048596

Jul 21, 2020

CSS严格意义上讲不是一种编程语言，叫做层叠样式表，是用来细化网页页面的样式和布局的。它和HTML相结合就可以形成很多我们常见的有一定样式的网页页面，如果需要更多动态交互则还需要JavaScript。而CSS会告诉浏览器如何布局，和如何处理样式。

应用样式流程

首先应该指定样式要应用在那个页面元素上，这需要通过选择器来实现。之后每种元素都会有很多且丰富的样式可以去选择，这些只需要记重要的一部分就行了，全部都用则反而没有重点。

/* selector */
p {
  color: red;
  /* Key-value pair of attribute and value. */
}

将该CSS文件连接至HTML文档，否则CSS代码不会对文档在浏览器里的显示效果有任何影响。

相对独立的存在于CSS文件中，在HTML文件中使用链接来使用。

<!DOCTYPE html>
<head>
  <!-- Link the style sheet to HTML. -->
  <link rel="stylesheet" href="style.css" />
</head>

直接在HTML文件中的<style>中使用。

<!DOCTYPE html>
<head>
  <style></style>
  <!-- Add some styles here to apply to the page. -->
</head>

就像内联函数一样，比较简单的可以直接使用，修改单个元素的样式属性。

<div style="color: red;"></div>

第一步的选择器可以说是CSS必不可少的一部分，它可以通过多种方式来自动选择页面上的元素，之后才能将该选择器对应的样式应用。

如果使用样式表，需要让CSS知道所要对应的元素，这时就需要选择器来帮助我们选定一个或者多个元素。大致有三种选择器的选择方法，直接根据元素名，根据class或根据id。

根据元素名称选中

div {
  color: blue;
}
/* Selected elements in others element. */
div img {
  border: 5px;
}

根据class选中

.box {
  font-size: 60px;
}
/* Selected elements by class. */

根据id选中

#123 {
  color: red;
}
/* Through the id select elements. */

选择器的多元素选择需要用,来把个别选择器隔开就能实现一次选中多种元素的作用。

p,
li,
h1 {
  color: blue;
}

这个可要好好说道说道了，在网页页面中有很多的元素是可以交互的，甚至最简单的交互就是鼠标指针悬于其上。如果不能动态的改变网页的元素样式显示效果将只是一幅图片没有实际感，这时候就需要用到伪选择器了。

处理鼠标悬停

/* Add pseudo-class selector after the normal selector. */
p:hover {
  color: green;
}

:link可以设置未被访问的链接样式

:visited跟上面的相反，是访问过的

:hover鼠标悬停于其上的时候选中

:active用于设置鼠标点击链接时到鼠标松开时的样式

a:hover {
  /* The style will only be applied when the mouse hovers. */
  color: black;
  background-color: yellow;
}

链接伪类属于静态伪类跟元素的静态状态一样，就比如在搜索引擎中的搜索结果如果被访问过了字体就会由蓝色变为紫色。

这些伪类可以被所有元素使用，它有随着操作的动态特征，比如鼠标的行为动作和输入框是否被选中开始输入的情况。

:hover鼠标悬停于其上的时候选中

:active用于设置鼠标点击链接时到鼠标松开时的样式

:focus是某个标签获得焦点时的样式

组合选择符可以用标点符号来确定进一步的选择关系，比如空格连接的元素有包含关系的才会套用，初次之外还有这几种选择器符。