CSS 了解一下
CSS 认识一下
1、CSS 的那些事
CSS(Cascading Style Sheets)译「层叠样式表」,我的理解是:各种样式叠加的表。
一个网页,如果没有 CSS,就是穿着“国王的新衣”,在裸奔!CSS 的重要性不言而喻!
作为 HTML 的衣服,CSS 为 HTML 元素提供了一种样式描述,定义其显示方式,TA 能够对网页中元素进行像素级精确控制。
CSS 的历史不做过多赘述,先了解几种引入方式以及其区别。
2、外部样式
外部样式是指单独建立一个扩展名为 .css
的样式表,在 head 标签中采用 link 方式引入,也可以使用 import 方式引入:
// link 引入
<link rel="stylesheet" type="text/css" href="css/style.css" />
// @import 引入
<style type="text/css">
@import url("css/style.css");
</style>
引入外部样式的好处就是,一个样式表可以在多个页面中复用,墙裂建议使用 link 方式引入,import 新手慎用。
3、内嵌样式
内嵌样式主要通过 <style> 标签
在页面中编辑样式:
<style>
.title {
color: red
}
</style>
该方法编写的样式仅在当前页面有效,无法用于其他页面,<style>
标签可以放在任意位置,建议放在 head 中。
4、行内样式
行内样式是在 HTML 页面中的某个元素上直接对其直接定义,以 p 元素为例:
<p style="color: red"></p>
行内样式只对其所在的标签生效,实际上写页面时建议少用或者不用。
引用样式最好是采用第一种 link 方式引入,分离 HTML 页面代码与 CSS 样式,方便项目的维护管理,以及提高 CSS 样式的复用性。
其他两种方法少用或者不用,尽量降低页面的的复杂性。
5、CSS 选择器
HTML 页面中的元素样式大多是通过 CSS 选择器进行控制的。
要想用 CSS 对 HTML 页面中的元素实现一对一,一对多或者多对一的控制,离不开 CSS 选择器。
CSS 的选择器大概有这些:
- 通用选择器
- 标签选择器
- class 选择器(类选择器)
- id 选择器
- 后代选择器
- 子代选择器
- 组合选择器
- 相邻兄弟选择器
- 伪类选择器
- 媒体查询(姑且也算吧)
还有一些可能漏掉了,欢迎留言补充,先复盘一些常见选择器。
5.1 通用选择器
通用选择器用 * 开头,后面直接跟上样式,作用于所有标签,表示通用定义。
就好比定义所有正常人:一个头、两只手、两条腿。
例:
* {
font-size: 18px;
color: red
}
这里表示所有标签中的字体大小为 18px,颜色为红色。
5.2 标签选择器
标签选择器可以选中所有的同类标签元素,标签后面直接跟上样式。
好比规定学生穿校服,不同工厂的工人有对应的工服。
例:
p {
font-size: 16px;
color: blue
}
这里表示所有 p 标签中的字体大小为 16px,颜色为蓝色。
5.3 class 选择器(类选择器)
class 选择器可以选中带有特定类名的标签进行样式定义,也就是一对多,书写时以 . 开头,跟上 class 名称,然后编写样式,在对应的标签中用 class="" 引用。
好比分配一个班级的班干部,给予他们同一类属性。
例:
// css 样式
.title{
background-color: red
}
// html 页面
<div class="title">语文课代表</div>
<div class="title">数学课代表</div>
这里就能把两个课代表的背景颜色都设置成红色,一对多设置。
5.4 id 选择器
id 选择器以 # 开头,后面跟上 id 名,然后书写样式。在对应的标签中使用 id="" 引用,其 id 名具有唯一性。
以一个学校为例,定义校长的属性,一个学校只有一个校长。
例:
// css 样式
#title{
background-color: black
}
// html 页面
<div id="title">校长</div>
这里是定义校长的背景颜色为黑色,虽然说 id 选择器具有唯一性,如果把几个元素都命名成相同的 id 名字,CSS 选择器还是会把被标记的元素都选中应用样式(和 class 选择器一样)。
乍一看,id 选择器的唯一性似乎不存在。然而,在 javascript 中只会选择具有相同 id 名字元素中的第一个。所以,养成一个好习惯,同一 id 不要在同一页面中出现第二次。
注意,由于 CSS 的解释是自上而下的,对于一个元素的相同属性赋值,下面的属性描述会把上面的覆盖掉,因此在一定要注意属性的书写顺序。
5.5 后代选择器
后代选择器也称为包含选择器,用来选择特定元素的后代,将父元素放在前面,子元素放在后面,中间加一个空格分开。
这个应该比较好理解吧,打个比方,我是中国人,我所有的后代都留着中国人的血液。
例:
// css 样式
.china p {
background-color: yellow
}
// html 页面
<div class="china">
<p>儿子</p>
<p>女儿</p>
</div>
这里的儿子和女儿的背景颜色都会是黄色。
后代选择器中的元素不限制两个,也可适用于多层后代关系,用多个空格加以分开最大嵌套层数不超过 256 层。
5.6 子代选择器
与后代选择器的不同的是,子代选择器仅是指 TA 的第一代,后代选择器通过空格来选择,子代选择器通过 > 选择。
好比我只给我的子女们发红衣服,其他后代,例如孙辈,曾孙辈都不发。
例:
// css 样式
div > strong {
color:red
}
// html 页面
<div>
<strong>儿子</strong>
<span>
<strong>孙子</strong>
</span>
</div>
子女的字体颜色是红色的,而孙辈是默认的颜色。
5.7 组合选择器
对多个不同元素做相同的操作的情况下,可以共同使用同一样式代码,元素之间用英文逗号分隔,这就是组合选择器。
好比给不同身份的人发一个“感动玖柒十大青年奖”,可以把他们全部叫到一起来颁奖。
例:
// css 样式
div, p, span, h1 {
color: red
}
// html 页面
<div>小明</div>
<p>小红</p>
<span>小刚</span>
<h1>小利</h1>
这里小明、小红、小刚和小利的颜色都是红色的,采用组合选择器最大的好处就是:简化 CSS 代码,提高了编码效率。
5.8 相邻兄弟选择器 & 通用兄弟选择器
相邻兄弟选择器还是挺好理解的,MDN 的介绍是:介于两个选择器之间,当第二个元素紧跟在第一个元素之后,并且两个元素都是属于同一个父元素的子元素,则第二个元素将被选中。
好比皇帝说下一个生的是儿子就当太子,那就是以当前的最后一个子女为参照物,下一个儿子就是太子,如果先生了个女儿,则不算。
例:
// css 样式
div + p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>
这里都是默认颜色,因为中间相隔了一个二女儿,所以二儿子不能当太子了。
相邻兄弟选择器总结起来就两个关键点:
- 紧接在另一元素后的第一个
- 二者有相同父元素
通用兄弟选择器类似于相邻兄弟选择器,但肯定是不一样的,首先不同的是通用兄弟选择器是用 ~ 连接后面的元素。
继续拿皇帝儿子举例,皇帝说大儿子之后所有的儿子都封王,那就是以大儿子为参照,之后所有的儿子就是王,如果生了个女儿,则略过。
例:
// css 样式
div ~ p {
color: red
}
// html 页面
<div>大儿子</div>
<span>二女儿</span>
<p>二儿子</p>
<p>三儿子</p>
这里都是你猜一下会是神马样子?
5.9 伪类选择器
伪类选择器通常是用来描述元素在一些特定状态下的样式,最常见的就是用在 a 元素(超链接)中了,当然其他元素也可以,只不过相对来说少一些。
就好比拿人来说,不开心的时候会皱眉,开心的时候会笑,发火的时候可能会摔东西,主要是对不同的状态定义。
例:
// 没有被访问过a标签的样式
a:link {
color: black
}
// 访问过后a标签的样式
a:visited {
color: yellow
}
// 鼠标悬浮时a标签的样式
a:hover {
color: red
}
// 鼠标摁住的时候a标签的样式
a:active {
color: blue
}
伪类选择器我觉得应该是最有趣的选择器了,试试就知道了。
5.10 媒体查询
媒体查询应该算是选择器吧,不管那么多我先把 TA 拉进来。
TA 能在不同的条件下使用不同的样式,使页面在不同在设备下达到不同的渲染效果。
好比一个人在不同的场景下做不同的事,为父亲的时候教育子女,为丈夫的时候保护妻子,为人子的时候照顾父母。
例:
@media screen and (max-width: 300px) {
body {
background-color: red
}
}
这里的样式表示如果页面宽度小于 300px 则修改背景颜色为红色,简单易理解吧。
6、最后
CSS 的简单复盘就到这里了,所有的实例都没有用截图展示,还是希望各位能自己去试一试,看看效果,多敲才是正道。
如果有一些地方写的不对,也欢迎指正,分享即学习。
公众号「我是玖柒后」首发,分享即学习!
CSS 了解一下的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
随机推荐
- centos转ubuntu常见问题总结:
1.vmtools的安装 https://blog.csdn.net/weixin_41762173/article/details/79480832 2.镜像源替换 https://opsx.ali ...
- Kong07-自定义 Kong 插件
在进一步讨论之前,有必要简要说明 Kong 是如何构建的,特别是它是如何与 Nginx 集成的,以及 Lua 与它有什么关系. 在 Nginx 中,lua-nginx-module 模块支持 Lua ...
- 关于 Java 中多线程的面试问题 详解
多线程细节: 1. 面试题: sleep 方法 和 wait 方法异同点是什么? 相同点: 可以让线程 处于 冻结状态. 不同点: 1. sleep 必须指定时间 wait 可以指定时间, 也可以不指 ...
- LVS DR模式实践
client:192.168.4.10/24 proxy:192.168.4.5/24 VIP: 192.168.4.15/24 web1:192.168.4.100/24 VIP:192.168 ...
- java数组、字符串拼接
1. 数组实现拼接 int[] arr ={11,22,33,44,55,66}; System.out.print("["); for (int i = 0; i <arr ...
- mariadb数据类型
MariaDB 数据类型: MariaDB数据类型可以分为 数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行,尽量使用范围小的,而不用大的 常用的数据类型: a. 整数:int, bit ...
- 如何提高web应用的吞吐量
这篇博文所列举的优化手段是针对比较传统项目,但是想提高系统的吞吐量现在时髦的技术还是那些前后端未分离, 使用nginx当成静态资源服务器去代理我们的静态资源 是谁限制了Throughput? 当我们对 ...
- [WPF] Caliburn Micro学习一 Installation
在之前的文章(http://blog.csdn.net/alvachien/article/details/5670838)里面,已经提到过MVC和MVVM在Design Pattern上的比较. 首 ...
- php如何在mysql里批量插入数据
假如说我有这样一个表,我想往这个表里面插入大量数据 CREATE TABLE IF NOT EXISTS `user_info` ( `id` int(11) NOT NULL AUTO_INCREM ...
- 为企业应用开发提速,写给企业IT部门的低代码开发基础知识
简介:应用程序开发长期以来一直是IT部门和业务部门面临的问题. IT部门总是被新的应用程序需求弄得不堪重负.他们不可能完成业务部门想要完成的每一个项目. 同时,业务部门的用户厌倦了等待,并开始完全绕过 ...