前端-css学习笔记

2023-12-04 16:30:29

CSS

CSS，它代表(Cascading Style Sheets)层叠样式表。

使用< style >标签为元素定义CSS样式

style可以定义在开头，也可以定义在标签内

在代码的顶端，创建一个如下所示的style元素：

<style>
</style>

所有的h2元素都设置为红色

<style type="text/css">
  h2 {
    color: red;
  }
</style>

普通文本内容

<h2>h2文本内容,<span>h2内span文本</span></h2>

使用 class 选择器设置样式

CSS 的class具有可重用性，可应用于各种 HTML 元素。

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">兔子</h2>
<p class="blue-text">小兔子是很可爱的动物</p>

在<style>样式声明区域里，创建了一个名为blue-text的class选择器。

blue-text 会选择所有HTML元素的class属性包含 blue-text 的元素

注意：在style样式区域声明里，class需以.开头。而在 HTML 元素里，class属性的前面不能添加.。

设置字体大小

在CSS中，通过 font-size 属性来设置元素中所包含文本的字体大小。

如果一个元素没有显式定义font-size属性，则会自动继承父元素的 font-size属性的计算结果。

预定义关键字

有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按顺序依次增大，类似于衣服的尺寸。

绝对尺寸

有px（像素）、pt（点，1pt 相当于 1/72in）、in（英寸）、cm（厘米）、mm（毫米）等。

相对尺寸

有 em、%、rem，它们都是相对于某个参考基准的字体大小，来计算当前字体的大小，只是参考基准不同而已。

h1 {
  font-size: 32px;
}

设置元素字体

通过font-family属性，可以设置元素里面的字体样式。

font-family 可以把设置多个字体名称。如果浏览器不支持第一个字体，则会尝试下一个。

设置h2元素的字体为sans-serif，你可以用以下的 CSS 规则：

h2 {
  font-family: sans-serif;
}

引入外部字体

除了大多数系统提供的默认字体以外，我们也可以使用自定义字体。

我们可以通过在 CSS 里面设置字体的 URL 来引用。

例如,我们需要引入Lobster字体。

将下代码段放到style标签之前。

<link href="https://fonts.loli.net/css?family=Lobster" rel="stylesheet" type="text/css">

字体名区分大小写，并且如果字体名含有空格，需要用引号括起来。

例如：使用"Open Sans"字体需要添加引号，而Lobster字体则不需要。

调整图片大小

CSS 的width属性和 height属性可以控制元素的宽度和高度。

<style>
  .larger-image {
    width: 400px;
    height: 400px;
  }
</style>

给元素添加边框

可以使用 border 属性将边框样式,颜色,和宽度一起设置。

如果不设置其中的某个值，也不会出问题，比如border: solid #ff0000; 也是允许的。

<html>
<head>
<style type="text/css">
  p {
    border:5px solid red;
  }
</style>
</head>

<body>
<p>Some text</p>
</body>

</html>

记得在一个元素上可以同时应用多个class，通过使用空格来分隔。

例子： <img class="class1 class2">

使用border-style属性设置边框样式

边框样式属性指定要显示什么样的边界。

除了在 border 属性里面设置边框样式，

还可以使用border-style属性来定义边框的样式

border-style 值

属性	效果
none	无边框
dotted	虚线边框
dashed	虚线边框
solid	实线边框
double	双边框
groove	凹槽边框
ridge	垄状边框
insert	嵌入边框
outset	外凹边框
hidden	隐藏边框

.img-border {
    border-style:dashed;
}

使用border-color属性设置边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色：

name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为 "transparent"(继承父亲)。

注意：

border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。

.img-border {
    border-style: dashed;
    border-color:blue;
}

使用border-width属性设置边框宽度

通过border-width属性为边框指定宽度。

为边框指定宽度有两种方法：

可以指定长度值，比如 2px，

或者使用关键字 thick 、medium（默认值）和 thin。

注意：

CSS 没有定义 3 个关键字的具体宽度，

所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，

而另一个用户则分别设置为 3px、2px 和 1px。

使用 border-radius 添加圆角边框

border-radius属性允许你为元素添加圆角边框。

使用 border-radius 制作圆形图片

除像素外，border-radius 属性也支持使用百分比的值。

将.smaller-image 的宽度和高度设置成一致, 当 border-radius:50%; 时得到圆形图片,

给元素添加背景色

background-color属性可以设置元素的背景颜色。

元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

例如:

<style> 
.green-background {
  background-color: green;
}
</style>

<div class="green-background">设置背景色为绿色</div>

给元素设置ID属性

每一个 HTML 元素都可以具有 id 属性。

id 属性规定 HTML 元素的唯一的 id。

id 属性是唯一的。虽然浏览器不会强制唯一，但这是被广泛认可的。

id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。

例如:

<h2 id="rabbit-photo-app">...</h2>

使用 id 属性设定元素样式

和class一样，也可以使用 id 属性设定元素样式，

并且id不可以重用，只应用于一个元素上。

在 CSS 里，id的优先级要高于class，如果一个元素同时应用了class和id，并设置样式有冲突，会优先应用id的样式。

注意:

在声明 id 的时候，必须在名字前插入#符号。

设置元素边距

所有的 HTML元素基本都是以矩形为基础。

每个 HTML 元素周围的矩形空间由三个重要的属性来控制：

padding：内边距

margin：外边距

border：边框

padding控制着元素内容与border之间的空隙大小。

margin（外边距）属性控制元素的边框与其他元素之间的距离。

margin可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。

使用padding、margin设定不同的内边距

方向为顺时针

使用属性选择器设定样式

除了 ID 选择器和 Class 选择器,另外，也还有属性选择器，可以让我们给特定的元素设置样式。

语法:

[属性名 过滤符号 属性值] {}

下面的代码会改变所有元素中包含type属性且值为radio的元素的外边距。

[type='radio'] {
  margin: 20px 0px 20px 0px;
}

相对单位和绝对单位

绝对长度单位, 会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，可能会导致一些误差。

相对单位长度，就像em和rem，它们会依赖其他长度的值。

例如, em的大小基于元素的字体的font-size值，

如果你使用em单位来设置font-size值，它的值会跟随父元素的font-size值来改变。

CSS样式表继承

要想了解css样式表的继承，我们先从文档树（HTML DOM）开始。文档树由HTML元素组成。

CSS样式表继承指的是，特定的CSS属性向下传递到子孙元素。

不是所有的css属性都会被子类继承，例如border属性。

<style>
p { color:red; }
</style>

<p>
CSS样式表<em>继承特性</em>的演示代码
</p>

在浏览器中p和 em 字体同时变红。

我们并没有指定em的样式，但em继承了它的父亲元素p的样式特性。

样式中的优先级

CSS 优先规则1： 最近的祖先样式比其他祖先样式优先级高。

CSS 优先规则2："直接样式"比"祖先样式"优先级高。

**CSS 优先规则3：**优先级关系：内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器

**CSS 优先规则4：**属性后插有 !important 的属性拥有最高优先级。

**CSS 优先规则5：**第二个声明始终优于第一个声明。

意味着，如果发生冲突，浏览器将会应用最后声明的样式。

Class 选择器的优先级高于继承样式

ID 选择器优先级高于 Class 选择器

内联样式(标签内的style)的优先级高于 ID 选择器

Important 的优先级最高

p {
    color: red !important;
}

使用十六进制设置颜色

在 CSS 里面，我们可以用使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R），绿（G），蓝（B）。

例如，#000000代表着黑色，同时也是最小的值。

CSS 十六进制编码颜色也支持缩写的方法。

例如，红色的#FF0000十六进制编码可以缩写成#F00。

使用 RGB 值设置颜色

通过使用 RGB 值设置背景颜色为橘色的例子：

body {
  background-color: rgb(255, 165, 0);
}

使用 CSS 变量更改多个元素样式

var() 函数用于插入自定义的属性值。

var(custom-property-name, value)

custom-property-name 是必需的, 自定义属性的名称，必需以 – 开头。

value 可选。备用值，在属性不存在的时候使用。

:root {
  --main-bg-color: coral;
  --main-txt-color: blue;
  --main-padding: 15px;
}
 
#div1 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}
 
#div2 {
  background-color: var(--main-bg-color);
  color: var(--main-txt-color);
  padding: var(--main-padding);
}

创建一个自定义的 CSS 变量

创建一个 CSS 变量，只需要在变量名前添加两个破折号，并为其赋值

例如：

--penguin-skin: gray;

使用一个自定义的 CSS 变量

创建变量后，CSS 属性可以通过引用变量名来使用它的值。

例如:

background: var(--rabbit-basecolor);

变量不生效时设定默认值

当变量因为某些原因导致变量不生效, 可以设置一个备用值。

示例：

background: var(--penguin-skin, black);

这样，当变量有问题的时候，它会设置背景颜色为黑色。

CSS 变量继承

CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。

:root 是一个 pseudo-class 选择器匹配文档的根选择器，通常指 html 元素。

通过在 :root 里创建变量，变量在全局可用，以及在 style样式的选择器里也生效。

更改特定区域的变量

当你在:root里创建变量时，这些变量的作用域是整个页面。

如果在元素里创建相同的变量，会重写:root变量设置的值。

例如：

:root{
    --rabbit-color: red;
}

p {
    --rabbit-color: white;
    background: var(--rabbit-color);
}

码农公寓

CSS