CSS基础 | 青训营笔记

蜡笔小沟
170 阅读4分钟

这是我参与「第四届青训营 」笔记创作活动的的第1天

什么是CSS？

CSS又叫层叠样式表(Cascading Style Sheets）缩写CSS。它用来定义HTML或者XML分支语言(文档内容)呈现的样式，比如设置文字大小，文字颜色,动画等效果。

一个简单的示例

h1{
  color:rgb(241,72,101)
}

image.png

语法

    选择器(Selector){
       属性(Property)：属性值（Property Value)  => 声明(Declaration)
    }

选择器（Selector)

HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 h1 元素）。要给不同元素添加样式只需要更改选择器就行了

属性(Property)

在示例中我们使用了color来改变h1标签的字体颜色，属性就是改变HTML中元素样式的唯一方法。

属性值(Property value)

color中rgb(241,72,101)就是对应的颜色值，这里使用的是css提供的rgb函数分别对应的是rgb(红,绿,蓝)

声明(Declaration)

声明由属性和属性值组成的，代表声明了某个属性，并且设置某个属性的值是什么。

常见选择器类型

元素选择器

h1{
 color:white;
}

在全局样式表里面声明以后，所有的h1元素标签字体都会是红色。

通配选择器

*{
 color:red;
}

选择所有元素

ID选择器

#demo1{
 color:red;
}

<p id="demo1">helloWorld</p>

ID选择器使用#声明，在元素标签上使用id来赋值，且只有唯一一个，不能重复。

类选择器(Class Selector)

.list{
   width:100%;
   display:flex;
   flex-flow:row nowrap;
}
.list-item{
 height:88px;
 background:#eee;
 border-radius：.2rem;
 padding:6px 12px 6px 12px;
}

<ul class="list">
   <li class="list-item">1</li>
   <li class="list-item">2</li>
   <li class="list-item">3</li>
</ul>

类选择器，可以使用多次，使用"."来声明，并且可以使用DOM方法，document.getEelmentByClassName来获取当前文档内容中某个特定类选择器样式的集合。

属性选择器

属性选择器，使用[]来选择a元素里面的href属性，改变了a元素链接的字体颜色。通常可以用来修改input框没有输入时候的提示语属性颜色字体样式。在input里面可以根据input的type类型来进行不同的样式设置。

伪类

伪类分为状态性伪类，结构性伪类。状态性伪类比如:hover定义了某个元素块被鼠标悬停的时候触发,:visited代表访问过链接的元素。结构性伪类，:fisrt-child代表父元素的第一个子元素，比如list:first-child可以获得第一个li元素，值为1的li标签。

组合

直接组合 AB 满足A同时满足B input:focus

后代组合 A B 选中B，如果它是A的子孙 nav a

亲子组合 A>B 选中B如果它是A的子元素 section>p

兄弟选择器 A ~ B 选中B 如果它在A后面且和A同级 h2~p

相邻选择器 A+B 选中B 如果它紧跟在A后面 h2+p

CSS 求值过程

3836c59fa7c7426c88bd6fbb9ccdcbe4.png

css系统中，每个属性都有默认值。也就是每个属性值即使不写我们都是由默认值和初始值的。 计算CSS值的过程，首先得确定声明，这一步也就是某个元素有多个声明规则，然后在进行cascading来确定在声明中优先级最高的规则,如果这个步骤中，规则没有设定值，可能会使用默认值或继承上一个父元素的值，然后在进行数据单位的转换，最后产生实际值。

盒子模型

image.png

一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

布局

布局主要用来设置元素的位置，大小。常规下我们可以使用块级，行级，表格布局，FlexBox，Grid布局，来对元素进行布局。还可以使用浮动，绝对定位来对元素。

简单的flex布局

使用flex布局，可以很快速的创建响应式布局。

avatar
文章
阅读
粉丝