css知识点梳理

小鱼恰饭饭

已于 2023-06-08 17:39:57 修改

阅读量130

点赞数

文章标签： css less 前端

于 2023-06-08 13:23:05 首次发布

本文链接：https://blog.csdn.net/weixin_40988982/article/details/131105611

版权

css语法格式

1、CSS 由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述
2、CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

p {
  color: pink,
  font-size: 20px;
}

css创建

1、内部样式

在单个文档中使用style标签在文档头部定义内部样式表

  <style>
    body {
      background-color: pink;
    }
    #title {
      color: red;
    }
  </style>

2、外部样式

当样式需要应用于很多页面时，就可以使用外部样式表，每个页面使用link标签链接到样式表,link 标签在文档头部

<head>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>

盒模型

元素可以理解为盒子，它是有content(宽高) + padding(内边距) +border(边框)+margin(外边距组成)
1、标准盒模型
总宽度 = width + padding + border + margin组成，宽度同理
content宽度 = width
在这里插入图片描述

2、IE盒模型
总宽度 = width + margin
content宽度 = width - border - padding
在这里插入图片描述

思考：以下情况用什么盒模型比较方便呢？

在这里插入图片描述

文档流

文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下块级块元素)的排列规则

元素在排版中的定位类型分为三种:

(1)文档流:块级格式化的块级盒子, 行内格式化的行内盒子以及相对定位的块级盒子和行内盒子

(2)浮动(float)

(3)绝对定位(position:absolute/fixed)

css基础选择器

一、常用选择器包含

1、标签选择器

HTML标签名作为选择器

p {
	font-size: 20px;
}

2、类选择器

给元素添加class属性，可以对一个或某几个标签增加样式
语法：

  <div class="center">文本居中111</div>
  <p class="center">文本居中222</p>
  .center {
    text-align: center;
  }

3、id选择器

给元素添加id属性来设置id选择器，css用#定义

id选择器唯一
通常class用于css布局，id用于js操作对象

  <div id="title">id选择器</div>
  #title {
    color: red;
  }

问题扩展：id不唯一会怎样？（选择器/id.html）

问题扩展2：如下标签h1, box, color设置相同样式，text-align: center,如何书写

    <h1>标题</h1>
    <div class="box">我是div</div>
    <p>段落一</p>
    <p>段落二</p>
    <div class="color">段落三</p>

二、群组选择器

语法：选择器1,选择器2,选择器3,…{}
作用：对多个选择器同时设置相同样式

  h1,.box,.color {
    text-align: center;
  }
  p,.color {
    color: red
  }

三、关系选择器

1、后代选择器

写法：父级后代{}

  .offspring p {
    width: 200px;
    height: 200px;
    background: powderblue;
  }

2、子代选择器

写法：父>子{}

  .father>p {
    width: 100px;
    height: 100px;
    background: peachpuff;
  }

3、相邻兄弟选择器

指定选择器后面紧挨着的兄弟选择器
写法：指定选择器+兄弟{}

   <h1>现场作答，只改变标签为444的样式</h1>
   <p>000</p>
   <div class="question">问题</div>
   <p>111</p>
   <p>222</p>
   <p>333</p>
   <div>
     <p>孙级p标签</p>
   </div>
   <p>444</p>
  .brother+p {
    width: 200px;
    height: 200px;
    background: pink;
  }

4、通用兄弟选择器

指定选择器后面所有兄弟选择器
写法：指定选择器~兄弟{}

  .brother2~p {
    width: 200px;
    height: 200px;
    background: pink;
  }

问题扩展3：找到如下标签的444，设置width:100px,background:red (兄弟选择器)

   <div class="box">
     <h1>现场作答，只改变标签为444的样式</h1>
     <p>000</p>
     <div class="question">问题</div>
     <p>111</p>
     <p>222</p>
     <p>333</p>
     <div>
       <p>孙级p标签</p>
     </div>
     <p>444</p>
   </div>

5、伪类选择器

1、以child结尾

在指定元素子集的所有元素中选择
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(n) 第n个子元素
*nth-child()
n: 第几个子元素
even或者2n 选中偶数位的元素
odd或者2n+1选中奇数位的元素

   .box :first-child {
     color: red;
   }
   .box :last-child {
     color: green;
   }
   .box :nth-child(3) {
     width: 100px;
     height: 100px;
     border: 1px solid #ccc;
   }

2、以type结尾

在指定元素子集的相同元素中选择
:first-of-type 第一个子元素
:last-of-type 最后一个子元素
:nth-of-type(n) 第n个子元素

   .box2 li:first-of-type {
     color: red;
   }
   .box2 li:last-of-type {
     color: green;
   }

3、hover

鼠标滑过时修改样式

   .box :hover {
     background: cyan;
   }

问题扩展4：如下标签，内部最左侧加一个 * 号，右侧加一个感叹号！，color为粉色

效果图如下
在这里插入图片描述

    <div class="box">
    </div>

6、伪元素选择器

伪元素选择器可以利用css创建标签元素，而不需要HTML标签，简化HTML结构
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容

   div::after {
     content: '!';
     color: pink;
     float: right;
   }
   div::before {
     content: '*';
     color: red
   }

注：

before和after创建了一个元素，属于行内元素
新创建的元素在文档树中找不到，所以叫伪元素
语法：element::before{}
before和after必有content属性（因为w3c规定的content的初始值为none，none不能生成为元素）

选择器权重

!important >内联样式 > id > 类选择器 > 标签选择器

第一优先级：css属性+!important 拥有最高权限
第二优先级：给标签加style，即内联样式权值1000
第三优先级：id选择器，#id｛｝权值100
第四优先级：class选择器、伪类选择器权重10
第五优先级：元素选择器、伪元素选择器权值1

问题扩展5：h1标签标题显示什么颜色？

<h1 id="title" class="title" style="color: blue">标题</h1>
 .title {
   color: yellow !important;
 }
 #title {
   color: red;
 }
 .title {
   color: green;
 }
 h1 {
   color: pink;
 }

属性及继承关系

1、常用属性

字体：
1、font-size: 文字大，浏览器默认的大小是16px, 支持的最小字体是12px
2、font-weight: 文本粗细 100-900 bold/bolder 加粗 normal = 400 正常
3、color：字体颜色 red; #000; raba();
文本：
1、line-height 行高
2、text-aline 水平对齐方式 left(默认)、center、right
背景: background-color
边框及圆角：border 、 border-radius
1、border-style: 边框线形
属性值： solid: 实线 dashed: 虚线 dotted: 点线 double:双实线
2、border-width 线宽
3、border-color 颜色
4、复合写法border: 1px solid red
5、圆角border-radius
定义元素显示模式：display (block、inline、inline-block)及区别
display:
block: 块元素（div, p）独占一行，可设置宽高
inline: 行内元素（span, i，input）和相邻行内或行内块元素，在一行，宽高设置无效
inline-block: 行内块元素、和相邻行内或行内块元素，在一行，可设置宽高
none: 标签隐藏，不占位
定位：poition(top、left、right、bottom)
relative: 相对定位：即相对于元素的正常位置进行定位
absolute: 绝对定位：相对于第一个定位的父级元素进行定位
fixed: 相对于浏览器窗口的位置。使用固定定位的元素无论如何滚动浏览器窗口元素
的位置都是固定不变的。

问题扩展6：页面内所有元素，字体样式设置为绿色

<div class="box">
  <p>段落1</p>
  <p>段落2</p>
  <div>
    div标签
    <div>1111</div>
    <div>2222</div>
  </div>
</div>

2、继承

可继承的属性：以上属性的字体、文本

问题扩展7：两个块块元素在同一行，一个在最左侧，一个在最右侧

 <div class="box">
   <div class="float box1"></div>
   <div class="float box2"></div>
 </div>

浮动：float(脱离文档流)

浮动后，块元素可占据一行
问题：浮动会脱离文档流，不在文档流中站位，如果父级元素没有高度，就会影响后面的标准流

办法：清除浮动

清除浮动的策略是: 闭合浮动

clear: both(只有在块元素中生效)
1、额外标签法（隔墙法）
在浮动元素的末尾添加一个空标签（必须是块标签），设置clear:both
缺点：增加无意义的标签（结构查）
2、利用伪元素after属性

  display: block;
  content: '';
  clear: both;

问题扩展8:一个元素水平垂直居中？

在这里插入图片描述

    <div class="box">
      <div class="box1"></div>
    </div>

flex布局

任何一个容器都可以指定为 Flex 布局。

.box {
  display:block
}

flex布局，有两条轴，主轴和交叉轴
在这里插入图片描述

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

在这里插入图片描述

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

在这里插入图片描述
align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

在这里插入图片描述

学习参考文档：

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
https://blog.csdn.net/TriDiamond6/article/details/106048140
https://www.runoob.com/css/css-intro.html

作业

1、实现如下图效果

在这里插入图片描述

2、完成如下页面

tab栏文字间距相同，鼠标划过时，字体颜色变为蓝色
书皮图片，鼠标划过时，有放大效果
底部’个人博客’不一直在页面最下方，不跟随页面滚动

小鱼恰饭饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css知识点梳理

文档流指的是HTML中元素在计算布局排版的过程中,所有处于文档流中的元素会自动的从左到右(非块级元素),从上到下块级块元素)的排列规则。元素可以理解为盒子，它是有content(宽高) + padding(内边距) +border(边框)+margin(外边距组成)当样式需要应用于很多页面时，就可以使用外部样式表，每个页面使用link标签链接到样式表,link 标签在文档头部。问题：浮动会脱离文档流，不在文档流中站位，如果父级元素没有高度，就会影响后面的标准流。2、CSS声明总是以分号;
复制链接

扫一扫