Web前端，认识css，css规格，伪类和伪元素的用法，代码详解！

认识 CSS — Cascading Style Sheets

CSS的世界是神奇的。随着浏览器WEB标准的日趋统一，CSS在WEB世界中的扮演的角色也越来越重要。

我们从HTML开始，因为CSS的用途就是为了给HTML标记添样式，所以我们要先知道怎么去写HTML标签

什么是CSS

HTML标记内容是为了给网页赋予纯粹的语义。换而言之就是为了让用户可以去理解里边的含义。每一个标签都是对所包含的内容的一种诠释，描述。所以请记住HTML 就是

文本+标记的一个文档结构（请不要参杂CSS）。当我们给内容都打上标记，就可以使用CSS给标记添加样式了。添加样式的过程根据标签名、标签属性、标签等等的一些关系来给相对应的标签添加样式，so！ 先有 结构后有样式。

简单的来说CSS相当于一个神奇的化妆师，它可以去操作文档的整体表现形式，针对布局、文字、颜色、背景、动画效果等等实现精确的控制，让文档的表现更加的美观好看，它的组成是由一系列有含义的单词和数值所构成。

CSS样式可以直接存储于HTML网页或者单独的样式单文件。无论哪一种方式，样式单包含将样式应用到指定类型的元素的规则。外部使用时，样式单规则被放置在一个带有文件扩展名

.css的外部样式单文档中。简单的了解这个概念之后我们来学习一些基础知识。

添加样式的三种方式

有三种方法可以把CSS样式添加到网页中，分别是行内样式、嵌入样式、链接样式

Hello world

注：网页的解析是从上到下，从左至右。当浏览器遇到开标签时，浏览器会再次切换成为解析HTML代码

CSS规则

构成CSS规则有很多，主要就是选择器。这里我们只需要掌握常用的选择器，碰到特殊的再去查询。

命名惯例

选择符

p { color : red; }

选择器的分类

上下文选择器

子选择器 >

紧邻同胞 +

一般同胞 ~

一般上下文选择器

特殊上下文选择器

id和class选择器

#id

.class

tag.class

属性选择器

tag[属性名]

tag[属性名=”属性值”]

什么时候使用id、class、属性选择器？

id 的用途是在页面标记中唯一地标识一个特定的元素。

类是可以应用给任意多个页面中的任意多个 HTML 元素的公共标识符 。简单来说具有相同的特征的元素

基于属性名和属性的其它特征选择元素，区别对待相同标签，通过不同的标记找到适合的元素。

CSS选择器图解

我们可以通过图形来理解一下

一般选择器

2、特殊选择器

子选择器 >

紧邻同胞

一般同胞

id、class选择器 相当于警察叔叔直接查你的身份证（唯一性）、和查你的学生证（你有很多张从小学到大学做为一个特征，你是一个学生）

ps:

只不过有一个标签带类选择器 更加精确的定位特定的标签元素 (同理id选择器也具有同样的功能)

多类选择 eg:

可以这样子去写 .a.b

伪类

伪类会基于特定的HTML元素的状态应用样式。我们在chrome、firfox开发者工具中任意右键点击一个元素会看到一个菜单。接下来我们介绍一下伪类。Are you ready ?

链接伪类

在浏览器中样式的时候它们可以帮助我们快速的进行变换。首先介绍一下链接伪类，因为任何一个链接始终都会处于下边四个状态之一

link 链接等着用户点击

visited 用户点击过这个链接

hover 鼠标悬停在链接上

active 链接正在被点击

伪类的写法（：）一个冒号代表伪类，请务必区分和伪元素（：：）的写法，稍后看这个。看到上面的例子，可以看到a标签也就是链接在初始的状态的时候是blue ，当鼠标悬停在上方状态为 red，当鼠标点击链接其中的字体变大并且加粗了（为了效果而已），最后呈现的状态visited 。

不过在这里地方可能会碰到一个很奇怪的问题link当你第一次设置的时候是有效果的第二次在看这个页面的时候样式不对了，请你清除一下浏览器的缓存，并更换一下href

实际中不会写这么多只需要定义你所需要的， 比如用户悬停的时候给一个鲜艳的颜色，为了告诉用户快tm点我（毕竟是一个妖艳贱货๑乛乛๑）。如果这个链接目录很长，那么就应该使用visited状态给一个浅的颜色，对于用户的提示作用有很大的帮助，当然也要看地方。

其它伪类、结构伪类

focus

获取焦点，表单中使用

target（不常用）

当用户点击一个指向页面中其它元素（target）的链接时，可以通过此伪类选择

first-child、last-child

代表同胞组的第一个、最后一个

nth-child(n)

n代表一个数值，或者是odd奇数，even偶数

可以增强一切列表的可读性，展现不同的效果

更多信息

More information

伪元素

顾名思义，伪元素是在你的文档上时有时无的元素。介绍几个常用的，并且区分一下伪类与伪元素的区别，一些小技巧。

请记得和伪类（：）的写法区分，伪元素的写法（：：），虽然浏览器对于一个：也是支持的但是为了避免大家混乱，请遵守规则。

::first-letter

选择首字符

::first-line

选择文本段落第一行

::before

在特定元素前边添加内容

::after

在特定元素后边添加内容(用来清除浮动)

晚上好我是

ps：伪元素的能做的东西还很多以后我们在去了解。接下来我们来区分一下伪类与伪元素。

区分伪类与伪元素

伪类与伪元素是同学们最容易混淆的两个知识点。最直观的请大家通过写法初步区分。1和2的区别

example

到此我相信大家对CSS 的人是已经有了一定的了解了。

好了，今日就分享到这了，css还没有讲完，明日在分享！