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

基础

如何在页面中使用CSS

有三种方式。

第一种是内联，直接在标签内添加style属性来控制该标签内容，不建议使用

<p style="font-size:26px;color: pink;">
        字体大小26px
</p>

第二种是嵌入式写法，在<head></head>内添加<style></style>来选择控制相应的内容

<style>
        p{
            font-size:26px;
            color: pink;
        }
</style>

第三种是链接外部CSS文件来更改当前页面的内容的样式，简称外链。推荐使用

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

CSS的使用

CSS用来定义元素的样式，例如设置字体的大小和颜色，内容的位置和长宽，还有给内容添加各种动画效果。 CSS用选择器来选中要控制的内容，常用的有标签选择器、ID选择器、类选择器、通配选择器和属性选择器。并且选择器有优先级，优先级越高页面内容就会优先使用该选择器来控制页面内容。优先级从高到低的排序为：ID选择器>类选择器>标签选择器>通配选择器>属性选择器。

例：

伪类选择器的组合方式：

同样的选择器还能写在全部写在一起，叫做选择器组，用它来实现统一控制页面内容样式。

p,h1,h2,div{
            font-size: 28px;
            color: #999;
        }

CSS工作原理

浏览器打开页面的时候，会加载页面的HTML进行渲染，解析出HTML的DOM树，同时加载出CSS并且解析CSS，然后浏览器会把DOM树的每个节点解析出来，再将对应的CSS样式渲染到DOM树里面，最终展示出设置好的效果。

设置颜色透明度

深入CSS

布局的相关技术

页面内会有多个容器，用CSS来控制对应容器的内容来实现页面的布局。布局常用的相关技术有三种，常规流、浮动、绝对定位。

常规流就是使用常规的块级元素和行内元素等在页面进行布局排版，如果不进行其他操作，页面内容会从上往下，从左到右来进行排列。

浮动就是让指定的容器漂浮起来，它可以覆盖掉块元素，但是不会覆盖行内元素。

绝对定位就是将子元素控制在父元素内的指定位置，它是相对于父元素的位置。

例子：

第二课理解CSS | 青训营笔记

基础