html 和css基础常用的标签和样式（2）-css

1.css三种引入方式：

1.第一种，内联，也就是也在标签里面。（一般不用）

2.第二种，内部，也就是写在style中。（一般不用）

3.第三种，外部，也就是单独创建一个css文件，把样式写里面。（常用）

2.css的引入具体实现：

1.内联样式：（写在style后面，单独写）

html 复制代码

<p style="color: red; font-size: 14px">我是一个p标签</p>

2.内部样式：写在head的中间

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    /* 样式写在这里 */
</style>
</head>
<body>
    
</body>
</html>

3.外部样式：单独写一个css文件，用link引入，在href中写css的文件名

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>

<body>
    
</body>
</html>

3.关于css中的常用属性：

px：长度，也就是1个像素。

em：比如上面有一个属性是2px，你1em也就是2px。

src：也就是文件的路径url。

color：颜色，可以reg 和16进制写法

font-size:字体大小

background-color：背景颜色

height：高度，一般用在块标签中

width：宽度，也一样

color - 文字颜色

font-family - 字体

font-size - 字体大小

font-weight - 字体粗细

font-style - 字体样式（斜体等）

line-height - 行高

text-align - 文本对齐

text-indent - 首行缩进

letter-spacing - 字母间距

word-spacing - 单词间距

text-transform - 文本转换（大小写）

列表相关

list-style-type - 列表标记类型

list-style-position - 列表标记位置

其他

visibility - 可见性

cursor - 鼠标光标

visibility - 可见性

cursor - 鼠标光标

不会继承的样式（常用）

盒模型相关

width / height - 宽高

margin - 外边距,外填充

padding - 内边距,内填充

border - 边框

background - 背景

display - 显示方式

定位相关

position - 定位方式 (float / absolute / relative / flex)

top / right / bottom / left - 定位位置

float - 浮动

clear - 清除浮动

其他

overflow - 溢出处理

z-index - 层级

opacity - 透明度

4.关于选择器：

基础选择器
关系选择器
属性选择器
伪类选择器
通配符选择器

基础选择器：

class=A id = B 元素 div

1.用点A，.A{} 就是类选择器，

2.用#B，则#B{}就是id选择器

3.直接用div，就是div{}选择器

关系选择器：

1.用div.A{} 就是交集

2.用逗号连接的比如：A , div.A {} 并集选择器

3.后代选择器：如果A 中包含B ，用 .A B {}

4.亲子选择器：.A>B{}

5.关于块级元素

常见的块级元素有：body，div，p，h1~h6，ul，ol，li，pre等

就是块级元素，会独占一行，其他元素没办法加到他们后面，但是可以设置宽高等填充

常见的行内元素有：a，span 等，可以加在后面但是没办法变大，加宽

通过display:inline可以将元素显示设置为内联元素，如下的代码就是将块级元素div转成内联元素，从而使div元素具有内联元素的特点（这个是重点：）

6.关于css的布局（重点重点）

position：static 属于默认的位置

position：relative，是相对于自己，去改变位置，但实际的位置没有改变，只是视觉上改变了

position：absolute绝对定位，相对于最近的祖先元素定位，但祖先元素不能是static 没有祖先的话，就是视口，也就是窗口，随着窗口变化也会变化。

position：flexd相当于导航栏，固定不动的，就算滑动整个窗口也不会动。

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css.css" />
    <style>
      a {
        background-color: rgb(65, 65, 50);
        height: 500px;
        width: 500px;
        position: relative;
        
      }
      .a1 {
        background-color: aquamarine;
        width: 300px;
        height: 300px;
        position: absolute;
        top: 600px;
        left: 300px;
      }
      .a2 {
        background-color: rgb(41, 39, 36);
        height: 300px;
        width: 300px;
        position: fixed;
        top: 300px;
      }
      .a3 {
        background-color: blueviolet;
        width: 300px;
        height: 300px;
      }
    </style>
  </head>

  <body>
    <div class="a">
      <div class="a1"></div>
      <div class="a2"></div>
      <div class="a3"></div>
      <div class="a4"></div>
    </div>
  </body>
</html>

黑色是不动的，