Css普通用法

这是一个链接 W3C，用这个语法可以访问W3C,自己可以去看更加详细的内容。

基本语法

名字{
类型：参数
类型：参数
}

a{
color:blue
}

引入方法

直接在html之中进行带入到html代码之中，文件不需要重新写一个，用

或者是书写一个.css文件之中，然后加一个引用到整个文件之中。

第一个的优先级最高，第一个与第二个同时使用，第一个为主。

<link rel = "stylesheet" herf = "路径">

路径：寻找直接路径或者间接路径

下面就是*.ccs里面写的内容

qw{
  color:red;
  weight:80px;
  height:80px;
}

选择器

基础选择器

标签选择器

<style>
q{
  填不同的属性
}
</style>

类选择器(class)

.bule{
	属性
}

以 .名称 开通的叫做类选择器，用class进行调用。一个标签可以调用多个类选择器（中间用空格隔开），提取相同的属性元素，用到这个内容之中。一个类可以被等多个标签调用。

<div class = "blue red"><div>

这里共同调用了blue和red这个类。

id选择器

#m{
  属性
}

用 #名称 开头，用id进行调用，一个id只能被一个标签调用

<div id = "id_name">
  内容
</div>

通配符选择器

<style>
  *{
  属性
}
</style>

整个页面都会被改成目前这个格式，不需要进行调用。

复合选择器

这里不进行讨论

常用的元素属性

字体属性

设置字体类型

test{
  font-family= "";
}

设置字体大小

p{
	font-size:80px;
}

设置字体粗细

这里可以用normal和bold代替使用

p{
  font-weight = 800;
}

文字样式

p{
  font-style:italic
}

这里可以使用normal代替，就不会出现倾斜的内容

文本属性

文本颜色设置

p{
  color:
}

这里有不同的设置方法，可以通过选色器进行选择不同的内容！

文本对齐

p{
  text-align:
}

left(左),right（右）,center（中）

文本装饰

p{
  text-decoration:
}

underline 下划线.none 啥都没有. 可以给 a 标签去掉下划线. overline 上划线. line-through 删除线

​

文本缩进

p{
  text-indent:
}

首段缩进，后面直接接上缩进的大小，单位px或em。一般使用em，单位为目前字体的字符数。

​

背景属性

背景颜色

p{
  background-color:
}

与字体颜色差不多的设置方法。transparent(透明的)

背景图片

p{
  background-img:url()
}

这里可以放是绝对路径, 也可以是相对路径，也可以是网络路径

p{
  background-repeat:[ ]
}

不同的拼平铺方式

no-repeat: 不平铺

repeat-x: 水平平铺

repeat-y: 垂直平铺

背景位置

p{
  background-imge：url()
  bcakground-position:
}

这里有精确的位置，也有top, left, right, bottom一些方位词！

浏览器打开调试工具

打开浏览器，然后用Fn+F12（或者直接点击页面，出现坚持元素）

元素： 查看标签结构

控制台： 查看控制台（主要用于JavaScript调用内容的查看）

来源： 查看源码+断点调试

网络： 查看前后端交互过程

应用：查看浏览器提供的一些扩展功能(本地存储等)

Performance, Memory, Security, Lighthouse 暂时不使用, 先不深究

元素的显示模式

块级元素，行内元素

块级元素独占一行, 行内元素不独占一行

块级元素可以设置宽高, 行内元素不能设置宽高.

块级元素四个方向都能设置内外边距, 行内元素垂直方向不能设置

其他不介绍了

盒模型

整个html模型都是一个盒子模型，内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，

粗细: border-width

样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

具体的目前用Vue进行操作，后面的不同在现在的问题讨论