CSS样式基础：

CSS:外部文件导入  <link rel="stylesheet" type="text/css" href="./style.css">

一. css概述

CSS是英文Cascading Style Sheets(层叠样式表)的缩写，是一种标记语言，不需要编译可以直接由浏览器解释执行(属于浏览器解释型语言)。
1.内联式Inline（也叫行内样式）：<p style="color:blue;font-family:隶书"> 在HTML中如何使用css样式</p> 特点：仅作用于本标签
2.嵌入式（也叫内页样式）：<style type="text/css"> 选择器{width:100px;height:100px;background:red;} </style>  特点：作用于当前整个页面
3.外联式（也叫外部样式）：格式：<link rel="stylesheet" type="text/css" href="文件名.css"/>    特点：作用于整个网站
样式冲突: 就近原则 优先级：内联式 > 嵌入式 > 外联式，，没有样式冲突采用叠加效果。

二. CSS选择器

格式： 选择器{ 声明 1；声明2；声明3；.....声明N}其中选择器也叫选择符

例如：h1 {color:red; font-size:14px;}，h1为标签选择器 后面为属性和值组成的对，，，h1,h2,h3,h4,h5,h6{color:red;}

id选择符(注意：id选择符的名字只在网页中使用一次)，class类选择符(注意：类选择符可以在网页中重复使用)

PS:相同的选择器相同的属性 后面的代码作用会覆盖前面的代码作用
优先级：：行内样式 > ID选择器# > 类选择器. > 标签 > 通配符 > 继承 > 浏览器默认属性
继承：：即子类元素继承父类的样式，，自己定义了元素属性，就听自己的，没定义就去继承父集元素的属性
层叠：：相同的选择器相同的属性 后面的代码会覆盖前面的代码
PS：优先级相同时，则采用就近原则，选择最后出现的样式; 继承得来的属性，其优先级最低;

三.颜色属性

1.HSL颜色:通过对色调(H)0-360、饱和度(S)0-100、亮度(L)0-100           例： color: hsl(240,100%,50%);

2.HSLA颜色:色调(H)、饱和度(S)、亮度(L)、透明度(A)0-1。          例：color:hsla(0,100%,50%,0.2);

3.RGB颜色:红(R)、绿(G)、蓝(B)三个颜色通道的变化rgb(255,255,255) = rgb(100%,100%,100%)
      以上三个参数，正整数值得取值范围为：0-255，百分比数值的取值范围为：0.0%-100.0%，超出范围的数值将被截至其最接近的取值极限。rgb(300,0,0)会被解析rgb(255,0,0)

4.RGBA颜色:红(R)、绿(G)、蓝(B)、透明度(A)               例： color: rgba(0,0,0,0.5);

5.十六进制色彩的表示方式，，取值范围：0-9 a-f，         例：color:#c81623;

6.英文单词，颜色构成：red blue green

PS：颜色选择工具下载地址：https://www.sttmedia.com/pipette-download

四.CSS字体属性

font-size:14px;   字体大小
font-family:Arial;
font-style：  设置或检索对象中的 文本字体样式
font-style:normal;
font-style:italic;   斜体
font-weight：  设置文本字体的粗细
font-weight:normal;   正常相当于数字值400
font-weight:bold;   粗体相当于数字值700

五.CSS文本属性

color：  字体颜色      color:#c81623;
text-align: 　　 文本的位置：   left center right
text-decoration:    字体画线：none无、underline下画线，line-through贯穿线
background:green;  
background-color:#fff;  
line-height： 行高   line-height:20px;  如果等于div高度，则为上下居中，
word-spacing：    单词间距     word-spacing:30px;
text-shadow:       文本的文字是否有阴影及模糊效果        text-shadow:0px 0px 3px #ff0000;
text-indent:      首行缩进：     text-indent:30px;
direction：    文字流方向。    ltr | rtl direction:ltr;
letter-spacing:     文字或字母的间距      letter-spacing:30px;

六. CSS边框属性

border:复合属性,设置对象边框的特性,    例：border : 1px solid red;   border-top:5px solid red;  border-bottom:5px solid green;
border-color: 设置或检索对象的边框颜色。如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

border-style:设置或检索对象的边框样式。参数个数法则如上。。

solid:实线轮廓。dotted:点状轮廓。dashed:虚线轮廓。double:双线轮廓，两条单线与其间隔的和等于指定的border-width值
groove:3D凹槽轮廓。ridge:3D凸槽轮廓。inset:3D凹边轮廓。outset:3D凸边轮廓。

border-width:设置或检索对象的边框宽度
border-radius: 设置或检索对象使用 圆角边框。     例如：border-radius:50%;这就成圆了，border-radius:10px;
background-image:linear-gradient(45deg,orange,green,red,blue);  线性渐变属性 0-360 deg
background-image:radial-gradient(orange,green);/*径向渐变*/

七. CSS定位属性

position:    定位方式：absolute(绝对定位)、fixed(固定)、relative定位参考（可对内部相对absolute定位）
/* position:absolute;       绝对定位    top:50px; left:50px; */
/* position:relative;         相对定位    top:50px; left:50px; */

八. CSS浮动属性

Float 浮动。。   Float:left 左浮动。。   Float:right 右浮动
margin:0 auto;    /*大 div 里面套用小 div  的自动左右居中*/
对齐操作：

1.使用margin属性进行水平对齐
　　Margin-left：auto；
　　Margin-right：auto;
2.使用position属性进行左右对齐
　　Position:absolute;
　　Left:0;
　　Right:0;
3.使用float属性进行左右对齐
　　Float:left;
　　Float:right

背景属性：

background-color： 背景颜色
background-image:url(“背景图片地址URL”)   例：background:url('./pwd-icons-new.png') no-repeat -42px -91px;
background-repeat: 图片是否平铺值：

repeat 默认 x轴 y轴 都平铺
no-repeat 不平铺 ，只加载一张原来大小，
repeat-x x轴平铺 y轴不平铺
repeat-y y轴平铺 x轴不平铺

background-position: 图片的位置

一个值  代表 x 轴的位置
两个值  第一个值代表x轴 第二个值代表 y轴
注意： 图片的开始点 （0,0） 点 是从图片的左上角开始算起 跟标签没有关系

九. CSS盒子模型

1.内补白（内补丁）内边距

padding：检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top： padding-right： padding-bottom： padding-left：

2. 外补白（外补丁）外边距

margin：检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;

注：中心div块，外是padding:50px;，外是border:5px solid blue;，下面是background:red;  前面的都在背景色或背景图上，，，最外是margin:50px;超出背景图了。

十.CSS伪类元素

a:hover{color:green; text-decoration:underline;} /*鼠标滑过链接 变绿色，加下划线*/
a:link{color:red;} /*未访问的链接*/
a:active{color:pink;} /*鼠标点击的效果*/
a:visited{color:blue;} /*访问过的链接*/

例：*{ padding:0px; margin:0px;} 以*开头，表示所有的网页都遵循

body{ font-family:"微软雅黑";} 网页主题的默认字体

a{ text-decoration:none; color:#999;} 网页中所有的 a 链接，去掉下划线，颜色为999

多媒体标签 ：
<!--视频标签-->   ：   <video width="420" controls="controls" poster="./1.png"> <source src="fun.mp4" type="video/mp4"> </video>
<!--音频标签-->   ：   <audio controls="controls"> <source src="_WStyle.mp3" type="audio/mp3"> </audio>