CSS3入门

介绍

https://www.runoob.com/css/css-tutorial.html

CSS特点：美化网页   一般称为 CSS样式表

初始CSS

书写格式：
选择器{
    属性:值;
    ...
}

总结：选中正确的标签，设置正确的属性和值。

CSS书写位置

CSS—共有三种书写位置：行内式、内嵌式、外链式

行内式

直接写在标签的 style 属性中

格式：<标签 style="属性:值;属性:值;...">

内嵌式

将CSS代码内嵌在HTML文档的 style标签 中

格式：选择器{属性:值;属性:值;...}

外链式

使用 link 标签外链另一个CSS文件

image-20220616160406109

三种方式对比

image-20220616160740329

基础选择器

选择器的作用：从HTML文档中找到要设置样式的标签

基础选择器：标签选择器、id选择器、类选择器

标签选择器：

优点：一次性选择所有页面中的标签

缺点：不能个性化选择、设置标签

image-20220616161256235

id选择器

优点：能精确的选择标签

缺点：不能一次性选择多个标签

<style>
    #p1{
        color:red;
    }
</style>

<p id="p1">举头望明月，</p>

类选择器

使用标签中class属性的值将页面中的标签选出来

任何标签都有class属性，不同标签的class值可以是相同的

重点:在style标签中使用类选择器时必须在前面加上 .

<style>
    .red{
        color:red;
    }
</style>

<h1>静夜思</h1>
<p class="red">床前明月光，</p>
<p>疑是地上霜。</p>
<p class="red">举头望明月，</p>
<p>低头思故乡。</p>

优先级

image-20220616163136661

多类名

一个 class 属性可以同时设置多个值，类名之间使用空格进行分隔，每个类名的CSS样式都会生效

image-20220616165821222

通配符选择器

星号( * )就是通配符选择器，能够一次性选择页面中所有标签，但是会影响页面响应速度，不建议使用

样式的两个特性

1. 层叠性：多个选择器设置的样式可以叠加在同一标签上

当样式出现冲突时，优先考虑权重;权重相同的情况下，采用就近原则

1. 继承性：子标签继承父标签的某些样式

text- , font- , line- , color 这些会被继承

文字样式

image-20220616172148931

font-size

image-20220616173206069

image-20220616173216331

如果页面中没有使用css样式设置字体大小，则浏览器使用默认大小

font-family

用于设置文字采用的字体样式，例如：宋体、微软雅黑等等

font-weight

用来设置字体粗细，body{font-weight: bold;}

image-20220616175826303

font-style

字体倾斜，p{font-style: normal;}，normal：正常(默认) | italic：倾斜

font连写

body {
    font: font-style  font-weight  font-size/line-height  font-family;
}

连写时，必须按上面的顺序书写，属性之间使用空格隔开。

font-style、font-weight 可以省略(一般不写)。

font-size、font-family 一般设置在body标签中。

图片描述

font: 12/1.5 字体大小为12px，行高为1.5倍

文本样式

image-20220616183411165

color

用于设置文本蓝色

<!-- 语法 -->
p {
    color: red;
}

image-20220616225833811

text-align

用于设置文本水平对齐位置，该属性只能用于占据整行的标签。

text-decoration

用于设置文本划线

1. underline：下划线
2. overline：上划线
3. line-through：删除线
4. none：没有划线

image-20220616231739597

text-indent

用于文本缩进，最常用与段落开始的两个空格

text-indent: 2em;

复合选择器

复合选择器就是使用多个基本选择器联合找到页面中的标签

子代&后代选择器

image-20220616234826794

image-20220616235040534

image-20220616235526025

交集选择器

使用同—个标签中的两个选择器，同时选中—个标签

image-20220617000452682

并集选择器

并集选择器用来同时选中多个标签，并为这多个标签设置样式

image-20220617000643026

连接伪类

• a 标签有四种状态，可分别设置样式：
  • a:link /* 未访问的链接 */
  • a:visited /* 已访问的链接 */
  • a:hover /* 鼠标悬浮在链接上 */
  • a:active /* 选定的链接 */

注意事项：

链接伪类：必须按顺序来写

实际项目中，只设置 a 标签基本样式 和 hover 伪类样式

选择器权重

image-20220617003337866

块元素和行内元素

HTML标签主要分为块标签和行内标签两种类型，也称为块元素和行内元素

块元素

快元素会独占一行，例如：<p>、<h1>、<div> 等。

行内元素不会占用整个一行，例如：<span>、<b>、<i> 等。

文字居中

左右居中：text-align: center

垂直居中：line-height

line-height 的值要等于height

行内元素

行内元素不能设置宽高 行内元素只能容纳文本或则其他行内元素，不能填充块元素

三种元素相互转环

image-20220617153907167

display:inline --> 将标签转为行内元素
display:block --> 将标签转为块元素
display:inline-block --> 将标签转为行内块
display:none --> 隐藏元素

字体图标和背景颜色

字体图标

进入阿里图标库：https://www.iconfont.cn/

span标签引入字体图标

背景颜色

background-color: 预定义/十六进制颜色/rgb(0,0,0)

背景图

background-image: url(路径)

背景图平铺

image-20220617163154260

background-repeat

可选值：repeat、no-repeat、repeat-x、repeat-y

CSS background-repeat 属性 (w3school.com.cn)

背景图位置

background-position: X轴 Y轴

image-20220617163411593

背景附着

背景附着就是背景是滚动的还是固定的

background-attachment:scroll fixed;
/* scroll 滚动 | fixed 固定 */

盒子模型

常用的html标签都可以看做是一个盒子，称为盒子模型

盒子由四部分组成：

1. 外边距（margin）：是元素与元素之间的距离，或者是元素外面留出的一段空白
2. 内边距（padding）：元素里的内容与元素边框之间的距离
3. 边框（border）：元素本身
4. 内容（content）：元素中放置的东西

边框

语法：border:border-width | border-style | border-color

image-20220617231736498

常见线型

image-20220617232518577

边框拆分写法

方位：top(上)、bottom(下)、left(左)、right(右)

其他：widht(粗细)、style(样式)、color(颜色)

圆角边框

border-dadius: length(可使用像素值或百分比)

内边距

内边距(padding)：设置内容与边框之间的距离

image-20220618000018712

外边距

外边距(margin)：设置元素之外的距离

盒子大小计算

image-20220618011400922

box-sizing

box-sizing：指定计算盒子宽高的方式，有两个可选值content-box(默认) 和 border-box;.

当设置为border-box时，width和height就是最终宽高，不再受padding影响

外边距塌陷

同—列上下两个元素相邻，并且上有margin-bottom，下有margin-top时，会发生塌陷。塌陷之后的margin取最大值

盒子阴影

image-20220618015137757

image-20220618015639726

div{
    width: 200px;height: 200px;
    background-color: pink;
    margin: 100px auto;
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.3);
}

列表样式

列表样式是针对 ul-li / ol-li 设置的样式 作用：去掉圆点、使用图片代替远点

list-style-type：设置圆点(序号)样式

list-style-image：设置图片代替圆点

list-style：既能设置圆点样式，又能设置图片样式

浮动及清除浮动

css提供3种布局机制： 普通流(标准流)、浮动(float)、定位(positon)

普通流

普通流又叫标准流，是浏览器默认使用的方式

块元素从上向下的顺序排列

行内元素从左到右的顺序排列（碰到父元素边缘则自动换行)

浮动

让一行内容纳多个盒子

image-20220618164236101

浮动的核心:脱离普通流(标准流)的控制（漂浮)

image-20220618164344742

浮动后，会把本来占据的空间让给下一个元素

元素浮动后，会被转换为类似行内块的元素

浮动的元素互相贴靠一起的，但是如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

float:inherit;该属性为继承父元素的浮动属性

列表浮动

image-20220618191429889

清除浮动

image-20220618201312106

额外标签法

添加一个新标签，设置该标签清除浮动

clear : left | right | both

image-20220618201719929

父级添加overflow法

产生问题的父标签添加 overflow 属性

overflow: hidden | auto | sroll;

after 伪元素法

after伪元素法是额外标签法的升级版（推荐) 核心原理:利用CSS3的新特性自动创建一个叫做after的伪元素，再使用clear:both进行浮动清除

image-20220620165637849

双伪元素法

双伪元素是after伪元素的升级方法 核心原理:利用CSS3的新特性自动创建before和after两个伪元素，再使用clear:both进行浮动清处

image-20220620171200405

清除浮动细节

推荐用法

after伪元素法(京东)、双伪元素法(小米商城官网)。

伪元素法

.clearfix:after{
    content: "aaa";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix{
    *zoom:1;
}

双伪元素法

.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1;
}

隐藏

display: none; 和 visibility: hidden; 的区别

visibility 方式隐藏的元素在页面中仍然占据空间

overflow 溢出

• 设置父盒子宽高的情况：

image-20220620173428312

• 父盒子只有宽没有高，且内部都是另一个浮动的盒子
  • hidden|auto : 清除浮动，父盒子自适应子盒子的高
  • scroll : 清除浮动，左侧和下方加滚动条

定位

将盒子定在页面的某一个位置（漂浮)

• 定位由两部分组成：
  • 定位模式：相对定位、绝对定位、固定定位、静态定位
  • 边偏移：top、left、fight、bottom

image-20220620175555984

静态定位(static) 就是无定位，无法使用边便宜来调整盒子的位置。

相对定位

相对定位(relative)是元素相对于自己在标准流中原来的位置 不会放弃它在标准流中占据的位置

*{
    position: relative;
}

绝对定位

绝对定位(absolute)是以带有定位(相对、绝对、固定)的父级元素来计算定位位置 如果父元素没有定位，则找父级的父级，..…. 。如果都没有则会以浏览器为准定位

{
    position:absolute;
}

子绝父相

==子绝父相（口诀)∶子元素使用绝对定位，父元素使用相对定位==

父元素使用相对定位不脱标，更加方便页面布局。

子元素使用绝对定位退表，可以在父元素中随意定位。

固定定位

固定定位就是将盒子定位到页面的固定位置 固定定位也是投标，只认浏览器的可视窗口

{
    position: fixed;
}

堆叠

定位会让盒子重叠，后面的盒子会压住前面的盒子 z-index能够调整盒子的堆叠顺序，每个盒子默认值都是О

div {
    width: 200px;
    height: 200px;
}
.one {
    position: fixed;
    top: 0;
    left: 0;
    background-color: green;
    z-index: 1;
}
.two {
    position: fixed;
    top: 50px;
    left: 50px;
    background-color: gray;
}
.three {
    position: fixed;
    top: 100px;
    left: 100px;
    background-color: chocolate;
}

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>