专栏首页企鹅号快讯Web前端,认识css,css规格,伪类和伪元素的用法,代码详解!

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,让网页开发少点“坑”

    问题:我怎么才能收到你们公众号平台的推送文章呢? 通常我们在学习CSS的时候,感觉语法很容易掌握,实际应用中却碰到各式各样难以填补的“坑”,为避免大家受到同样的...

    企鹅号小编
  • 区块链消费者们成为黑客攻击目标 比特币能否被找回存疑

    文/泓和 ? 2017年的区块链行业并不缺乏全新的技术术语,区块链消费者们也不免成为了黑客与罪犯们的攻击目标。不论是钱包黑客还是有欺诈性质的ICO,或者是软件代...

    企鹅号小编
  • 小白必知什么是css和盒模型

    CSS盒模型概念 CSS 盒模型也叫框模型 (Box Model) ,包含了元素内容(content)、内边距(padding,也叫填充)、边框(border)...

    企鹅号小编
  • django-表单之新增字段和设置css属性(四)

    绝命生
  • React 测试驱动教程

    测试是开发周期中的一个重要组成部分。没有测试的代码被称为:遗留代码。对于我而言,第一次学习 React 和 JavaScript 的时候,感到很有压力。如果你也...

    一个会写诗的程序员
  • android dumpsys 快速入门

    dumpsys属于android平台上的一个bin文件,放置在/system/bin 下面,主要完成打印系统服务的信息,帮助调试分析解决问题。 之前写的文章太...

    用户1263308
  • sentinel 集群流控原理

    为什么需要集群流控呢?假设需要将某个API的总qps限制在100,机器数可能为50,这时很自然的想到使用一个专门的server来统计总的调用量,其他实例与该se...

    luoxn28
  • 学习猿地 python教程 django教程3 Django后台管理及模型关系

    学习猿地
  • 机器人真空夹具改用人造肌肉?

    据外媒报道,在工厂中使用的机器人通常配备真空夹具,用于夹住平面物体。通常,这些夹具由压缩空气提供动力,但这具有一些缺点。然而,现在科学家已经开发出一种使用人造肌...

    机器人网
  • Mysql慢查询(分析工具)

    彼岸舞

扫码关注云+社区

领取腾讯云代金券