Collection
Collection
第一章：css快速入门
一，css的基本语法：
1，内联样式：只针对当前标签<标签 style=”css属性：属性值：”>
<body style ="background:pink;">
2，内部样式：只针对当前写法：在head元素内部 标签名{属性：属性值}
p{color:pink}
3，外部样式：共享的css文件需要引用一个外部的css文件：
二，css的基础选择器（元素，类别，ID）
/选择器{声明}
选择器{属性：属性值；属性：属性值；}/
p{color:red;}
/选择器的分组/
h1,h2,h3,h4{font-size:40px;}
三，派生选择器与属性选择器
/元素选择器/
html{color：red;}
p{text-align:center;}
/类别选择器/
.list-1{color:green}
p,.list-1{font-size:40px;}
.list-1,.list-2{color:pink;}
/id选择器/
四，css中的伪类
/派生选择器：（后代，子元素，相邻兄弟）/
/后代选择器/
ul em{color:blue;}
ul b{color:pink;}
/子元素选择器/
ul>li{font-size:60px;}
li>em{font-size:40px;}
/相邻兄弟选择器/
ul+ol{text-align:center;}
/属性选择器/
a[href]{color:blue;}
a[href+定义的网址]{color:green;}
五，css中伪元素
语法：选择器：伪类型 {样式}
锚伪类：（未被访问状态，已被访问状态，鼠标悬停状态，活动状态）
：link 未被访问的链接添加样式
a：link{color:pink;}
：visited 向已被访问链接添加样式
a:visited{color:red;}
：hover向鼠标悬停时向元素添加样式
a:hover{background:blue;}
：active向被激活的元素添加样式
a:active{color:#fff}
：focus向拥有键盘输入焦点的元素添加样式
input：focus{background:blue;}
：first-child 向第一个子元素添加样式
p:first-child{font-size:50px;}
p:first-child b{color：red；}
第二章：css中常见样式
一，css中的文本控制
color：设置文本颜色
h1{color：pink}
direction：设置文本方向
h2{direction：rt1；}
line-height：设置行高
p{line-height：40px；}
letter-spacing：设置字符间距
p{line-height：40px；letter-spacing：2px；}
word_spacing:设置字间距
text-indent：缩进首行文本
p{line-height：40px；letter-spacing：2px；text-indent：2em；}
text-decoration：向文本添加修饰
h3{text-decoration：underline；}文本有下划线
h4{text-decoration：overline；}文本上面有横线
h4{text-decoration：line-through；}文本中有横线
a{text-decoration：none；}没有横线
text-align:对齐元素中的文本
h1{color：pink；text-align；right；}
text-transform：控制元素中的字母
.one{text-transform:capitalize;}定义文本中首字母为大写
.one-1{text-transform:uppercase;}定义文本中字母全是大写
.one-2{text-transform:lowercase;}定义文本中字母全是小写
二，css中的字体控制
font-family:属性定义文本的字体系列（通用系列：serif,sans-serif,monospace,cursive,fantasy）
/通用系列/
h1{font-family:monospace;}
/特定/
h2{font-family:dosis;}
font-style:属性规定斜体文本（normal，italic，oblique）
font-weight:属性用来设置文本粗细的（normal，bold,100~900）
font-size ：属性用来设置文本的大小（px\em\%）
三，css中的背景控制
background-color：属性设置元素的背景颜色（color-name\hex-name\rgb-name）
background-image:属性为元素设置背景图形
例A .list-2{background-image(images/1.png)width:100px;height:100px;}
background-repeat：属性设置是否或者重复背景图像（repeat\repeat-x\repeat-y\no-repeat）
background-position:属性设置背景图像的起始位置（top，bottom，left，right，center\%\px）
四，css中的列表控制
list-style-type 属性设置列表标记的类型（disc/none/square/decimal/…）
list-style-：属性使用图像来替换列表项的标记
list-style-position：属性设置在何处放置列表项标记
list-style：复合写法
四，css中的链接控制
a{color:#ccc;font-size:20px;}
五，css中的表格控制
border-style：属性用于设置元素边框的样式（dotted,solid,double,dashed/…）
border-collapse:属性设置是否将表格边框折叠为单一边框(separate/collapse)
border-spacing:属性设置相邻单元格的边框间的距离(length length)
caption-size:属性设置表格标题的位置(top/bottom)
表格中的文本对齐方式：
text-align：属性设置水平对齐方式(left/center/right)
vertical-align:属性设置垂直对齐方式(top/center/bottom)
六，css中常见的伪元素
before：该元素定义在元素之前添加内容
h1:before{conntent:ur1(图片来源)；”哈喽！”}
after：该伪元素定义在元素之后添加内容
first-line：该伪元素向文本的首行添加内容特殊样式
first-letter：该伪元素向文本的第一个字母添加特殊样式
第三章：css中的盒模型
{margin：0px；padding：0px;}内外边距为零。
一，css的边框
border-style：属性用于设置元素所有边框样式
border-width：属性为元素的所有边框设置宽度（thin\nedium\thick\length）
border-color:s属性设置四条边框的颜色
border：简写属性，用于把针对四个边的属性设置在一个声明内
二，css的内边距
{padding:0px;}
padding：简写属性在一个声明中设置所有内边距属性（auto、length/%）通过使用下面四个单独属性可以分别设置上，下，左，右内边距：
padding-top
padding-right
padding-bottom
padding-left
三，css的外边距
{padding：0px；margin：0px；}
margin：是简写属性可以声明中设置所有外边距属性（auto/lenfht/%）该属性可以有1到4 个值
第四章：css的定位
一：css的相对定位
position：relative；设置为相对定位的元素框会偏移某个距离，语速仍然保持其未定位前的形状，它原本所占的空间仍保留；(positiion与top,bottom,right,left连用)
二，css中的绝对定位
position：absolute；设置了绝对定位的元素框从文档流完全删除并且元素原先在正常文档中所占的空间会关闭，就好像该元素原来不存在一样，位置是相对于已定位的父级元素或者是初始包含块定位
三，css中的浮动
float：属性定义元素在那个方向浮动（left/right）
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止，由于浮动框不在文档的普通流中，所以文档的普通流中的块表现的就像浮动框不存在一样。
clear：属性规定元素的那一侧不允许其他浮动元素（left/right/both）
第五章，css实战案列
一，css实战布局
border：radius；属性控制圆角（与top，bottom.left,right连用）
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
