HTMl&CSS 基础（二） | 青训营笔记

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

CSS也是前端开发的重要基础知识，只有学好基础才能进阶，让我们走进今天的学习吧

HTML与CSS

本堂课的重点内容

了解什么是CSS
认识CSS以及学习CSS的常见用法

问题

什么是CSS？

CSS：层叠样式表（Cascading style sheets）。控制HTML标签的样式，包括宽高、位置、边距、颜色、字体字号等。

CSS：

使用方法

内嵌式：一般用于小案例、学习、演示。位置：header中，title下面。style标签。
外联式：一般用于项目正式发布。
行内式：使用频率低，一般配合js使用。

CSS的组成

包括选择器和CSS属性组成。每个CSS属性包括属性名和属性值。每个CSS属性之间用;分割。

例如：

P{
    color:red;
    }

选择器

标签选择器

直接通过标签名，找到页面中所有这类标签，不限层级。

标签名 { css属性名：属性值； }

<style>
    p{
        color: red;
        background-color: green;
        width: 400px;
        height: 200px;
        font-size: 18px;
    }

类选择器

通过类名，找到页面中所有带有这个类名的标签。

.类名 { css属性名：属性值； }

设置标签class属性的属性值称为类名，同一个标签可以设置多个类名。注意类名之间用空格分割。

<style>
    .fs15{
        color:blue;
        font-size: 15px;
        background-color:yellow;
    }
    .red{
        color: red;
    }
 </style>
 
<p class="red">这里是P标签</p>
<span class="red fs15">这里是span标签</span>
<p class="red fs15">hello world</p>

字体样式

字体大小：font-size：数字 + px。通常默认文字大小是16px
字体粗细：font-weight：加粗bold、数字100-900
字体样式：font-style：italic或normal
字体类型：font-family：字体系列，设置多个用，分割
字体类型：font属性连写font : style weight size family；

文本样式

文本缩进：text-indent。数字+px、数字+em
文本对齐方式：text-align：left|center|right。可以让标签内的文字、图片、input、span、a标签居中，因此设置父级标签。
文本修饰：text-decoration : underline|line-through|overline|none。
行高：line-height：数字+px、数字即几倍行高。

盒子模型

由内容content、内边距padding、边框border、外边距margin构成。

边框

border:边框样式边框宽度边框颜色

宽度：单条边的宽度。

样式： solid（实线）dashed（虚线）dotted（点线）。

整个盒子大小 content+border。

单独设置某条边框：border-top|bottom|left|right：样式。

定位position属性

static 默认值，非定位元素

relative 相对自身原本位置偏移，不脱离文档流

absolute 绝对定位，相对非static祖元素定位

fixed 相对于视口绝对定位

position:relative

在常规流里面布局
相对于自己本身应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
刘内其它元素当它没有偏移一样布局

position:absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

总结

学了CSS让我的页面变得色彩丰富了，发现前端开发是这么的有趣，我也知道这都是基础，所以我也得打好基础，保持学习，这样才能学好后续的知识。

学到这我想大家也对CSS有了初步的认识了吧，不如现在就开始动手练习练习吧

如果你有任何建议都可以在评论区留言，或发电子邮箱，欢迎大家评论留言(ˆ⌣ˆ）

作者：Yifan

日期：2022年7月24日

电子邮箱：1279640748@qq.com