CSS基础（1）

使用CSS

CSS 是什么

CSS 层叠样式表，是一种样式表语言，用于设置网页设计风格和布局，简单来说就是让页面变得更好看。

CSS基本语法

由选择器、块包裹的property:property-value的声明，表示某个元素对应的一个或多个属性值，属性之间用;隔开。

展示：

CSS使用方式

行内样式

在元素中使用style属性值由;分割。这里表示div元素的字号20像素，颜色为红色。

<div style="font-size: 20px; color: red">行内样式</div>

展示：

内部样式

内部样式写在head元素中，由style元素包裹表示是该网页的样式。

  <head>
    <title>网页</title>
    <style type="text/css">
      div {
        font-size: 20px;
        color: red;
      }
    </style>
  </head>

外部样式

外部样式使用link元素，通过href属性链接到样式表文件来使用，rel属性表示该引用的文件是什么。

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

基础选择器

作用：查找相应的元素，设置目标元素的样式

标签选择器

使用标签名作为选择器，选择同名的标签设置相同样式。

下面使用标签选择器，设置div元素的字体和颜色。

div {
  font-size: 20px;
  color: red;
}

类选择器

类选择器根据class属性匹配相应的元素。

定义类选择器 .类名
使用类选择器元素添加属性class="类名"

 <div class="text">行内样式</div>

.text {
  font-size: 20px;
  color: red;
}

注意点：一个类选择器可以给多个元素使用，一个元素可以使用多个类名，类名之间用空格隔开。

ID选择器

id选择根据id属性匹配相应的元素，同一个id选择器在页面中只能使用一次。

定义id选择器#id名
使用id选择器的元素添加属性id=id名

<div id="text">行内样式</div>

#text {
  font-size: 20px;
  color: red;
}

通配符选择器

通配符选择器查找页面所有标签，设置相同的样式，一般用于清除标签的默认样式（内、外边距）。

* {
	color: red;
}

盒子尺寸和背景

在之前知道div块级元素盒子是宽度默认占一行的，高度默认是根据内容来确定的。现在可以通过css来设置盒子的尺寸和背景。

width 宽度
height 高度
background-color 背景颜色

#text {
  width: 100px;
  height: 100px;
  background-color: red;
}

展示：

上面实现了一个100*100的盒子，并且背景颜色是红色，该图是通过F12开发者工具，菜单栏最左边的选择元素按钮选择元素后显示的结果。

展示：

常用样式

文本样式

属性关键字	属性值	说明
font-size	`font-size: 18px;`	表示文字大小为`18`像素，常用单位`px`像素
font-family	`font-family: sans-serif;`	表示字体为`sans-serif`无忖线字体。可以设置多个值，多个值之间用`,`分割，特殊字符使用`''`来包裹。
font-style	`font-style: none;`	表示文本的样式，属性值`normal`正常、`italic`倾斜。
font-weight	`font-weight: 400`	表示文本的粗细，属性值`400`、`500`、`700`等。
text-indent	`text-indent: 2em`	表示文本的的缩进量，属性常用值`2em`（这里的`em`代表当前元素的字号大小）
text-decoration	`text-decoration:none`	文本的修饰线，常用值`none、underline（下划线）、line-through（删除线）`，一般用于清除`a`标签的下划线。
text-transform	`text-transform:lowercase`	可以转换原本的文字，常用的值`uppercase`大写、`lowercase`小写、`none`无。
text-align	`text-align:center`	文字的水平对齐方式，常用值`center`用来水平居中文本。一般给设置内容的父容器该属性。
line-height	`line-height: 2`	设置多行文本的的间距，`行高=上间距+文本高+下间距`，属性值有两种表示法：px像素，纯数字（当前字体大小倍数；常用于单行文字垂直居中，设置行高等于容器的高度。
	小记	文本样式可以被继承，子级默认继承父级的文字控制属性

颜色

在CSS中可以通过关键字、rgb、十六进制、HSL等方法设置颜色，在vscode中可以将鼠标移到颜色上会有一个颜色拾取器可以改变颜色。

颜色表示方法	属性值	说明
rgb	`rgb(r,g,b)`	r,g,b表示红绿篮三原色，取值：0~255
rgba	`rgb(r,g,b,a)`	a表示透明度，取值：0~1 可以为小数
十六进制	`#rrggbb`	#ffffff、#ffdd33，简写三组两个相同的可以简写成一个 #fff、#fd3
关键字	`颜色英文单词`	green、red、blue

背景

用来设置容器的背景效果。

表示方法	属性值	说明
background-image	`background-image:url()`	背景图，默认`平铺`
background-repeat	`background-repeat: no-repeat`	图片大小小于容器时复制效果，`repeat-x`、`repeat-y`
background-position	`background-postion: top`	背景图的初始位置
background-size	`background-image:cover`	背景图片的大小，cover等比例缩放图片完全覆盖背景区，可能导致的图片部分看不见，contain等比例缩放图片完全装入背景区，可能会导致背景区部分空白，还可以写百分比、数字+单位

其他选择器

后代选择器

选中某元素的后代元素，语法父选择器子选择器{css属性}，父子选择器之间使用空格隔开。

    <div id="text">
      <p>
        2024无畏契约冠军巡回赛CN联赛
      </p>
      <div>
        <p>这也是后代</p>
      </div>
    </div>

#text p {
  font-size: 20px;
  color: white;
}
/* 表示#text选择器的所有后代p元素的样式 */

子代选择器

选中某元素的子元素（直接子关系），语法父选择器 > 子选择器 {css属性}，父子选择器使用>大括号隔开。

#text > p {
  font-size: 20px;
  color: white;
}

并集选择器

同组选择器使用相同的样式，语法选择器1，选择器2，选择器N{css属性}，选择器之间使用,逗号隔开。

div,p,span {
  color: white;
}

交集选择器

选中同时满足多个条件的元素，语法选择器1选择器2{css}属性，选择器连写，没有任何符号。如果交集选择器有标签选择器，则标签选择器需要写在前面。

<p class="son">这也是后代</p>

p.son {
  font-size: 20px;
}
/*选中具有son类选择器的p元素*/

伪类选择器

选择元素的特定状态或条件，语法选择器:xxx，伪类选择器通常设置超链接时的状态。

a:link访问前
a:visited访问后
a:hover鼠标悬停
a:active点击时

一般a:link,a:visited一起用，a:hover,a:active一起使用。

a:link,
a:visited {
  color: antiquewhite;
}

其他常用伪类：

:first-child选择父元素的第一个子元素
:last-child选择父元素的最后一个子元素
nth-child(n)选择器父元素的第n个子元素，属性值odd奇数、even偶数、An+B 表示元素在兄弟元素列表中的位置是元素（A整数步长，B整数偏移量，n从0开始的所有非负整数
:not(selector)选择不匹配指定选择器的元素

p:nth-child(2n+1) {
	color: red
}
/*选择父元素所有为奇数的p元素*/

属性选择器

选择具有特定属性或属性值的元素，语法选择器[xxx条件]，常用的有三种：

[attr]表示有以attr命名的属性的元素
[attr=value]表示带以有attr命名的属性，且属性值为value的元素
[attr~=value]表示带以有attr命名的属性，并且该属性值有多个，其中至少一个值为value

a[target="_blank"] {
  font-size: 30px;
}

Emmet语法

在vscode代码编辑器中写html、css代码可以使用该语法，输入缩写自动提示相应的的代码，按tab键完成填充来提高代码的编写速度。

HTML元素

说明	元素	Emmet语法
id选择器	`<div id='container'></div>`	`标签名#id名`
类选择器	`<div class='left'></div>`	`标签名.类名`
兄弟元素	`<p></p><img />`	`p+img`
父子元素	`<div></div><h3></h3>`	`div>h3`
多个相同元素	`<li></li><li></li><li></li>`	`li*3`
有内容的标签	`<p>内容</p>`	`p{内容}`
提示：	多个语法还可以一起使用 `div>p.left{我是p}`

CSS样式

大多数简写方式为属性单词的首字母

说明	CSS属性	Emmet语法
高度	`height`	`h`
宽度200px	`weight: 200px`	`w200`
字体	`font-family: xxx`	`ff`
多个属性	`width:100px;height:100px;background-color:#fff`	`w200+h100+bgc`

CSS基础学习之使用