首页 > 其他分享 >【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)

【博学谷学习记录】超强总结,用心分享|前端CSS总结(一)

时间:2023-01-01 16:33:33浏览次数:54  
标签:总结 元素 标签 超强 设置 Pictures 选择器 CSS 属性

CSS总结(一)

shift+alt,选中多行

外链式

<link rel="stylesheet" href="./my.css">

1 选择器

1.1 标签选择器

结构:标签名

1.2 类选择器

结构:.类名{ }

1.3 id选择器

结构:#id属性值{ }

作用:通过id属性值,找到页面中带有这个id属性值的标签,设置样式

注意点:

  1. 所有标签上都有id属性

  2. id属性值类似于身份证号码。在一个页面中是唯一的,不可重复的!

  3. 一个标签上只能有一个id属性值

  4. 一个id选择器只能选中一个标签

1.4 通配符选择器

结构:*{ }

作用:选中页面中所有标签

2 文字和文本样式

2.1 字体样式

2.1.1 字体大小:font-size

2.1.2 字体粗细:font-weight

取值:

  • 关键字:

    正常 normal
    加粗 bold
  • 纯数字 100~900的整数:

    正常 400
    加粗 700

2.1.3 字体样式:font-style(倾斜)

取值:

正常(默认值):normal

倾斜:italic

2.1.4 字体类型:font-family

2.1.5 字体类型:font属性连写

属性名:font(复合属性

取值:font: style weight size family;

省略要求:只能省略前两个,如果省略了相当于设置了默认值

2.1.6样式层叠问题

样式可以一层一层的层叠覆盖

<style>
        p{
            color: red;
            color: blue;
        }
</style>

如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效

2.2 文本样式

2.2.1文本缩进

属性名:text-indent

取值:

  • 数字 + px
  • 数字 + em (推荐:1em = 当前标签的font-size的大小)

2.2.2文本水平对齐方式

属性名:text-align

取值:

属性值 效果
left 左对齐
center 居中对齐
right 右对齐

2.2.3文本修饰

属性值:text-decoration

取值:

属性值 效果
underline 下划线(常用)
line-through 删除线(不常用)
overline 上划线(几乎不用)
none 无装饰线(常用)

注意:开发中会使用 text-decoration :none ; 清除a标签默认的下划线

2.3 line-height行高

作用:控制一行上的上下间距

属性名:line-height

取值:

  • 数字 + px
  • 倍数(当前标签 font-size 的倍数)

应用:

  1. 让单行文本垂直居中可以设置 line-height :文字父元素高度
  2. 网页精准布局时,设置 line-height :1 可以取消上下间距

行高与font连写注意点:

  • 如果同时设置了行高与font连写,注意覆盖问题
  • font: style weight size/line-height family ;

垂直居中技巧:设置行高属性值 = 自身高度属性值

2.4标签水平居中

margin:0 auto;

3 选择器进阶

3.1 复合选择器

3.1.1 后代选择器

作用:根据HTML标签的嵌套关系,选择父元素 后代中 满足条件的元素

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

结果:在选择器1所找到标签的后代(儿子、孙子、重孙子...)中,找到满足选择器2的标签,设置样式

注意点:

  1. 后代包括:儿子、孙子、重孙子...

  2. 后代选择器中,选择器与选择器之间通过 空格 隔开

    ![44444](C:\Users\hp\Pictures\Saved Pictures\44444.jpg)

3.1.2子代选择器

作用:根据HTML标签的嵌套关系,选择父元素 子代中 满足条件的元素

选择器语法:选择器1 > 选择器2 { css }

结果:在选择器1所找到标签的后代(儿子)中,找到满足选择器2的标签,设置样式

注意点:

  1. 子代只包括:儿子
  2. 子代选择器中,选择器与选择器之间通过 > 隔开

![123456](C:\Users\hp\Pictures\Saved Pictures\123456.jpg)

![1234567](C:\Users\hp\Pictures\Saved Pictures\1234567.jpg)

3.2 并集选择器

作用:同时选择多组标签,设置相同样式

选择器语法:选择器1 , 选择器2 { css }

结果:找到 选择器1 和 选择器2 选中的标签,设置样式

注意点:

  1. 并集选择器中的每组选择器之间通过 , 分隔
  2. 并集选择器中的每组选择器可以是 基础选择器 或者 复合选择器
  3. 并集选择器中的每组选择器通常一行写一个,提高代码的可读性

3.3 交集选择器

作用:选中页面中 同时满足 多个选择器的标签

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

结果:

(既又原则)找到页面中 即 能被选择器1选中。又 能被选择器2选中的标签,设置样式

注意点:

  1. 交集选择器中的选择器之间是紧挨着的,没有东西分隔
  2. 交集选择器中如果有标签选择器,标签选择器必须写在最前面

3.4 hover伪类选择器

作用:选中鼠标悬停在元素上的状态,设置样式

选择器语法:选择器:hover { css }

3.5 Emmet语法

作用:通过简写语法,快速生成代码

语法:类似于刚刚学习的选择器的写法

![121212](C:\Users\hp\Pictures\Saved Pictures\121212.jpg)

![1122](C:\Users\hp\Pictures\Saved Pictures\1122.jpg)

4 背景相关属性

4.1 背景颜色

属性名:background-color

注意点:背景颜色默认值是 透明:rgba(0,0,0,0)、transparent

4.2 背景图片

属性名:background-image

属性值:background-image :url ('图片的路径')

4.3 背景平铺

属性名:background-repeat

属性值:

取值 效果
repeat (默认值)水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向(x轴)平铺
repeat-y 沿着垂直方向(y轴)平铺

4.4 背景位置

属性名:background-position

属性值:background-position:水平方向位置 垂直方向位置

![1414](C:\Users\hp\Pictures\Saved Pictures\1414.jpg)

如果指定一个像素值,则该值用于x坐标,y值默居中

4.5 背景相关属性连写

属性名:background

书写顺序:随意

注意:

  1. 把单独的样式写在连写的下面
  2. 把单独的样式写在连写的里面

5 元素显示模式

5.1 块级元素

特点:

  1. 独占一行(一行只能显示一个)
  2. 宽度默认是父元素的宽度,高度默认由内容撑开
  3. 可以设置宽高

代表标签:

div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer......

5.2 行内元素

显示特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签:

a、span、b、u、i、s、strong、ins、em、del......

5.3 行内块元素

显示特点:

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签:

  • input、textarea、button、select......
  • 特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

5.4 元素显示模式转换

属性 效果 使用频率
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display:inline 转换成行内元素 较少

块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素...

  • 但是:p标签中不要嵌套div、p、h等块级元素

a标签内部可以嵌套任意元素

  • 但是:a标签不能嵌套a标签

6 CSS特性

6.1 继承性

6.2 层叠性

6.3 优先级

优先级公式:

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

注意点:

  1. !important不能提升继承的优先级,只要是继承优先级最低
  2. 实际开发中不建议使用!important

6.4 权重叠加计算

![33](C:\Users\hp\Pictures\Saved Pictures\33.jpg)

7 盒子模型

7.1 盒子模型介绍

CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成,这就是盒子模型

![999](C:\Users\hp\Pictures\Saved Pictures\999.jpg)

7.2 边框(border)- 连写形式

属性名:border

属性值:单个取值的连写,取值之间以空格隔开

border:10px solid red;

7.2.1边框(border)— 单方向设置

场景:只给盒子的某个方向单独设置边框

属性名:border—方位名词

属性值:连写的取值

7.2.2边框(border)— 单个属性:

![151515](C:\Users\hp\Pictures\Saved Pictures\151515.jpg)

7.3 内边距取值

作用:设置边框与内容区域之间的距离

属性值:padding

常见取值:

![2525](C:\Users\hp\Pictures\Saved Pictures\2525.png)

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面!

7.3.1 内边距(padding)—单方向设置

场景:只给盒子的某个方向单独设置内边距

属性名:padding - 方位名词

7.4 自动内减

操作:给盒子设置属性 box-sizing:border-box;即可

优点:浏览器会自动计算多余的大小,自动在内容中减去

7.5 外边距(margin)— 取值

作用:设置边框以外,盒子与盒子之间的距离

常见取值:

![444555](C:\Users\hp\Pictures\Saved Pictures\444555.png)

记忆规则:从上开始赋值,然后顺时针赋值,如果设置赋值的,看对面!

7.5.1 外边距(margin)— 单方向设置

场景:只给盒子的某个方向单独设置外边距

属性值:margin - 方位名词

应用:

![777777](C:\Users\hp\Pictures\Saved Pictures\777777.png)

标签:总结,元素,标签,超强,设置,Pictures,选择器,CSS,属性
From: https://www.cnblogs.com/LuckFairy/p/17018226.html

相关文章

  • CSS – PostCSS
    前言我第一次接触PostCSS是在学TailwindCSS的时候.它类似JavaScript的Babel.我没有用过Babel,因为TypeScript用的早.PostCSS也是这样,Sass用的早.Post......
  • thinkphp5框架使用总结
    一.路径访问方式http://网址/index.php/模块/控制器/操作.html其中:1.模块就是application下的一个文件夹2.控制器就是这个文件夹下面controler里的一个php文件3.操作就是......
  • 2022年年终总结
    2022年是转行、成长的一年。2月14号从公司回来,脱产自学。要面对家里人及其他一些人所抱有的不解以至于不安,对那时的我来说并不是一件容易的事。在最开始的那段时间里,......
  • OpenCV常见的优化方法和技巧总结
    OpenCV常见的优化方法和技巧总结目录​​OpenCV常见的优化方法和技巧总结​​​​ 一、OpenCV常见的优化方法总结​​​​1.1cv::imread()设置reduce模式:​​​​1.2查表......
  • 2022年度总结
    2022年度总结科研上半年主要在科研,老师给了个题目,然后开始搞。开始主要是读论文、想idea、然后发现没意思或者做过了。有时候积累了一些想法,过几天就发现一点意思都没有......
  • 数据分析之Pandas分组操作总结
     Datawhale干货 作者:耿远昊,Datawhale成员Pandas做分析数据,可以分为索引、分组、变形及合并四种操作。之前介绍过​​索引操作​​,现在接着对Pandas中的分组操作进行介绍:主......
  • Codeforces Round #841 (Div. 2) and Divide by Zero 2022 比赛总结
    vp的一场比赛,打得还行,有点慢。注意:前两道题的特色是答案需要\(\times2022\)输出。A.JoeyTakesMoney简单题,一定是\(n-1\)个\(1\)和一个\(\displaystyle\prod......
  • 第一篇论文投稿的收获与总结
    posted@2020-02-0115:21前段时间总算是向IJCAI-20会议投出了人生的第一篇论文。这篇投稿个人看来还是有很多漏洞和不足之处,但也算是完成了个人前进的一小步吧,后续还......
  • 华为云使用总结
    华为云相关服务登录与注册地址为:https://auth.huaweicloud.com/注意1需要实名才可以进行购买和使用.登录之后就可以直接进入控制台.注意2需要选择区域,比如我这......
  • 一文总结词向量的计算、评估与优化
     Datawhale干货 作者:芙蕖,Datawhale优秀学习者,东北石油大学为了处理语言,需要将文本信息用向量的形式表达。词向量(WordVector)或称为词嵌入(WordEmbedding)就是将词语向量化......