大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。
当前系列: HTML和CSS 修改讲义

如果说我要给所有的p标签都定义一个颜色,怎么办?复制粘贴?

再次提醒程序员厌恶复制粘贴


使用CSS的方式

CSS设置可以放在三个地方,分别被称为

内联式

Inline,也叫行内样式。

这是我们已经学过的,CSS的设置放置在HTML元素的style属性里面,这里面的设置只能作用于当前元素

嵌入式

Embedding,也叫页内样式。

CSS设置放置在一个<style></style>标记块里面。这里面的设置能作用于整个当前页面。

<head>
    <style>
        /*这里写CSS样式*/
    </style>
</head>
这行代码通常也放置于head标签之中。

外联式

Linking,也叫外部样式。

把CSS设置放置在一个独立的以.css为后缀的文件中,文件中直接写样式,需要<style>标记;

然后在HTML中引入:

<link rel="stylesheet" href="/css/lucky.css" />

可以写在页面任何地方,但我们通常把它也放在head中。

说明:为方便描述,后文用<style>表示嵌入和/或外联样式表声明区域。


选择器

回头想一想我们的需求:要给所有的p标签……我们怎么表示“所有的p标签”呢?在页内样式或外部样式中,使用“标签选择器”即可。

包括标签选择器,CSS一共提供了以下类型的选择器:

标签选择器

表示所有该标签均适用 {}中定义的样式:

    /*所有p标签都是蓝色文字*/
    p{
        color:blue;
    }

类选择器

在元素中添加一个属性:属性名class,属性值自己设定,比如说red

<p class="red"> 源栈欢迎您!</p>
然后,在<style>块中以圆点(.)开头,后接red,再用花括号括起来:
    /*所有含有属性class="red"的元素,文字都是红色*/
    .red{
        color:red;
    }

Id选择器

和类选择器类似。但HTML元素中属性名为id,<style>块中,前缀为井号(#)

        <p id="primary"> 源栈欢迎您!</p>
    /*含有属性id="primary"的元素,文字是红色*/
    #primary {
        background-color: aquamarine;
    }
但是注意:按规范,一个页面甚至一个网站,一个id只能适用于一个元素——这是和class不同的,一个class可以(也应该)适用于多个元素。

PS:一个页面多个元素使用相同id的结果因浏览器不同而略有差异,但重要的是我们一开始就不应该这样用!

所以Id选择器重用的场景并不多……

属性选择器

以有无某属性,或者属性值为某某某进行匹配:

主要用于form表单
<input type="text" value="源栈欢迎你" />
<input type="button" value="大飞哥" /> <input type="checkbox" checked /> 

其标志符号是方括号[]:

  • 所有带type属性的标签
    [type]{
  • 仅仅是type属性为button 
    [type="button"]{
  • 被选中(checked)的表单(暂时只能通过 F12-查看器 演示
    [checked]{

也可用于a标签,

<a href="https://17bang.ren">17bang.ren</a>
<a href="http://sample.17bang.ren/Code">sample.17bang.ren</a>
比如href的属性值
  • 包含sample:
    [href*="sample"]{
  • 以https开头:
    [href^="https"]{
  • 以Code结尾,
    [href$='code']{
    说明:
    • 不区分大小写
    • 单双引号通用

*选择器

【说明】在学习盒子模型时讲解

使用星号(*)引导,{}中的样式会适用于所有元素:

* {}

通常用于“清场”(解决浏览器兼容问题等),

  • 最常见的是设置margin和padding为0
  • 或者用于调试添加border


层叠和冲突

一个元素可以同时设置id、class和style三种属性,^_^

<p id="primary" class="red" style="text-align:right"> 源栈欢迎您!</p>

一个class中还可以使用多个:

<h1 class="red important">源栈</h1>

如果这些样式并不冲突,该元素可以同时(层叠)使用:

当出现冲突时,CSS只能选择适用一种样式。

权重

比如不同的选择器中都设置了color,但color值不同,按优先级选择从高到低(简化版)
  1. 行内样式
  2. id选择器
  3. 类选择器
  4. 标签选择器
  5. *选择器

演示:使用F12调试工具

顺序

也可能在一个/种选择器中,同一项样式设置了多次:

        .red {
            color: red;
            color: green;  /* 最终生效 */
        }

写在后面的样式会覆盖前面的样式。

包括:同一个页面引入了多个.css文件,后引入的会覆盖前面的……所以,尽量不要混用CSS框架(比如bootstrap和elementUI),否则很容易出问题。

!important

最后,你可能希望某个地方的设置永远不要被覆盖!这时候你可以使用 !important:

        p {
            /*永远无法被其他位置的设置更改,
              哪怕是 style="color: blue"*/
            color: red !important;
        }


组合

在<style>中,还可以将若干选择器组合起来定义,包括:

分组

逗号(,)" 分隔:

p, .mark {

p和.mark都使用一样的样式。

也可以更多分组:

p, .mark, div {

后代

空格" " 分隔:

p .mark{
在p元素“里面”(所有后代元素)的标记为class="mark"的元素受影响
<p> 一起帮,助力 <span class="mark">职业自由</span></p>
<p> 一起帮,<a> 助力 <span class="mark">职业自由</span></a></p>

父子

大于符号">"分隔:  

p>.mark{
p元素的子元素,如果标记为class="mark",就会受影响

兄弟

h1和p是兄弟

<h1 class="mark"> 源栈欢迎您!</h1>
<p> 一起帮,助力职业自由</p>
<p> 键盘敲烂,月薪过万</p>
  • "~":其后同级所有兄弟
    h1 ~ p {
  • "+":向后相邻的一个兄弟
    h1 + p {

交集

直接写在一起,注意没有空格:

  • 标签和类:
    p.mark{
    标注了class="mark"的p元素:
    <h1 class="mark"> 源栈欢迎您!</h1>
    <p class="mark"> 一起帮,助力 <span >职业自由</span></p>
    <p> 一起帮,助力职业自由</p>
  • 类和类:
    .mark.important{
    (至少)同时使用了mark和important两个类
    <h1 class="mark"> 源栈欢迎您!</h1>
    <p class="mark important"> 一起帮,助力职业自由</p>
    <p> 一起帮,助力 <span class="important">职业自由</span></p>

PS:学习这种复杂语法的意义:

  1. 自己组织整理代码
  2. 读懂别人这样组织整理的代码

所以,不要觉得“这个太复杂,算了,我不这样用就是了……”。你不这样用,别人会这样用!你除了自己写代码,还得去读别人的代码。


#常见面试题# 如何合理有效的组织CSS?

一般来说,CSS会是前端最混乱的部分。大致因为:

  • 开发人员对其掉以轻心,不予重视
  • 层叠和冲突:莫名“多”了,或者“少”了个样式,
  • 牵一发而动全身:改一个class的定义,不知道影响多少地方
比如说

一种最简单粗暴的方式:只允许使用外部样式。这样做有两个好处:

  1. 以100%实现“HTML内容与CSS表现分离”,即HTML文件中完全没有CSS样式的设置,所有的CSS设置都在.css文件中完成。
  2. CSS的更改更集中,更方便专人管理

但这种方式会带来几个副作用:

  • 让CSS的命名变得更加困难。随着项目的扩大,命名将变得越来越复杂(因为你不能重名!)。但假如我可以直接使用行内样式,就根本不需要命名;使用页内样式,只需要当前页面不重名即可。
  • 让阅读和维护变得更加困难。比如我看到一个元素被标记为class="success",知道它使用于.success的定义,然而.success定义在哪里的呢?css设置多了以后,找起来还是比较麻烦的;更麻烦的是,多个设置之间还会互相冲突……

所以,飞哥个人建议,如果一个样式,

  1. 仅仅适用于某一个特定元素,没有任何重用价值,就直接使用行内样式
  2. 仅仅在某一个特定页面中重用,就使用页内样式
  3. 需要在多个页面中重用,就使用外部样式

#体会#:从追求“纯粹”,到寻求“妥协”。


作业

  1. 使用合适的选择器,将之前的CSS样式作业
    1. 1-2题,封装成页内样式;
    2. 3-4题封装成外部样式放入site.css文件中
  2. 使用选择器组合,实现以下样式:
    1. h1、h2、h3中的small标签,字体大小缩小75%
    2. 所有a标签没有下划线,但p标签中的除外
    3. 在嵌套的列表中,一级列表项红色,其他级蓝色
    4. 表格中,如果说其中一格使用了.correct,该行中随后其他所有表格内容都加上中划线
    5. 紧跟在label后面的input元素背景色为gray(如果能呈现的话)
    6. 使用了类.small的p标签(只能是p标签)字体大小为12px
学习笔记
源栈学历
大多数人,都低估了编程学习的难度,而高估了自己的学习能力和毅力。

作业

觉得很 ,不要忘记分享哟!

任何问题,都可以直接加 QQ群:273534701

在当前系列 HTML和CSS 中继续学习:

多快好省!前端后端,线上线下,名师精讲

  • 先学习,后付费;
  • 不满意,不要钱。
  • 编程培训班,我就选源栈

更多了解 加:

QQ群:273534701

答疑解惑,远程debug……

B站 源栈-小九 的直播间

写代码要保持微笑 (๑•̀ㅂ•́)و✧

公众号:源栈一起帮

二维码