HTML+CSS基础知识到项目实战（三）

最新推荐文章于 2024-03-28 12:55:21 发布

小张不嚣张꒰ঌ(˚ᆺ˚)໒꒱

最新推荐文章于 2024-03-28 12:55:21 发布

阅读量144

点赞数 1

分类专栏：前端集合文章标签： css html css3

原文链接：https://xdclass.net/#/index

版权

前端集合专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS入门基法则

从基本规则开始学习css

 选择器
     告诉浏览器要设置样式的html元素
 声明块
      ⽤于设置样式
      层叠样式表
Viewport
     将网页的视口设置为完美视口，开发移动端页面时一定要加上，只适用于移动端开发（）

在这里插入图片描述

css的几种写法及推荐写法

讲解⼏种CSS的写法及推荐写法

写法

内部样式表

         写在元素的style标签⾥⾯的

  <!-- 写在style里面内部样式表 -->
<style>   
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
</style>
<body>
    <div>

    </div>
</body>

内联样式表

         写在styles属性⾥⾯的

<div style="background-color: red">
小张
    </div>

外部样式表

        link标签将css资源引⼊

在这里插入图片描述

为什么选择外部样式表

        解决⻚⾯当中样式重复的问题
        代码分离，利于代码维护和阅读（单独一个文件）
        浏览器会缓存起来，提⾼⻚⾯响应速度变快了

css核心值常见的选择器及使用场景

1.元素（标签）选择器

组合选择器:

h1,p{color:red}`

2.类选择器

结合标签选择器

   h1.xd{color:red;}

在这里插入图片描述

3.多类选择器（顾名思义，可以使用多个类名）

class="xd background"

在这里插入图片描述

4.链接多个类选择器

.xiaodi.background{color:red; background-color:black}

在这里插入图片描述

5.id选择器

声明：#aa{} 
属性：id="aa"

在这里插入图片描述

注意：一个id选择器的属性值在html文档中只能出现一次，避免写js获取id时出现混淆
6.通配符选择器（常用于设置边距 margin和paddin ）

   *{
    代码块
    }

在这里插入图片描述

7.派⽣选择器

后代选择器

h1 p{color:red;}

在这里插入图片描述

⼦元素选择器

   div>span{font-size:900}

在这里插入图片描述

相邻选择器（兄弟）

h1+p{background-color:pink;}

在这里插入图片描述

css核心特殊选择器及使用场景

特殊的选择器
伪类选择器
不改变任何DOM内容。只是插入了一些修饰类的元素

：first-child{} //第一项
：last-child{}//第二项
：nth-child{n}//第n项
：nth-child(2n+1)//第奇数项
：nth-child(2n)//偶数项
：not() //否定伪类
      
a ：link{color：} //未访问的链接
a：visited{color:}//访问的链接
a：hover{color： }//鼠标悬浮后的链接
a：active{color：}//已选中的链接（点击某个链接的时候）

在这里插入图片描述

伪元素选择器

  ::first-letter  //第一个
  ::first-line    //第一行 只能用于块级元素
  ::selection     //选中
  ::before        //在开始位置（只想加内容，不加标签）
  ::after         //在结束位置（同上）

css基本概念之盒子模型

什么是盒⼦模型

在CSS⾥⾯，所有的HTML元素你都可以看成是⼀个盒⼦

     盒⼦的内容(content)

元素的大小

     盒⼦的内边距(padding）

padding-left:10px   //左边距10px
padding-top:10px    //上边距10px
padding-right:10px  //右边距10px
padding-bottom:10px //下边距10%，相对于父级元素的width

padding:10px 10px 10px 10% //等同于上面四行 百分比是对应父标签的大小
padding:5px 10px    //上下边距5px、左右边距10px
padding:5px 10px 20px  //上边距 左右边距 下边距
padding:10px        //上下左右边距10px

盒⼦的边框(border)

border-left:3px solid #000  //左边距10px dotted dashed
border-top:3px solid #000 //上边距10px
border-right:3px solid #000 //右边距10px
border-bottom:3px solid #000  //下边距10%，相对于父级元素的width
border-radius: 3px
border:3px solid #000 //等同于上面四行

边框样式： solid（实线）、dashed（虚线）、dotted（点线）、double（边框为双实线）

盒⼦的外边距(margin)

margin-left:10px  //左边距10px
margin-top:10px   //上边距10px
margin-right:10px //右边距10px
margin-bottom:10% //下边距10%，相对于父级元素的width

margin:10px 10px 10px 10% //等同于上面四行
margin:5px 10px   //上下边距5px、左右边距10px
margin:10px       //上下左右边距10px

盒子怪异模型

W3C标准的盒子模型（标准盒模型 )

boxWidth=contentWidth

IE标准的盒子模型（怪异盒模型）（设置盒子大小多少就是多少1，不会因为边距改变发生变化。）

box-sizing:border-box //声明
boxWidth=contentWidth+border+padding

在这里插入图片描述

外边距折叠

上下两个兄弟盒子的margin都为正取大，都为负取小，一正一负相加

父子元素盒子的margin（假设没有内边距或边框把外边距分隔开），也会合并；

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

解决父子边距合并：
父元素{
  overflow:auto;
}

父元素::before{
  display: table;
  content: "";
}

css常用的属性

常⽤属性

盒⼦的位置和⼤⼩
尺寸

 宽度 width: ⻓度|百分⽐|auto
 ⾼度 height
 边界 margin padding 上右下左|上下左右
 阴影 box-shadow：

布局

浮动：float
定位：position
弹性布局：flex 
盒⼦内容超出部分：overflow：hidden | scroll | auto  // 
                        hidden 超出盒子的内容隐藏掉
                        scroll、auto 出现滚动条，显示全部的内容 
外观，⻛格

background-image 背景图片
background-repeat 背景图片平铺（背景图片沿着水平和垂直两个方向平铺）
background-size 背景图片·大小
background-position 背景位置
background-color 背景颜色
backgrow-attachment 背景固定（scrol跟随页面元素一起滚动、fixed不随页面一起滚动）

⽂字属性

字体⼤⼩ font-size
是否加粗 font-weight
是不是斜体 font-style
字体是什么 font-family

css层叠与选择器优先级

CSS全称：层叠样式表(Cascading Style Sheets)

层叠是⼀个基本特征

⼀个css属性被多次声明的时候，会根据优先级或者声明顺序来计算采⽤哪个样式
优先级是怎么计算

   通配符选择器 1： *
   标签选择器 2：div/span/p/li
   类选择器 3：class
   id选择器 4：id
   行内样式 5

在这里插入图片描述

css中常见的可继承的属性

什么是继承

 继承了⽗元素的某些属性
 优点：继承可以简化代码，便于维护
 默认设置继承的属性

 ⽂字属性，文本缩进、对齐、行高
 文本缩进：text-indent
 对齐：text-align
 行高：line-height

 不具有继承性的：
        边框属性
        外边距属性
        内边距属性
        背景属性
        定位属性
        布局属性
        元素宽高属性