回忆系列之css fourday

用户1774600246736
250 阅读10分钟

无意义的标签

  • div，无意义的块状元素标签。
  • span，无意义的行内元素标签。

CSS

CSS（层叠样式表），主要用来控制网页的样式、布局。CSS是能够让样式、布局和标记分离的标记性语言。

CSS基本语法

选择器{
	属性1:值1;
  	属性2:值2;
  	属性3:值3;
}

选择器{属性1:值1;属性2:值2;属性3:值3;}
  • 选择器：告诉浏览器应该将这些值应用到那些元素上面。（选择）
  • 声明：告诉浏览器如何渲染指定的对象。
    • 属性：这些属性名是CSS预定义的，属性名由一个或多个单词组成。
    • 值：就是写在属性后面的参数。

__注意： __

  1. 每一对声明之间使用分号分隔（最后一对可以不加分号，但是强烈建议你加上）。
  2. web浏览器会忽略空格和回车。
  3. 声明和声明之间不要横着写成一行。

选择器：HTML标签选择器：用标签名作为选择器来使用。

属性：

  • font-size:value，设置字体的大小，单位是px。
  • color:value，设置字体的颜色。
div{
    font-size:12px;
    color:green;
}

CSS中的颜色

  1. 颜色关键字 red green blue yellow

  2. 十六进制的数字。总共6位，每两位一组（红、绿、蓝）#F8F8F8

    可以简写，如果三组中每两位的值都是相同的那这个时候可以使用简写。

    #6600ff可以简写为#60f

    #ff4400可以简写为#f40

    #ff4200不可以简写，因为其中有一组的两位不是完全一样的。

  3. rgb颜色值，格式为：rgb(红,绿,蓝)，每一位的取值范围为0~255。rgb(248,248,248)

  4. rgba颜色值，格式为：rgba(红,绿,蓝,透明度)，透明度的值在0~1之间，0为完全透明，1位不透明。值越大透明度越低。0.5可以写为.5。1.5

CSS的使用方式

  • 内联方式：在HTML标签中使用style属性设置CSS样式。

    格式：<标签名 style="属性1:值1;属性2:值2....."></标签名>

    特点：仅是作用于本标签。对于其他的标签没有什么影响。

  • 内嵌方式：在head标签中使用style标签。

    格式：

    选择器{
	属性1:值1;
  	属性2:值2;
  	属性3:值3;
}

    特点：作用于当前整个页面。

    注意：

    1. 声明css时不需要包含type属性，以前是要包含的。完整的格式：<style type="text/css">
    2. 最后一个声明规则不用加上分号，但是强烈建议你加上分号。

  • 外部导入方式：<link />

    把其他的文档与当前的文档关联起来。

    通过link标签链接的样式表不是HTML文档的一部分，但是可以供HTML使用。

    <link />标签要放在<head>中。

    格式：<link href="文件名.css" type="text/css" rel="stylesheet"/>

    • href：链接的文档来自于哪里。
      • 链接的文档的扩展名为.css。
      • 链接的这个文件中不能包含其他的代码，只能包含CSS样式。
    • rel：relation（关系），当前的文档与被链接文档之间的关系。
    • type：规定被链接的文档的MIME类型。可以理解为加载的数据类型。

上面三种方式，当样式冲突的时候，采用就近原则。哪个属性样式离被修饰的内容近就使用哪个。如果没有样式冲突则采用叠加效果。

CSS特性

  • CSS的继承性：被包含的元素的拥有外层元素的样式效果。（有些属性可以被继承，有些属性不能被继承。）
  • CSS的层叠性：CSS样式允许重复声明，相互覆盖。

CSS注释符

/*
要注释的内容
*/

选择器

  • 标签选择器，直接使用标签的名字作为选择器，它可以选择指定标签选择器指向的所有标签。

  • *，通用选择器，选择所有的HTML标签。它的目标就是所有。

  • 类选择器

    类：具有相同的特征的一些事物。

    • 类选择器以一个.开头，然后后面是你跟随的类的名字。
    • 在HTML中需要为标签定义class属性来实现。

    __注意： __

    1. 类名区分大小写。

    2. 可以使用标签名.className选择只具有className的标签。

      p.test{
  color:red;
}

      上面的代码实际上指的就是我要选择p标签并且p标签要具有test这个类。

    3. 一个标签中可以有多个类。

    4. 既然一个标签可以有多个类，那我在写CSS的时候也可以使用多个类来进行限制。

      .test.test1{
  color:red;
}

      上面的代码的意思：我要选择一个标签，这个标签要同时具有test和test1这两个类，只具有一个不会被选中。

  • chrome浏览器调试工具。

2021-03-29_113349.png

  1. 打开调试器

    按F12或右键->检查

  2. 常见错误

    1. 让已注释的代码生效，方便调试。注释掉的代码默认时会有一个贯穿线表示已经注释掉。

2021-03-29_113632.png

 2. 无效的属性名或属性值在调试器中的表示。

2021-03-29_113822.png

 3. 缺少分号的表现

2021-03-29_113822.png

 4. 暂时的调试元素的css

    在element.style中添加暂时调试的代码。

2021-03-29_114123.png

 5. 默认样式

2021-03-29_114316.png

 6. 继承自哪里

2021-03-29_114430.png

  • ID选择器

    给HTML标签一个ID属性然后给他一个自定义的值，在CSS中使用#自定义的值来作为选择器。

    1. ID应该具有唯一性，在一个HTML文档中，一个ID的值能且只能出现一次（出现多次就失去他的意义了）。
    2. ID的值严格区分大小写。
    3. 类型选择器相当于名字。ID选择器相当于身份证号。

  • 组合选择器

    选择器1,选择器2,选择器3......

  • 后代选择器

    E F，后代选择器，选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内。

    __注意： __

    1. 后代选择器两个或多个选择器之间必须以空格隔开，中间不能有任何其他符号插入。
    2. 后代选择器之间的层级关系间隔可以是无限的。儿子、孙子、重孙、曾孙、玄孙。。。。。。。

  • 链接伪类选择器

    链接伪类选择器只针对于HTML标签中的a标签。它只有两种状态：已访问、未访问。

    • a:link，匹配a标签，且a标签被定义了超链接（具有href属性）并且没有被访问过。
    • a:visited，匹配a标签，且a标签定义了超链接已经被访问过。

    访问过之后就已经在浏览器的历史记录中了，再打开也是访问过。

    不同的浏览器是不同的历史记录。

    chrome中如果要清除浏览记录可以使用ctrl+shift+del来清除。

  • 动态伪类型选择器

    • E:active，选择匹配的E元素，且匹配元素被激活。一般被用在a链接和button按钮。
    • E:hover，选择匹配的E元素，且用户鼠标停留在元素E上。

    background-color设置背景颜色。

    在a链接上面同时使用link、visited、active、hover的时候需要注意一个顺序：爱恨原则:LoVe/HAte，Link -> Visited -> Hover -> Active

权重值

同一个元素可能会被多个选择器选择，他们又应用了相同的规则，这个时候就会产生冲突，这个时候要计算权重值。

  • 行内样式权重为1000
  • ID选择器100
  • 类、伪类选择器10
  • 标签选择器1
  • 通用选择器0

注意：

  1. 数值越大，权重越高。
  2. 权重值相同最后一个胜出。
  3. 如果要忽略权重值时，需要在后面加上!important，能少用就少用。

字体

字体：字体是文字的外在的特征，是文字的风格，是文字的衣服。

我们的字体存储在C:\Windows\Fonts

字体分为免费使用和商业使用。

字体的组成

我们认为的字体可能不是单纯的一个字体，而是由许多字体变形组成。变形的字体用来描述粗体、斜体。所以我们电脑里面安装的字体有可能是一个字体族。

字体的类型

https://zhuanlan.zhihu.com/p/101958223

大致可以分为5类：

  1. 衬线字体。衬线字体笔画开始、结束的地方有额外的装饰而且笔画的粗细有不同。宋体。
  2. 非衬线字体。没有额外的装饰，粗细差不多。
  3. 等宽字体。一般是针对英文字母说的，所谓的等宽就是每个英文字母占据同等的宽度。 i M
  4. 手写字体
  5. 奇幻字体

字体系列

格式：font-family:字体名

注意：

  1. 常见的中文字体在设置的时候可以使用类似宋体这样的中文名字，但是为了规避乱码的风险那我们会使用它的英文名字SimSun
  2. 如果字体的英文名字里面包含空格那么这个时候你应该使用引号将这个字体名包起来。
  3. 可以设置多个字体，多个字体按照优先顺序排列。在定义的列表中按照从左到右的顺序依次进行检索，先检索到谁就使用谁。
  4. 如果到最后都没有找到则将使用浏览器默认的字体。

字体大小

我们前面使用的时候并没有给字体设置大小，那这个时候使用的是默认的字体大小，一般浏览器是16px，我们也称为它是基准文本尺寸。

格式：font-size:value

  • px，像素。

    网页中的最小的字号一般会设置为12px。

  • %，根据从父元素继承下来的字体大小来进行计算。

  • em，相对于父元素继承下来的大小来计算1em=100%

  • rem，它的值基于根元素（html标签）的文本尺寸来设定。

字体粗细

格式：font-weight:value

  • normal，正常字体。

  • bold，粗体。

  • bolder，更粗。

  • lighter，更细。

  • 100~900，使用100~900作为关键字是因为通常字体或字体族都映射了9级的粗细。

    100~900有没有效果要看这个字体族是否安装全了各种各样的变体。（是否映射全了9级字体粗细）

    实际上这些字体没有固定的加粗程度，有可能100、200、300都是相同的粗细、500、600是相同的粗细。在CSS规范中规定只要一个关键字对应的变形不比前一个关键字更细都是允许的。

    如果没有安装粗细，浏览器自动计算，生成粗体。

字体风格

格式：font-style:value

  • normal，正常的字体。
  • italic，斜体。

字体简写格式

格式：font:style weight size family

__注意： __

  1. font-style和font-weight的顺序可以颠倒。
  2. font-size和font-family的顺序不能颠倒并且font声明中的值必须有这两个值。否则整条规则失效。

字体颜色

格式：color

下划线

格式：text-decoration:value

  • none，标准文本，没有下划线。
  • underline，下划线。
  • overline，上划线。
  • line-through，贯穿线

可以使用多个值： text-decoration: line-through underline overline;

字符间距

letter-spacing，定义字距。

  • px，像素。
  • normal，等同于letter-spacing:0;
  • em，按照当前字体大小来进行计算。
avatar
文章
阅读
粉丝