基础CSS知识梳理

最新推荐文章于 2022-09-25 01:00:27 发布

Bill Ran

最新推荐文章于 2022-09-25 01:00:27 发布

阅读量3.1k

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/Billrz1/article/details/124085253

版权

css是层叠样式表

也称css样式表和级联样式表

价值：

由html专注做结构，样式交给css

构成：

写在 <head>里的<style>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=
    , initial-scale=1.0">
    <title>不醒人！</title>
    
    <style>
        form{
            color: red;
            font-size : 12px;
        }
    </style>
</head>
<body>
    
    <form>
        籍贯：
        <select>
            <option>四川</option>
            <option selected="selected">重庆</option>
        </select>
    </form>
    
</body>
</html>

代码风格

样式格式书写：

展开形式
样式大小写：

推荐样式选择器，属性名，属性值用小写字母，特殊情况除外。
空格规范：
1. 属性值后保留空格
2. 选择器（标签）和大括号间保留空格

css选择器

选择标签用的

基础选择器：

标签选择器

把所有标签选择出来

优点：快速

缺点：不能设计差异化样式，只能选择全部的当前标签。
类选择器

需要class属性来调用，差异化。

不能用标签名命名类。

样式点定义，结构类（class）调用。一个或多个，开发最常用。

多类名用空格分开
id选择器

只能调用一次
通配符选择器

使用“*”，选取所有标签

复合选择器

css字体属性

在这里插入图片描述

字体粗细

font-weight ：normal |bold |bolder |lighter |（number）【建议number】

文字样式

font-style ： italic（倾斜）| nomal

字体的复合属性

font： font-style font-weight font-size/line-height font-family

文本颜色

预定义：单词

最常用：十六进制 #FF0000

rgb（255，0，0）

文本对齐

在这里插入图片描述

装饰文本

在这里插入图片描述

首行缩进

text-indent: 2em(/32px);

行间距

line-height： 16px； =上间距+文字高度+下间距。

css引入方式

三大类：

行内样式表（行内式）

适合修改简单样式
```
<p style="color: pink;">行内样式表</p>
```
内部样式表（嵌入式）

控制整个页面的样式
外部样式表（链式表）

使用最多

两步：
1. 新建.css样式文件
2. 使用link标签引入：
```
<link rel="stylesheet" href="css文件路径">
```

crome调试工具

在这里插入图片描述

Emmet语法

快速生成html语法

在这里插入图片描述

快速生成css样式标签

在这里插入图片描述

快速格式化代码

shift+alt+f

复合选择器

后代选择器

元素1 元素2 {

样式声明

}
子选择器

只能选择第一个亲儿子

元素1>元素2{样式声明}
并集选择器

”,“号分割

语法规范：竖着写
伪类选择器

在这里插入图片描述

ps.给链接指定样式需要单独指定

focus伪类选择器

input： focus{}

ps.把获得光标的表单元素显示出来

元素显示模式

行内元素
1. 1. 一行可以显示多个
  2. 宽高设置无效
  3. 默认宽度是其内容宽度
  4. 只能容纳文本或者其他行内元素
  5. ps：
    
    链接里面不能放链接
    
    <a>a里面可以放块级元素，但是给<a>转换一下级模式最安全
块元素
1. 比较霸道，自己独占一行
2. 可以设置行宽行高
3. 宽度默认是容器（父级宽度的）100%
4. 是一个容器及盒子，里面可以放行内或者块级元素
5. 注意：
  
  文字类元素内不能使用块级元素
  
  <p>标签主要用于存放文字，因此里面不能放块级元素，特别是不能放<div>
  
  同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
行内块元素
1. 一行可以显示多个，但会有空白空隙
2. 默认宽度就是它本身内容的宽度
3. 行高，高度，外边距以及内边距都可以控制

在这里插入图片描述

元素转换

display ：block；

display：inline；

display：inline-block；

ps：小技巧让文字垂直居中

height==line-height

css背景

背景颜色

background-color： transparent；
背景图片

在这里插入图片描述

背景平铺

在这里插入图片描述

背景图片位置

在这里插入图片描述

如果参数是方位名词（position）：
1. 前后顺序无关
2. 如果第二个不写，默认居中对齐
如果是参数精确单位：

e.g. background-position： 20px 50px；

ps.只写一个坐标点的话，第二个默认垂直居中
混合单位第一个一定是x值
背景图像固定

在这里插入图片描述

背景复合写法

色址铺滚位
背景色半透明

background: rgba(0,0,0,0.3);

or

background: rgba(0,0,0,.3);

最后一个是透明度，范围在0~1；

css三大特性

层叠性
继承性

子标签会继承父标签的某些样式和颜色（但是高度和内外边距等不会继承）

**ps：**行高可以不跟单位也可以跟单位
优先级

如果选择题相同，根据层叠性

不同，则看权重

在这里插入图片描述

PS1:

权重由四组数字组成，但不会进位

从左往右比较

继承的权重是0

PS2:

复合选择器会有权重叠加的问题

css盒子模型

网页布局三大核心：盒子模型，浮动，定位。

看透网页布局本质

网页布局过程：
1. 准备好标签
2. 利用css设置好盒子样式，拜访到相应位置
3. 往盒子里装内容
he盒子组成：边框（border），外边距（margin），内边距（padding）和实际内容（content）

边框：
1. **边框粗细：**border-width
  
  一般用px
2. **边框样式：**border-style
  
  solid（实线）
  
  dashed（虚线）
  
  dotted（点线）
3. **边框颜色：**boder-color
边框复合写法：（多用）

在这里插入图片描述

下边框：bottom

表格的细线边框：

border-collapse：collapse；

边框会影响盒子的实际大小

给边框盒子实际会变大

内边距（padding）：

简单来说就是盒子边框与内容之间的距离。
padding也会使得盒子变大
特殊情况：

如果盒子本身没有设定width/height属性，padding不会撑开盒子

外边距（margin）：

margin简写与padding完全一致
外边距实现水平居中：

在这里插入图片描述

塌陷问题

解决方法：

PS基本操作：

在这里插入图片描述

圆角边框

border-radius属性用于设置元素的外边框圆角

语法：
border-radius：length；

length的数值越大，矩形弧度越大

圆形的做法：border-radius=一半的矩形宽高（或者写 50%）；
圆角矩形：border-radius=高度的一半
跟四个数值的话：顺时针
两个数值的话: 主对角线一个值副对角线一个值

盒子阴影（重点）

在这里插入图片描述

文字阴影（了解）

text-shadow

在这里插入图片描述

浮动

传统网页布局三种方式：（三种一起构成）
1. 普通流（标准流）
2. 浮动
3. 定位
浮动（float）

为什么需要浮动？

网页布局第一准则：多个块级元素纵向排布找标准流，一行排布找浮动

浮动特性（重难点）

1.脱标！：

脱离标准普通流的控制移动到指定位置
浮动的盒子不保留原来的位置

在这里插入图片描述

2.一行显示

在这里插入图片描述

3.行内块特性

在这里插入图片描述

1.6 浮动元素经常和标准流父级搭配使用

常见的网页布局

注意点：

浮动元素经常和标准流父级搭配使用
一个盒子浮动了，理论上其他盒子也要浮动
浮动的盒子只会影响后面的标准流，不会影响前面的

思考：

所有父盒子必须要加高度吗？（不一定，有时候并不方便）

让子盒子撑开父盒子

——————》清除浮动

清楚浮动

清除浮动的本质

清除浮动元素造成的影响

在这里插入图片描述

方法：

额外标签法：

找到最后一个浮动的标签，在最后加上一个块级元素（div）标签，调用clear ：both；
父级添加 overflow

.父级元素{

overflow： hidden；//前面用他防止过外边距合并

}

缺点：不能显示溢出部分
after伪元素法
双伪元素

总结：

在这里插入图片描述

3和4的使用方法，找到父盒子，添加多类名，形如class=”box clearfix“

PS切图

在这里插入图片描述

图层切图
1. 移动工具，左键选择，右键导出
2. shift选中，Ctrl+e合并图层
切片切图
插件切图（cutterman）

css书写顺序

在这里插入图片描述

css定位

定位组成

定位：摆放盒子

定位=定位模式+边偏移

定位模式用于指定一个元素在文档中的定位方式。：
1. position：
  1. 静态定位（了解）
  2. *相对定位（自恋型）relative
    
    原位置保留，不脱标
    
    典型应用：给绝对定位当爹
  3. *绝对定位（absolute）
    
    移动时，相对于他的父元素
    
    务必记住：
    1. 没有父元素或者父元素没有定位就以浏览器定位
    2. 以有定位的最近的祖先元素来定位
    3. 绝对定位不再占有原先的位置，会脱保标
    4. 子绝父相
  4. *固定定位（fixed）（重要）
    1. 以浏览器的可视窗口为参照
    2. 跟父元素没有关系
    3. 不随滚动变化
      
      小算法：
      1. 让固定盒子 left：50%；
      2. 利用margin-left 走版心盒子宽度的一半
  5. 粘性定位
    
    兼容性差
边偏移则决定了该元素的最终位置：

在这里插入图片描述

定位叠放次序 z-index

定位拓展

在这里插入图片描述

定位的特殊性

行内元素添加绝对或者固定定位，可以直接设置高度和宽度
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小
脱标的盒子不会除发外边距塌陷

浮动元素和绝对定位（固定定位）元素的都不会触发外边距合并的问题
**绝对定位（固定定位）**会完全压住盒子

但浮动元素不同，只会压住它下面的标准流盒子，但是不会压住下面标准流盒子里面的文字（图片）。

小结

在这里插入图片描述

元素的显示与隐藏

1.display属性

在这里插入图片描述

display:none;隐藏对像
display：block；除了转换为块级元素外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置

后面应用非常广泛

2.visibility可见性

在这里插入图片描述

3.overflow

在这里插入图片描述

注意：

在这里插入图片描述

END

PS:文章中的图片来自于B站黑马程序员pink老师视频课截屏，如有侵权，联系删除。

Bill Ran

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
基础CSS知识梳理

css是层叠样式表也称css样式表和级联样式表价值：由html专注做结构，样式交给css构成：写在 <head>里的<style>中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
复制链接

扫一扫