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还没有讲完,明日在分享!

本文来自企鹅号 - 天弘媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭诗雅的专栏

css+js实现左右滑动卡片组件

最近的一个活动页面需要做一个可以左右滑动的抽签效果,故通过用css的transform属性和js结合来模拟可以无限滚动的效果。

1.1K9
来自专栏前端开发之路

前端系列教学 - HTML基础

作为还在慢慢前端学习路上的一位自学者。我以写教程文章的方式来整理自己对于知识的理解,同时也希望能够把自己的理解作为一个分享。希望能够和大家共同进步,如有任何纰漏...

89811
来自专栏Material Design组件

Material Design —Tabs

37510
来自专栏前端笔记

【CSS3 理论知识】表格边框(table-border)你知多少???

table之间的边框存在共用问题,自然而然就存在冲突。既然存在冲突,那么就势必涉及到最后渲染哪一个样式的问题。本文就主要研究当冲突产生时,如何让浏览器按照自己...

3106
来自专栏web前端

Vuejs --01 起步

一、是什么      1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计           1.1     解释:框架譬如angular,是...

2245
来自专栏阮一峰的网络日志

CSS3圆角详解

CSS3是样式表(style sheet)语言的最新版本,它的一大优点就是支持圆角。

1072
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 布局

面包屑包含当前页面的父页面的链接列表,该列表是层级顺序的。它可以帮助用户在网站或网络应用程序中找到自己的位置。面包屑通常水平放置在页面的主要内容之前。

9605
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

4735
来自专栏互联网杂技

超全整理前端开发面试题——CSS篇(2016年)

介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种,IE 盒子模型、W3C 盒子模型; (2)盒模型:内容(content)、填充...

42713
来自专栏达摩兵的技术空间

css选择器攻略

很多小伙伴对css选择器表示不屑,觉得很简单没必要学习,其实你究竟了解多少呢?当面试官问你的时候,你能分出哪些是css3新增的选择器,他们兼容如何?又该如何处理...

913

扫码关注云+社区

领取腾讯云代金券