css

0. 内联式 书写在style标签内

1. 外联式 写在单独的css文件中，通过link标签引入

2. 行内式 写在标签的style属性中

   基础选择器

   1.标签名{css名：属性值}

   作用：通过标签名，找到页面中所有这类标签设置样式

   代码样式：

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

   2.类选择器

   结构:

   .类名{css属性名：属性值；}

   作用：通过类名，找到页面中所用带有这个类名的标签设置样式

   <style>
       .one{
           color:pink;
       }
   </style>
   

   3.id选择器

   结构：

   #id{css属性名：属性值}

   作用：通过id，找到页面中带有这个id的标签设置样式

   id在这个页面是唯一，一个id只能使用一次

   <style>
       #id{
           color:pink
       }
   </style>
   

   通配符选择器

   结构：

   *{css属性名：属性值}

   作用：找到页面所有标签，选择样式

   <style>
       *{
           color:pink;
       }
   </style>
   

   后代选择器（空格）

   语法：

   选择器1 选择器2{css}

   作用：

   在标签1中找到标签2给标签2设置样式（中间用空格隔开）

   子代选择器

   语法：

   选择器1>选择器2{css}

   大于号隔开

   并集选择器

   作用：同事选择多组标签，设置同样的样式

   语法：选择器1，选择器2{css}

   中间用逗号隔开

   交集选择器

   语法：选择器1选择器2{css}

   作用：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

   没用东西分隔 如果有标签必须写在前面

   hover为类选择器

   语法：：hover{css}

   作用：鼠标悬停是的状态

   结构为类选择器

   选择器
   E：first-child{}	p匹配父元素第一个子元素
   E：last-child{}	匹配父元素最后一个子元素
   E：nth-child(n){}	匹配父元素中第n个元素
   E;nth-last-child(n){}	匹配父元素中倒数第n个元素

   n为0.1..2.3.4.5.6.7.8.9....

   通过公式:

   功能
   偶数	2n，ecen
   奇数	2n+1,2n-1,odd
   找到前五个	-n+5
   找到从第五个往后	n+5

   emmet语法

   	实例	效果
   标签名	div
   类选择器	.red
   id选择器	#one
   交集选择器	p.red#one
   子代选择器	ul>li
   内部文本	ul>li{我是内容}	我是内容
   创建多个	ul>li*3

   焦点为类选择器

   ➢ 场景：用于选中元素获取焦点时状态，常用于表单控件

   ➢ 选择器语法：

   input：focus{

   background-color：skyblue；

   ➢ 效果：

   表单控件获取焦点时默认会显示外部轮廓线

   属性选择器

   场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签

   选择器	功能
   E：[attr]	选择attr属性的元素
   E:[att^=''val'']	选择具有attr属性并且属性值等于val的E元素

   字体和字体样式

   1.字体大小

   属性名：font-size

   值：数字+px

   代码样式：

   <style>
       .one{
           font-size:16px;
       }
   </style>
   

   2.字体粗细

   属性名：font-weight

   取值：

   关键字: 纯数字： 100-900的正整数

   正常 加粗 正常 加粗

   normal bold 400 700

   代码样式：

   <style>
       .one{
           font-weight:bold;
           font-weight:400；
           font-weight:700；
       }
   </style>
   

3.字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal

倾斜：italic

代码样式：

```
<style>
    .one{
        font-style:italic;
    }
</style>
```

## 4.字体和文本样式

属性名：font-family

取值：’‘microsoft YaHei’‘ 微软雅黑 黑体 宋体

注意：

出现多个单词，需要用引号包裹，最后一个则不用

#### 5.font的复合写法

font：style size weight family

只能省略前面两个

# 样式的层叠问题

给样式设置了相同的标签，此时样式会重叠，写在最下面的生效。

文本样式

1.文本缩进

text-indent

取值：

• 数字+px
• 数字+em（em相当于当前标签font-size的大小） 代码样式：

            font-size: 24px;
            /* 文本的第一行首行缩进 多少距离  */
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;  
        }

2.文本水平对齐方式

text-align

取值：

left	左对齐
center	居中对齐
right	右对齐

代码样式：

<style>
    .one{
         text-align:left;
         text-align:center;
         text-align:right;
    }
</style>

text-align:center可以让哪些元素居中

1.文本

2.span标签，a标签

3.input标签，img标签

需要给父元素添加

3.文本修饰

text-decoration

取值：

underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

4.行高

line-height

取值：

• 数字+px

• 倍数（当前fontsize的倍数）

  • 网页精准布局的时候可以用lin-height：1 取消上下间距
  • font：style weight size/line-height family

  文字颜色：color

  背景颜色：background-color

  颜色表示方法	表示含义	属性值
  关键词	预定义的颜色名	red，green
  rgb（）	红绿蓝三色原色	rgb（0,0,0，）
  rgba（）	红绿蓝三原色+a透明度	rgba（0,0,0,1）
  十六进制	#开头，将数字转换为十六进制数字	#456666

  标签水平居中

  margin：0 auto

  给当前元素设置

  背景

  1.背景颜色

  background-color

  默认值：

  透明：rgba(0,0,0,0)、transparent

  2.背景图片

  background-image

  值：background-image：url（图片路劲）

  3.背景平铺

  background-repeat

  值：

  repeat 默认值（水平垂直方向平铺）

  no-repeat 不平铺

  repeat-x 水平方向平铺

  repeat-y 垂直方向平铺

  4背景透明色

  transparent

  5.background-position

  值：1.水平方向 垂直方向

  方位名词:

  水平方向：left center right

  垂直方向：top center bottom

  2.数字+px（坐标）

  背景连写

  background:color image repeat position

  空格隔开

  css三大特性

1.继承性

2.层叠性

3.优先级

继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

盒子模型

由内容区域（content），内边距区域（padding），边框区域（border），外边距区域（margin）组成

边框（border）

border-width 边框粗细

值：边框粗细

border-style 边框样式

值：solid 实线 dashed 虚线 dotted 点线

border-color 边框颜色

颜色取值

连写形式：

border：1px solid red；

边框会撑大盒子

border-collapse：collapse；（表格单元格合并变细线边框效果）

内边距（padding）

1.值：数字+px

一个值 上下左右

两个值 上下 左右

三个值 上 左右 下

四个值 上 下 左 右（顺时针）

内边距会撑大盒子

css3盒子模型（自动内减）

box-sizing：border-box

外边距（margin）

1.值：数字+px

一个值 上下左右

两个值 上下 左右

三个值 上 左右 下

四个值 上 下 左 右（顺时针）

单方向应用

方向
水平方向	margin-left	让当前的盒子往右移动
水平方向	margin-right	让右边的盒子往右移动
垂直方向	margin-top	让当前盒子往上移动
垂直方向	margin-bottom	让下面的盒子往下移动

外边距合并（折叠现象）

垂直布局的块级元素，上下的外边距会合并

取最大的值

外边距塌陷（折叠现象）

互相嵌套的块级元素，子盒子的margin-top会作用在父元素身上

导致父元素一起下移

解决方法：

• 给父元素设置border-top或者padding-top（分隔父元素的margin-top）

• 给父元素设置：overflow：hidden

• 转换行内快元素

• 设置浮动

  行内元素margin和padding无效情况

  0. 水平方向生效

  1. 垂直方向不生效

     伪元素

     ：：after 在父元素前面添加一个伪元素

     ：：before 在父元素后面添加一个伪元素

     1，必须设置content属性才能生效

     2.伪元素默认是行内元素

     float浮动

     值：

     left（左浮）

     right（右浮）

     特点：

     1.在标准流不占位置

     2.比标准流高半个级别

     3.浮动找浮动，会在上一个浮动元素左右

     4.特殊显示效果：一行可显示多个，可以设置宽高

     注意点：浮动不能通过text-align：center ；和 margin：0 auto；

     书写网页导航步骤

     0. 清除默认的margin和padding
     1. 找到ul，去除小圆点
     2. 找到li标签，设置浮动让li一行中显示
     3. 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？

     方法一：给a标签设置 display : inline-block

     方法二：给a标签设置 display : block

     方法三：给a设置 float : left

     清除浮动

     含义：清除浮动带来的影响

     影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

     ➢ 原因：

     子元素浮动后脱标 → 不占位置

     ➢ 目的：

     需要父元素有高度，从而不影响其他网页元素的布局

     清除浮动方法

     1.直接设置父元素高度

     特点：

     优点：简单粗暴

     缺点：有些布局不能固定父元素高度。如：新闻列表，京东推荐模块

     2.额外标签法

     ➢ 操作：

     0. 在父元素内容的最后添加一个块级元素
     1. 给添加的块级元素设置 clear:both

     ➢ 特点：

     缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

     3.单伪元素清除法

     替代标签法

     特点：方便，直接添加类名

     代码样式：

clearfix::after{
content:'';
display:block;
clear:both;
}
/*补充写法*/
clearfix::after{
content:'';
display:block;
clear:both;
/*在网页中看不到伪元素*/
height：0；
 visibility:hidden;
}

• 0. 4.双伪元素清除法

     替代标签法

     特点： 方便，直接添加类名

     代码样式：

     clearfix::befor,
     clearfix::after{
     content:'';
     display:table;
     }
      clearfix::after{
     clear:both;
      }
     

     5.直接给父元素添加overflow：hidden；

     特点：优点：方便

     position定位

     1.1 网页常见布局方式

     1. 标准流

     0. 块级元素独占一行 → 垂直布局
     1. 行内元素/行内块元素一行显示多个 → 水平布局

     2. 浮动

     0. 可以让原本垂直布局的 块级元素变成水平布局

     3. 定位

0. 可以让元素自由的摆放在网页的任意位置

1. 一般用于 盒子之间的层叠情况

   3. 可以解决盒子与盒子之间的层叠问题

​ 定位之后的元素层级最高，可以层叠在其他盒子上面

​ 可以让盒子始终固定在屏幕中的某个位置

定位方式	属性值
静态定位（默认）	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

设定偏移值（位置）

left：数字+px

top：数字+px

bottom：数字+值

right：数字+值

position：static；（静态定位）

静态定位就是之前标准流，不能通过方位属性进行移动

position：relative；（相对定位）

➢ 介绍：自恋型定位，相对于自己之前的位置进行移动

➢ 特点：

0. 需要配合方位属性实现移动
1. 相对于自己原来位置进行移动
2. 在页面中占位置 → 没有脱标

➢ 应用场景：

0. 配合绝对定位组CP（子绝父相）

1. 用于小范围的移动

   position：absolute；（绝对定位）

   ➢ 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

   ➢ 特点：

   0. 需要配合方位属性实现移动
   1. 默认相对于浏览器可视区域进行移动
   2. 在页面中不占位置 → 已经脱标

   ➢ 应用场景：

   0. 配合绝对定位组CP（子绝父相）

➢ 绝对定位相对于谁移动？

0. 祖先元素中没有定位 → 默认相对于浏览器进行移动

1. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

   子绝父相

   对网页布局影响小

   子绝父相水平垂直居中的方法

   1.left：50%；（让子盒子往右走大盒子的一半）

   2.top：50%；（让子盒子往下走大盒子的一半）

   3.transform：translateX（-50%）；（让子盒子往左+往上走自己的一半）

   position：fixed；

   ➢ 介绍：死心眼型定位，相对于浏览器进行定位移动

   ➢ 特点：

   0. 需要配合方位属性实现移动
   1. 相对于浏览器可视区域进行移动
   2. 在页面中不占位置 → 已经脱标

   ➢ 应用场景：

   0. 让盒子固定在屏幕中的某个位置

      元素层级问题

      ➢ 不同布局方式元素的层级关系：

      标准流 < 浮动 < 定位

      ➢ 不同定位之间的层级关系：

      相对、绝对、固定默认层级相同

      此时HTML中写在下面的元素层级更高，会覆盖上面的元素

      z-index改变定位元素层级

      值：数字（数字越大，层级越高）

      装饰

      vartacil-align 装饰（文子类型基线，顶线，中线，底线对齐）

      vartacil-align

      解决行内/行内块元素垂直对齐

      值：

      baseline（默认，基线对齐）

      top（顶部对齐）

      middle（中部对齐）

      bottom（底部对齐）

      vartacil-align可以解决的问题

      0. 文本框和表单按钮无法对齐问题
      1. input和img无法对齐问题
      2. div中的文本框，文本框无法贴顶问题
      3. div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
      4. 使用line-height让img标签垂直居中问题

      ➢ 注意点：

      学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题

      推荐优先使用浮动完成效果

      cursor光标类型

      作用：

      设置鼠标光标在元素上的显示样式

      值：

      default （小箭头）默认值

      pointer（小手效果）

      text（工字型）

      move （十字光标）

      border-radius边框圆角

      作用让盒子四个角变得圆润

      值：

      数字+值，百分比

      overflow溢出显示效果

      visible（默认值，溢出部分可见）

      hidded（溢出显示隐藏）

      scroll（无论是否溢出都显示滚动条）

      auto (格局是否溢出，自动显示滚动条或者隐藏滚动条 )

      元素本身隐藏

      ➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

      ➢ 常见属性：

      0. visibility：hidden
      1. display：none

      ➢ 区别：

      0. visibility：hidden 隐藏元素本身，并且在网页中 占位置
      1. display：none 隐藏元素本身，并且在网页中 不占位置

      ➢ 注意点：

      开发中经常会通过 display属性完成元素的显示隐藏切换

      display：none；（隐藏）、 display：block；（显示）

      opacity 元素整体透明度（扩展）

      值：0-1之间的数字

      0表示完全透明

      1表示不透明

      三角

      border

      0. 设置一个盒子

      1. 设置四周不同颜色的边框

      2. 将盒子宽高设置为0，仅保留边框

      3. 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

         好啦！css基础篇完结，还有一些c3新增的明天再发啦！