精心整理的一份CSS学习笔记+CSS思维导图

最新推荐文章于 2024-03-11 14:38:21 发布

Panda程序员

最新推荐文章于 2024-03-11 14:38:21 发布

阅读量1k

点赞数 3

分类专栏： web前端学习笔记（HTML+CSS+JavaScript）文章标签： html css css3

本文链接：https://blog.csdn.net/qq_41308254/article/details/105821662

版权

web前端学习笔记（HTML+CSS+JavaScript）专栏收录该内容

3 篇文章 0 订阅

订阅专栏

作者｜Panda
转载请注明出处。

文章目录

一、CSS简介

CSS全称：层叠样式表 (Cascading Style Sheets) 。
CSS作用：美化界面，布局页面，修饰元素外观，修改元素位置等。
CSS引入方式：
1.行内样式：

<div style="这里写样式">我是一个块级的标签</div>

2.内嵌样式：将CSS样式表放到head中用

<head>
    ...
    <style type="text/css">
        ...此处写CSS样式
    </style>
</head>

3.外联样式：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。链接式会以网页文件主体装载前装载CSS文件。

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

二、选择器

2.1 基本选择器：

1、通配符元素选择器：

{ 属性1:属性值1;* 属性2**:属性值2;属性3:属性值3; }
　　* 表示应用到所有的标签。

2、标签选择器

标签名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }
　　例如：div {color: yellow}
　　表示：匹配所有使用 div 标签的元素

3、类选择器

.类名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }

例如：

.mystyle{color:yellow}
<div class="mystyle"/>我的div</div>

4、id选择器

#id名{ 属性1:属性值1;** 属性2**:属性值2;属性3:属性值3; }
　　使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
例如：

#Mycolor {color: yellow}
<h3 id="Mycolor">H3</h3>

5、伪元素选择器（CSS3)
E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
E::first-line 文本第一行；
E::selection 可改变选中文本的样式;
E::before和E::after 在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

2.2 组合（复合）选择器

1、多元素组合选择器：同时匹配两个或多个标签，用逗号隔开。

p,a,div{color: yellow;}
<p>段落</p>
<a>link</a>
<div>块</div>

2、后代元素选择器：匹配所有div标签（其他标签类似）里嵌套的p标签，用空格分隔。

div p {color: yellow;}
<div>
    <p>段落1</p>
    <div>
        <p>段落2</p>
    </div>
</div>

3、子代元素选择器：匹配所有div标签里嵌套的子标签，之间用>分隔。

div > p {color: yellow;}
<div>
    <p>div</p>
    <p>div</p>
</div>

PS: 后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子…, 只要是被放到指定标签中的特定标签都会被选中;子代元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签。
另外还有交集选择器、并集选择器、毗邻元素选择器、伪类选择器等，这些都是基于基本选择器的，就不再赘述了，用到的时候查阅即可。

2.3 选择器的优先级

name	权重
!important	正无穷
行间样式	1000
id	100
class｜属性｜伪类	10
标签选择器｜伪元素	1
通配符	0

css中同一横行的那个权重大，以哪个为准，
权重相等时，遵循后来先到原则，即后来的覆盖之前的

三、盒模型

盒模型是CSS中的核心的概念，描述了元素如何显示。

盒模型由内容区 + 内边距/填充区(padding) + 边框(border) + 外边距/空白区(margin)组成。

盒子大小以宽度为例子：width + padding + border + margin，但我们比较关注的是元素可渲染内容区的宽度和高度。我们在给一个元素添加padding和border并不会影响内容盒子的大小，但会导致整个元素盒子的宽度变大。

简单的说padding和border的设置会影响元素的width的计算。
在box-sizing属性为conten-box的时候，width=元素的内容区
在box-sizing属性为border-box的时候，width=元素内容区padding+border
举个例子(来源于网络):

  <div class="group">
    <div class="block red"></div>
    <div class="block green"></div>
    <div class="block gray"></div>
  </div>

    .group {
      /* background-color: blue; */
      overflow: hidden;
    }
    .block {
      width: 33.33%;
      padding: 20px;
      float: left;
      /* box-sizing: border-box; */
    }
    .red {
      background-color: red;
    }
    .green {
      background-color: green;
    }
    .gray {
      background-color: gray;
    }

如上我们并排了三个宽度为33.33%的块，给每个块添加了padding，因为box-sizing默认是conten-box的计算方式，这样width实际上是父容器的33.33%+padding；这时候就可以给.block元素添加box-sizing:border-box; 让width=内容+padding+border。

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

四、CSS思维导图

图片来源于网络，仅供学习使用，若有侵权，请联系删除。

在这里插入图片描述

码字不易，若有错误请指正，口下留情。求赞😂

Panda程序员

关注

3
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
精心整理的一份CSS学习笔记+CSS思维导图

作者｜Panda转载请注明出处。文章目录一、CSS简介二、选择器2.1 基本选择器：2.2 组合（复合）选择器2.3 选择器的优先级三、盒模型四、CSS思维导图一、CSS简介CSS全称：层叠样式表 (Cascading Style Sheets) 。CSS作用：美化界面，布局页面，修饰元素外观，修改元素位置等。CSS引入方式：1.行内样式：<div style="这里写样...
复制链接

扫一扫