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

一、CSS

1.CSS是什么?

CSS 即层叠样式表 (Cascading Style Sheets)。是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2.CSS样式如何引用？

css的引用方式主要有以下三种

1.内嵌式--CSS写在style标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style-type: none;;
        }
    </style>
</head>

2.外联式--CSS样式写在一个单独的.css文件中

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
    
</head>

3.行内式--CSS写在标签的style属性里

<body>
    <div style="color: blueviolet;">此时此刻，在这个舞台上，欧豪，你，是我的神</div>
</body>

3.CSS进阶

字体样式

<1>字体大小 font-size

在这里插入图片描述

<2>字体粗细 font-weight

正常	normal	400
加粗	bold	700

<3>字体样式（是否倾斜）font-style

正常值	normal
倾斜	italic

<4>字体 font-famliy 在这里插入图片描述

无衬线字体	sans-serif
衬线	serif
等宽字体	monospace

<5>字体相关属性的连写 font(复合属性)

<style>
        div{
            font:italic 700 32px 宋体;
        }
    </style>

如果给同一个标签设置了相同的属性，此时样式会层叠

文本样式

<1>文本缩进 text-indent

数字+px
数字+em（1em = 当前标签的font-size的大小）

<2>文本水平对齐方式 text-align

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

text-align:center 能让

文字
span、a标签
input标签、img标签

如果要让文本水平居中对齐，text-align属性给文本所在标签（也就是文本的父元素）设置

<3>文本修饰 text-decoration

属性值	效果
underline	下划线
line-through	删除线
overline	上划线
none	无装饰线

<4>行高 line-height

可以通过设置行高使文字垂直方向居中

在这里插入图片描述

背景样式

<1>背景颜色 background（bgc） <2>背景图片 background-image（bgi） <3>背景平铺 background-repeat（bgr）

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

<4>背景位置 background-position（bgp） 在这里插入图片描述

二、选择器

1.标签选择器

顾名思义就是以标签命名的选择器选中所有的这个标签都会生效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: aqua;
        }
    </style>
</head>
<body>
    <div style="color: blueviolet;">你是我的神</div>
</body>
</html>

2.类选择器

联想到c语言里的函数函数需要声明和调用才能生效类需要定义和调用才能生效

在这里插入图片描述

3.id选择器

从前车马书信慢，一生只够爱一个人现在网络发达，id选择器还是只能找一个标签做一辈子的伴侣 在这里插入图片描述

4.通配符选择器

找到页面中的所有标签，设置样式

<style>
        * {
            color: aqua;
        }
    </style>

主要用于清除默认样式

5.后代选择器

会选中所有后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
    <style>
        div p {
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <p>我是div的儿子</p>
    </div>
</body>
</html>

在这里插入图片描述

6.子代选择器

只会选中他的“儿子”

在这里插入图片描述

7.并集选择器

同时选中多组标签，设置相同的样式

div,p{
            color: antiquewhite;
        }

此时body内的p标签和div标签都会被选中并更改颜色

8.交集选择器

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: blueviolet;
        }
        div.box {
            color: brown;
        }
    </style>
</head>
<body>
    <p>我是引用box类的p标签</p>
    <div>我是没有引用box类的div标签</div>
    <div class="box">我是引用box类的div标签</div>
</body>
</html>

在这里插入图片描述

9.伪类选择器

选中鼠标悬停在元素上的状态，设置样式

 <style>
        div:hover{
            color: antiquewhite;
        }
 </style>

鼠标放在div上的时候标签就会变成奶白色！！!

三、盒子模型

1.什么是盒子模型？

页面中的每一个标签，都可以看作是一个“盒子”，通过盒子的视角更方便地进行布局
浏览器在渲染（显示）网页时，会将网页中的元素看作是一个个矩形的区域，我们也形象地称之为“盒子”
CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

2.内容的宽度和高度content

利用width和height属性默认设置盒子内容区域的大小

写法：属性:数字+px

3.边框 border

<1>单个属性

作用	属性名	属性值
边框粗细	border-width	数字+px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

<2>连写形式

border:边框粗细边框样式边框颜色;

<3>单方向设置

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

属性名	属性值
border-方位名词	连写的取值

border-left: 5px dotted #000;

3.盒子的尺寸（CSS3自动內减）

如果已知盒子尺寸，边框尺寸，通过手动计算设置 width 和 height 盒子的尺寸 = （width + 边框）*（height + 边框）

如果不想手动计算，可以使用css3中的自动內减功能

box-sizing: border-box;

一旦使用了自动內减，此时的 width 和 height 就是盒子的尺寸

4.内边距padding和它的多值问题

padding可以当作复合属性使用，表示单独设置某个方向的内边距（最多取四个值）

<style>
        div{
            padding: 10px 20px 30px 40px;
            /*四值：  上   右   下    左*/
            padding: 10px 20px 30px;
            /*三值：  上   左右  下*/
            padding: 10px 20px;
            /*两值：  上下 左右*/
        }
    </style>

逆时针分配如果未分配看对面

5.外边距margin

版心居中

margin: 0 auto;

外边距折叠现象
- 合并垂直布局的块级元素，上下的margin会合并，最终两者距离为margin的最大值
- 塌陷相互嵌套的块级元素，子元素的margin会作用在父元素上，使父元素也一并移位

其余与padding有异曲同工之妙

CSS1 | 青训营笔记

一、CSS

1.CSS是什么?

2.CSS样式如何引用？

3.CSS进阶

二、选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

5.后代选择器

6.子代选择器

7.并集选择器

8.交集选择器

9.伪类选择器

三、盒子模型

1.什么是盒子模型？

2.内容的宽度和高度content

3.边框 border

3.盒子的尺寸（CSS3自动內减）

4.内边距padding和它的多值问题

5.外边距margin