外部引入CSS样式表代码
<link rel="stylesheet" href="/css/外部样式表.css">

字体样式       

字体：font-family                ( "隶书"  "楷体" )

字体大小：font-size            ( px  像素 )

字体风格：font-style           (  italic       斜体 )

字体粗细：font-weigth        (  bold ( 100~900 ) 定义粗体字符 )

文本样式

color：        1️⃣red   2️⃣#362596  3️⃣rgb(32,250,50)

text-align ：1️⃣ left   2️⃣center   3️⃣right

text-decoration

1️⃣none:默认

2️⃣underline：定义文本下划线

3️⃣overline：定义文本上划线

4️⃣line-through：定义穿过文本的一条线

text-indent： 设置首行文本的缩进

line-height： 设置文本的行高

鼠标样式

defalut：  默认光标

help：        指示可用的帮助

text：          指示文档

crosshair:   鼠标呈现十字状

wait：         等待状态

pointer：    超链接指针

背景样式

背景颜色：background-color  

1️⃣red 

2️⃣#536256

3️⃣rgb(30,250,13)

背景图片：background-image:url(图片路径)   

1️⃣图片绝对路径

2️⃣图片相对路径

背景重复方式：background-repeat    

1️⃣no-repeat   不重复

2️⃣repeat-x      水平重复

3️⃣repeat-y      垂直重复

4️⃣repeat         默认重复

背景定位：background-position  

1️⃣像素：px

2️⃣水平方向：left、center、right

3️⃣垂直方向：top、center、bottom

 简写小技巧💭

简写样式代码
background：图片地址，图片重复方式，背景颜色，背景定位

 列表样式

 list-style-type：（1）无序列表 

1️⃣disc 实体圆心（默认）      

2️⃣circle 空心圆      

3️⃣square 实体方心      

4️⃣none   无列表标记

（2）有序列表      1 / a / A / i  /  I

list-style-image：自定义列表标记为图片  属性值：url(图片路径)

list-style-position: 列表标记定位    1️⃣outside   2️⃣inside

简写小技巧🌪️

列表样式简写
list-style:disc,url(./素材/2.jpg),outside;

CSS伪类 

link：       单击访问前

visited：  单击访问后 

hover：    鼠标悬浮其上 

active：   单击未释放

 CSS高级选择器

并集选择器：多个选择器通过逗号连接而成

交集选择器：第一个必须是标签选择器，第二个必须是类选择器或者ID选择器（两个选择器之间不能有空格）

后代选择器：外层在前面  内层写后面  之间用空格分隔（ 使用标签选择器、id选择器、类选择没有先后顺序）

子元素选择器：通过  >  连接在一起而成

属性选择器：选取带有指定属性的元素

小思考💡

什么是盒子模型 ？

盒子模型边框样式

属性	样式
border-top-style	1、none：无边框 2、solid：实线边框 3、dashed：虚线边框 4、dotted：点状边框 5、double：双线边框 6、hidden：与none相同，应用于解决边框冲突
border-right-style
border-bottom-style
border-left-style
超级简写：        border-style  （同时设置四边样式）

边框颜色	边框宽度
上：      border-top-color	上：        border-top-width
右：      border-right-color	右：        border-right-width
下：      border-bottom-color	下：        border-bottom-width
左：      border-left-color	左：        border-left-width
四边同时：    border-color	四边同时：        border-width

“ 边框 ”超级简写
上边框：border-top	粗细   颜色   样式
右边框：border-righ	粗细   颜色   样式
下边框：border-bottom	粗细   颜色   样式
左边框：border-left	粗细   颜色   样式
四边框同时：border-color	粗细   颜色   样式

内边距：padding	外边距：margin
padding-top（顶部）	margin-top（顶部）
padding-right（右边）	margin-right（右边）
padding-left（底部）	margin-left（底部）
padding-bottom（左边）	margin-bottom（左边）

网页文本流

(1)标准文档流

块级元素：<h1> - <h6>、<p>、<div>、列表等

内联（行内） 元素：<span>、<a>、<img>、<strong><em>等

display 属性
none  设置元素不会被显示
inline 元素显示为内联（行内）元素
block 元素会被显示为块级元素
inline-block 行内块元素
display属性作用： 控制元素的显示和隐藏   块级元素和内联(行内)元素的转变

浮动设置与清除

float 属性	left  元素向左浮动
	right  元素向右浮动
	none  默认值 元素不浮动
clear 属性	both  在左、右两侧不允许浮动元素
	right  在右侧不允许浮动元素
	left  在左侧不允许浮动元素
	none  默认值，允许浮动元素出现在两侧

浮动（overflow） 

auto：自适应，如果内容被修剪，则浏览器会显示滚动条来查看超出内容

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看超出内容

hidden：内容会被修剪，并且超出的内容是不可见的

visible：默认值。内容不会被修剪，会呈现在盒子之外

定位（position） 

relative:     相对定位相对的是它原本在文档流中的位置而进行的偏移，相对定位也是遵循正常的文档流，它没有脱离文档流

absolute:   绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

fixed:         相对于浏览器窗口进行定位。不会根据滚动条的滚动而进行偏移

static:        默认值，没有定位

z-index:      调整元素定位时重叠层的上下位置，值大的层位于其值小的层上方