一、CSS简介

CSS（Cascading Style Sheets）层叠样式表。其中，样式定义为如何显示HTML元素，它通常储存在样式表，将样式添加到HTML中，能够解决内容与表现分离的问题。由于网页是多层结构，通过CSS可分别为网页的每一层设置样式，而多个样式定义可层叠为一个。

二、样式表

方案一：内联样式（行内样式）（不推荐！）

在标签内部通过style属性来设置元素的样式，而样式只能对一个标签生效，维护不方便，开发绝对不要使用内联样式

<p style="color:red; font-size:60px;"> … </p>

方案二：内部样式表

将样式编写到<head>内部的<style>标签里，通过CSS的选择器来选中元素并为其设置样式。另外，在style标签内部的内容不属于HTML，它属于CSS，因此需要遵循CSS的规范。

对于方案二，内部样式表的局限性在于，只能对一个网页起作用，不能跨页面进行复用。

<style>

p{

    color: green;

    font-size:50px;

}

</style>

方案三：外部样式表（最佳方案）

可以将CSS样式编写到一个外部的CSS文件(其拓展名为.CSS)，然后在多个HTML文件中通过标签<link>来引入外部的CSS文件，从而使得样式可在不同页面之间进行复用。

此外，将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，加快网页的加载速度，提高用户的体验

  • 对于HTML文件：

    <head>
    
	…
    
	<link rel = "stylesheet" href = "./style.css">
    
	…
    
</head>

  • 对于CSS文件：

    /*没错，直接来*/
    
p {
    
    color:red;
    
    font-size:50px;
    
}

    TIPS：CSS的注释为/* ... */（C++党狂喜）

三、选择器

CSS规则由两个主要部分组成：选择器，声明块（一条/多条的声明）。其中，选择器可以选中页面中的指定（你需要改变样式的）元素。对于声明块的每条声明，它由一个样式属性和一个值组成，每一条声明总是以分号;结束。

常用选择器

  • 元素选择器：根据标签名来选中指定的元素

    语法：标签名{...}

    例子：

    p{ color:red; }; h1{...}; div{...};

  • id选择器：根据元素的id属性值选中一个元素，一个id值尽量不重复使用

    语法：对于CSS，#id属性值{...}；相对应地，HTML中的<body>内，<选中元素 id="…">

    例子：

    /*对于CSS*/
    
#abc{ color: red; }
    

    <!--对于HTML-->
    
<p id = "abc"> 6666 </p>

  • 类选择器：根据元素的class属性值选中一组元素，不同于id选择器，它可重复地使用，类选择器可以为一个元素指定多个class属性。

    语法：.class属性值{ … }

    例子：

    /*对于CSS*/
    
.blue{ color: blue; }
    

    <!--对于HTML-->
    
<h1 class = "blue"> HELLO </h1>
    
<p class = "blue"> 6666 </p>
    
<p> ... </p>
    
<p class = "blue"> 23333 </p>

  • 通配选择器：选中页面中的所有元素

    语法：*{ … } 例子略。

复合选择器

  • 交集选择器：选中同时复合多个条件的元素。如果交集选择器存在元素选择器，必须使用元素选择器开头。

    语法：选择器1选择器2选择器3…选择器n { … }

    例子：

    对于CSS

    div.red{ font-size:30px; }
    
/* 将class为red且为div的元素的字体大小设置为30px。即 元素选择器.类选择器 */
    
.a.b.c{ color:blue; }
    
div#box1{ ... } /*虽然开发时不会这样用*/

    对于HTML

    <div class = "red2 a b c grey"> 我变蓝了 </div>

    结果，“我变蓝了”真的变为蓝色

  • 选择器分组(并集选择器)：选择多种选择器对应的元素，注意到多个选择器用,分隔。

    语法：选择器1,选择器2,选择器n{ ... }

    例子：

    #a2, .pp, h1, span, div.red{
    
	color: green;
    
}

关系选择器：

  • 子元素选择器：选中指定父元素的指定子元素，注意它只要满足该关系即可选择，eg:存在多个div > span，都会被选上

    语法：父元素 > 子元素 > 子元素的子元素 > … { ... }

    举例：

    对于CSS

    div > span{ color : red; }

    对于HTML

    <div>
    
    <p>
    
        <span> span1 </span> <!--不是div的子元素，不会变色-->
    
    </p>
    
<div>
    
<div>
    
    <span> span2 </span> <!--变红-->
    
</div>

    TIPS：\(VSCode\)中输入ul > li * 3 再按tab，就能得到下方的代码

    <ul>
    
    <li> </li>
    
    <li> </li>
    
    <li> </li>
    
</ul>

  • 后代元素选择器：选中指定元素内的指定所有后代元素

    语法： 祖先 后代

    例子：

    div span { color:skyblue; }

  • 选择下一个兄弟

    语法：前一个+下一个

    例子：

    plate + apple { ... } /*于是选中了碟子挨着的apple*/

  • 选择下面所有兄弟

    语法：兄 ~ 弟

    例子：

    bento ~ pickle { ... } /*于是选中了bento后面的两个pickle*/

属性选择器

语法 作用 举例
元素名[属性名] {…} 选择含有指定属性名的元素，如果不写元素名，相当于通配 p[hello]{ ...}
元素名[属性名 = 属性值] {…} 选择含有指定属性名和属性值的元素 p[title = hello]{...}
元素名[属性名^=属性值] {…} 选择属性值以指定值开头的元素
元素名[属性名$=属性值] {…} 选择属性值以指定值结尾的元素
元素名[属性名*=属性值] {…} 选择属性值中含有某值的元素

伪类选择器

伪类一般用:开头，通常用于描述一个元素的特殊状态，如第二个子元素，被点击的元素，鼠标移入的元素，…

语法 作用 举例
:first-child 选择第一个子元素 ul > li : first-child{ ... }
:last-child 选择最后一个子元素
:nth-child(x) 选择第x个子元素，其中x为特殊值 ul > li:nth-child(2n) {...} 或者 ul > li :nth-child(even)

再举例：

plate > orange: first - child { ... }

注意，以上这些伪类是根据当前所有子元素进行排序的，比如

ul > li : first - child{

     ...

}


<ul>

    <span> .. </span> <!--由于<ul>的第一个元素是<span>-->

    <li> ... </li> <!--作为第二个元素的<li>不受CSS的作用-->

    ...

</ul>

下面三个的伪类选择器，与上面的选择器作用基本一致，唯一区别在于，它们是在同类型元素中进行排序的

语法 作用 举例
:first-of-type
:last-of-type
:nth-of-type
:not 否定伪类，将符合条件的元素从选择器中去除 ul > li:not(:nth-child(3)){...} /除了ul的第三个元素以外都是如此样式/

[附]：关于超链接的伪类（状态）

前两个伪类，为超链接独有，而后两个状态可适用于所有元素。

语法 作用 举例
:link 表示未访问过的链接(正常的链接) a:link{ color : red; }
:visited 表示访问过的链接，但由于隐私原因，该伪类只能修改链接的颜色
:active 表示鼠标点击的状态
:hover 表示鼠标移入的状态

如图，设置该链接元素的父元素设置:hover，就能实现鼠标移到该栏时显示不同的颜色。

伪元素选择器

伪元素一般使用::作开头，表示页面中某些元素的特殊位置，如：首字母、第二行。

语法 作用 举例
::frist-letter 选择第一个字母
::first-line 选择第一行
::selection 表示鼠标选中的内容，比如网页选中一段的效果
::before 元素的开始，必须结合content属性使用，从而凭借CSS为原来的HTML添加内容，可以搭配HTML的<p>使用 见下
::after 元素的结束，与上同理 
div::before{

    content: 'abc';

    color: rgb(21, 94, 230);

}

显示效果为，前面的"abc"是在CSS添加的，且无法被选中。而后面的"Hello, World"来自于HTML中。

四、样式的继承与冲突

  • 样式的继承：为一个元素设置的样式同时也会应用到它的后代元素上。继承是发生在祖先后代之间的，利用继承，我们可将一些通用的样式统一设置到共同的祖先元素上。

    但注意，并不是所有样式都会被继承，如背景相关、布局相关的样式不会被继承。

  • 样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时发生样式的冲突，此时用哪个样式是由选择器的权重决定(权重大，优先级更高，优先显示)

  • 多重样式优先级：

    优先级就是分配给指定的CSS声明的一个权重，它是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。

    以下为优先级递减的选择器列表：

    权重
    继承的样式 没有优先级
    通用选择器（*） \(0,0,0,0\)
    元素(类型)选择器 \(0,0,0,1\)
    类选择器 \(0,0,1,0\)
    属性选择器
    伪类
    ID 选择器 \(0,1,0,0\)
    内联样式 \(1,0,0,0\)

    优先级法则：

    • !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里（开发慎用emmmm）

    • 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；

    • 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式，即内联样式(\(Inline\ style\)) > 内部样式表（\(Internal\ style\ sheet\)） > 外部样式表（\(External\ style\ sheet\)） > 浏览器默认样式

    • 对于复合选择器，其权重是由组成的选择器的权重相加得到的；

      对于分组选择器，其权重是内部的选择器各自计算的；

      注意，选择器的累加不会超过该选择器的最大的数量级，如类选择器的累加结果再高，也不会超过id选择器

五、尺寸单位

  • 像素：相同像素值，在不同的设备下显示效果不一样
  • 百分比：将属性值相对于父元素（较不严谨，暂时用词）属性的百分比。
  • em：相对于元素字体大小来计算，1em = 1font-size=16px
  • rem：相对于根元素的字体大小来计算，在网页适配中大量使用，1em=1font-size(根元素)

六、字体

字体的属性

  • color：用于设置字体颜色

  • font-size：字体的大小，而和font-size相关的单位有em和rem

  • font-family：字体族，浏览器会自动使用下面类别的字体

    • serif：衬线字体
    • sans-serif：非衬线字体
    • monospace：等宽字体

    字体名内部有空格时需在外部加''，font-family可同时指定多个字体，多个字体间用,分隔，字体生效时优先使用第一种字体，若第一种无法使用则使用第二种，以此类推。

    p{
    
    color:red;
    
    font-size:40px;
    
    font-family:'Courier New', Consolas, monospace;
    
}

  • @font-face可将服务器中的字体直接提供给用户去使用，

    @font-face{
    
    font-family:'myfont';/*指定字体的名字*/
    
    src:url(); /*服务器字体的路径*/
    
}
    
/*在某个元素中*/
    
p{
    
    font-family:myfont;
    
}

图标字体(iconfont)

通过使用字体的形式来使用图标（能如字体一般调整大小或颜色，因为它为矢量图故不易失真）。前往fontawesome网站下载相关文件，将css和webfonts文件移动到项目中且必须在同一级文件夹中，并将all.css引入到网页中：<link rel = "stylesheet" href = "路径" >

  • 通过类名来选择图标字体。

    <i class = "fab ..." style = "font-size:...."></i>和<i class = "fas ...">，省略号为你所要选择的图标

  • 通过伪元素来设置图标字体。

    1. 找到要设置图标的元素通过before或after选中

    2. 在content中设置字体的编码(‘fXXX’)

    3. 设置字体的样式（font-family,font-weight）

    在CSS中，

    li::before{
    
    content: '\f368'; /*打开文档查到该图标的编号*/
    
    font-family: 'Font Awesome 5 Brands'; /*找到fab/fas对应的字体*/
    
    color: blue;
    
    ...
    
}

    在HTML中，

    <ul>
    
    <li>
    
        <i class = "fas"> </i>
    
        HELLO WORLD!
    
    </li>
    
</ul>

行高

字体框：可理解为字体存在的格子，设置font-size实际上设置字体框的高度

行高(line-height)指的是文字占有的实际高度，会在字体框上下平均分配（无论行高设置多大，字体始终在其中间）。可以通过line-height属性来设置行高，属性值*的单位为px或em，或者 整数（代表字体的指定倍数）。

行间距 = 行高(line-height) - 字体大小(font-size)

字体的简写属性

大部分元素中的font属性可以设置字体相关的所有属性，其中行高如果省略不写，就会使用默认值

语法：font: 其他属性 字体大小/行高 字体族 后面两个属性的位置必须在倒数二个

举例：

div{

    font:italic/*font-style*/ bold/*字重font-weight*/  50px/2 'Consolas', Times, serif;

}

文本样式

  • 文本的水平对齐(text-align)：left/right/center/justify，其中justify为两端对齐

  • 元素垂直对齐方式(vertical-align)：其可选值有：

    • baseline ：默认值 基线对齐
    • top ：顶部对齐(子元素的顶部和父元素的顶部对齐)
    • bottom ：底部对齐
    • middle ：居中对齐 (子元素的中线与父元素的x的中线对齐)

    由于图片默认会与基线对齐，然而图片的基线并不是在边框最底部的，视觉上能看到缝隙，需要设置顶部对齐或底部对齐

  • 其他文本样式

    text-decoration设置文本修饰，可选值：

    • none
    • underline：下划线
    • line-through：删除线
    • overline：上划线

    white-space 设置网页如何处理空白，可选值:

    • normal ：正常
    • nowrap ：不换行
    • pre：保留空白（不会过滤空白符，保留原格式）

实例：给长文本尾部带上省略号，下面样式缺一不可：

.box2{

    width: 200px;

    white-space: nowrap; /*不换行*/

    overflow: hidden; /*裁剪*/

    text-overflow: ellipsis; /*文本溢出的样式，ellipsis省略号*/

}

CSS3 学习笔记（上）的更多相关文章

  1. CSS3学习笔记(3)-CSS3边框

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. CSS3学习笔记之linear-gradient

    我觉得CSS3很不错,自己也稍微看过,并且尝试过一些属性.对我自己而言,我没有勇气说我学过CSS3,我觉得任何自己看来很小的事情,也只是站在自己的角度来评判.就算的是"简单的"HT ...

  3. Zookeeper学习笔记(上)

    Zookeeper学习笔记 本篇主要是一些基本的介绍和API的使用介绍, 有些只是记录了知识点,而没有完全在笔记中详细解释, 需要自行查找资料补充相关概念 主要参考了课程中的内容: Zookeeper ...

  4. 十天精通CSS3学习笔记 part2

    第6章 征服CSS3选择器(上) 属性选择器 在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS ...

  5. CSS3学习笔记1-选择器和新增属性

    前言:之前自学了一些关于CSS3的知识,在学习过程中也遇到过坑,不过总算磕磕绊绊的学习完了关于CSS3的相关知识,于是最近把之前的笔记和代码整理了一下,也算是一个对CSS3知识的回顾复习吧,也希望能够 ...

  6. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

  7. HTML5+CSS3学习笔记（一）

    HTML5+CSS3概述 HTML5和CSS3不仅仅是两项新的Web技术标准,更代表了下一代HTML和CSS技术.虽然HTML5的标准规范还没有正式发布,但是未来的发展前景已经可以预见,那就是HTML ...

  8. Bootstrap学习笔记上（带源码）

    阅读目录 排版 表单 网格系统 菜单.按钮 做好笔记方便日后查阅o(╯□╰)o bootstrap简介: ☑  简单灵活可用于架构流行的用户界面和交互接口的html.css.javascript工具集 ...

  9. css3学习笔记三

    css3有些特殊的元素选择器这和jquery相似.效果图如下

随机推荐

  1. confluence 4.2 升级至 6.10.x 记录

    confluence 4.2 升级至 6.10.x 记录 首先将线上环境中的 confluence 安装目录.数据目录以及数据库进行备份,相关信息如下: 安装目录:/opt/atlassian/con ...

  2. MySQL全面瓦解4：数据定义-DDL

    前言 SQL的语言分类主要包含如下几种: DDL 数据定义语言 create.drop.alter 数据定义语言 create.drop.alter 语句 . DML 数据操纵语言 insert.de ...

  3. LuoguP4704 太极剑

    题面 测试要求 Bob 尽可能快地切断 n 根绳子. 所有绳子的端点两两不同,所以共有 2n 个端点.这些端点被捆在一个圆上,等距离分布.我们把这些端点按顺时针方向编号为 1 到 2n. Bob 每次 ...

  4. day80:luffy:短信sdk接入&点击获取验证码&注册功能的实现&Celery实现短信发送功能

    目录 1.短信sdk接入 2.前端点击获取验证码效果 3.注册后端接口实现 4.注册-前端 5.Celery 6.Celery完成短信发送功能 1.短信sdk接入 1.准备工作 1.下载云通讯相关的文 ...

  5. WC2019 填坑记

    2019年1月8日 1.Luogu P2147 [SDOI2008]洞穴勘测 (LCT模板题&LCT学习) 2019年1月9日 2.LuoguP3203 [HNOI2010]弹飞绵羊  (LC ...

  6. [Luogu P4147] 玉蟾宫 (网格DP)

    题面 传送门:https://www.luogu.org/problemnew/show/P4147 Solution 裸的求极大子矩阵 感谢wzj dalao的教学 首先,有一个很显然但很重要的结论 ...

  7. python100实例

    实例001:数字组合 题目 有四个数字:1.2.3.4,能组成多少个互不相同且无重复数字的三位数?各是多少? 程序分析 遍历全部可能,把有重复的剃掉. total=0 for i in range(1 ...

  8. Git撤销文件修改

    在旧版本中,git的撤销工作区的文件修改是用git checkout -- <file>命令,由于容易漏了--导致和切换分支混肴,所以新版本中: - 使用git restore (--wo ...

  9. 【SpringBoot】10.SpringBoot文件上传

    SpringBoot整合Thymeleaf 1.创建Thymeleaf的入门项目 maven构建简单项目 修改pom文件添加thymeleaf的坐标 <!-- thymeleaf的坐标 --&g ...

  10. HTML+JavaScript实现一个简单抽奖功能

    为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧:点击抽取就可以抽 ...