CSS3 学习笔记（上）

一、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省略号*/
}

posted @ 2020-08-19 17:00  J_StrawHat  阅读(97)  评论(0)  编辑  收藏  举报