css样式的属性作用及用法

1、css介绍。
添加样式。
优点：HTML负责结构，CSS负责外观，系统维护更轻松，一个样式管理多个页面，
就近原则：行内样式>内部样式>外部样式

2、css引入方式
行内/内联样式：
写在body里

这是一个段落。

内部样式表：
写在head里

外部样式表:
写在head里

type="text/css":引入类型 stylesheet引入关系，stylesheet样式表 href="mystyle.css"引入路径 rel:说明当前文档与被链接的文档之间的关系

3、选择器
全体选择符： “*”
元素选择器符： “div”
类选择器符: “.”类名
id选择器符：“#”id名
后代选择器符：选择的是div里面的，中间有西文空格
组合选择器符：选择的是div里面，要有class属性。
分组选择器符：用逗号链接id选择器
伪类选择符：链接访问。a:link选择所有未访问链接，a:visited选择所有访问过的链接，a:hover 选择鼠标在链接上面时。

样式：
文本样式
text-indent:20px/rem; 首行缩进
text-align: 对齐样式
line-height: 行高
white-space: 文本空白处理(pre保留空白，nowrap不留白不换行直到
)
text-decoration 文本装饰效果（下划线）
图片样式：
vertical-align: 图片垂直对齐样式
border-radius: 图片圆角样式

字体样式：
font-size 字体尺寸
font-family 字体类型（楷体）
font-stly 字体样式（斜体）

背景样式：
background-image: url()图片路径 背景图
background-repeat 背景图不重复
background-repeat-y 垂直铺垫
background-repeat-x 水平铺垫
background-repeat:space;水平铺垫，距离等分，图片完整
background-repeat:round; 平铺方式，图片完整
background-color 背景颜色
background-attachment: 设置背景类容是scroll滚动或是fixed固定
background-clip 指定对象的背景图像向外裁剪的区域
background-size 设置对象背景图像的尺寸大小。
background-size:cover;铺满背景；
background-position: 移动背景位置，左上角为00（水平位置 垂直位置）

盒子模型：
1.外边距
2.边框
3.内边距
4.自定义的元素的大小
margin：从自身的边框到外部某个元素边框之间的距离，作用：设置与某个元素的距离。
padding：从自身的边框到内部某个元素之间的距离，作用：可撑大元素。

margin的语法结构：
margin: 100px; 设置四个边的外边距。
margin: 100px 80px; 第一个值：上下外边距。第二个值：左右外边距。
margin: 100px 80px 50px;第一个值：上外边距。第二个值：左右外边距。第三个值：下外边距。
margin: 100px 80px 50px 30px; 分别代表上，右，下，左的外边距。
margin-top: 100px; 设置上外边距。
margin-left: 80px; 设置左外边距。
margin-right: 50px; 设置右外边距。
margin-bottom: 30px; 设置下外边距。

padding的语法结构：
padding: 100px; 设置四个边的内边距。
padding: 100px 80px; 第一个值：上下内边距。第二个值：左右内边距。
padding: 100px 80px 50px;第一个值：上内边距。第二个值：左右内边距。第三个值：下内边距。
padding: 100px 80px 50px 30px; 分别代表上，右，下，左的内边距。
padding-top: 100px; 设置上内边距。
padding-left: 80px; 设置左内边距。
padding-right: 50px; 设置右内边距。
padding-bottom: 30px; 设置下内边距。

border的语法结构：
border-style:设置边框的样式。
none：设置无边框。
dashed：虚线。
dotted： 点状线。
double： 双实线。
solid：实线。
groove:3D凹槽效果。
ridge：3D垄起效果。
border-style:solid; 代表四个边框的样式。
border-style:solid dashed;一.上下边框的样式。二.左右边框的样式。
border-style:solid dashed dotted;一：上边框的样式。二：左右边框的样式。三：下边框的样式。
border-style:solid dashed dotted double;分别代表上，右，下，左的边框样式。
border-top:20px solid oldlace; 设置上边框。
border-left:20px dashed olive; 设置左边框。
border-bottom:20px dotted olive ;设置下边框。
border-right:20px double olive ;设置右边框。
border常用属性：
border:20px solid red; 第一个值：边框的宽度。第二个值：边框的样式。 第三个值：边框的颜色。
border中css3：
border-radius:10px; 设置圆角：单位px像素或百分比。设置四个角的弧度。
border-radius:10px 20px;一：设置左上角和右下角。二：设置右上角和左下角。
border-radius:10px 20px 30px;一：设置左上角。二：设置右上角和左下角。三：右下角。
border-radius:10px 20px 30px 50px;分别代表左上角，右上角，右下角，左下角。
border-bottom-left-radius: 设置左下角;
border-bottom-right-radius:设置右下角 ;
border-top-left-radius: 设置左上角;
border-top-right-radius:设置右上角 ;

定位：
background-position:定位
relative:相对定位
absolute:绝对定位

元素转换：
display:inline;转换为行内元素
display:block;转换为块级元素
display:inline-block;转换为行内块元素

常用标签：
标题字体大小；
加粗文本;
斜体文本;
缩小文本;
电脑自动输出;
下标
上标

原格式输出；

计算机输出
键盘输入
打字机文本
计算机代码样本
计算机变量
标记删除文本
标记插入文本

:无序列表；

有序列表；

加载图片

字体标签,更改字体属性，不建议使用；

换行段落；
转行；

---

标签在 HTML 页面中创建水平线。

链接，链接地址在 href 属性中指定，target属性用于打开一个新窗口;
在本窗口打开页面；
给类容加id;
跳转到id位置；
! 跳出框架；
<a href="./>本层跳转
向上一层跳转；
空字符串刷新一遍；
死链接；