CSS样式(css样式居中)

css概述 层叠样式表（cascading style sheet） 层叠是指==将多个样式施加在一个元素（标签）上== 作用： 美化页面 将html代码与样式代码分离 好处： 功能强大 分离代码，降低耦合性，提高重用性，提高维护性，提高开发效率 使用方法 1、在HTML标签的style属性书写，这 ... css概述

推荐整理分享CSS样式(css样式居中)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css样式规则,css样式规则,css样式规则是由选择器和声明构成,css样式表,css样式优先级,css样式表的三种样式,css样式代码大全,css样式表的三种样式,内容如对您有帮助，希望把文章链接给更多的朋友！

层叠样式表（cascading style sheet）

层叠是指==将多个样式施加在一个元素（标签）上==

作用：

美化页面将html代码与样式代码分离

好处：

功能强大分离代码，降低耦合性，提高重用性，提高维护性，提高开发效率使用方法

1、在HTML标签的style属性书写，这个属性的值，是由一些小的键值对构成

<div>12345</div>缺点：有可能出现代码冗余标签属性多，耦合高，不便于维护

2、在页面head标签中添加style标签

<style> div { color:yellow; font-size:500px; }</style>

3、在head标签中添加link标签引入css文件

<link rel="stylesheet" href="https://www.cnblogs.com/am0304/p/css%E6%96%87%E4%BB%B6%E5%9C%B0%E5%9D%80" />使用时机：方式一：由于样式设置是写在标签内的，它只能给这个一个标签施加样式，当我们只需要给一个标签施加样式的时候，就可以选择使用第一种方式方式二：由于样式是写在style 标签，在style标签里面写的是选择器，所以它可以给多个标签施加相同的样式当我们需要给一个页面中的多个标签施加相同的样式的时候，我们就可以选择使用第二种方式三：由于该方式，是引入了外来的css文件，说明引入css文件，就可以使用该样式了，当我们需要给多个页面中的多个标签施加相同的样式的时候，我们就可以选择使用第三种==推荐使用第二种和第三种==盒子模型

对页面进行布局（div + css）

padding：设置内补丁padding：不同参数代表位置一个参数：上下左右两个参数：上下 左右三个参数：上 左右 下四个参数：上 右 下 左

默认情况，如果我们设置内补丁，会影响到整个盒子的大小，那我们需要设置一个属性box-sizing: border-box

margin：设置外补丁margin：不同参数代表位置一个参数：上下左右两个参数：上下 左右三个参数：上 左右 下四个参数：上 右 下 左float浮动

会打破默认的流式布局，一般建议，如果一个元素进行了浮动，其余的和该元素同级别的也进行浮动。

left：从左浮动right：从右浮动position定位静态定位（static）：默认值，没有定位，元素不会受到top，bottom，left，right影响固定定位（fixed）：元素相对于浏览器窗口是固定位置相对定位（relative）：相对定位元素的定位是相对其原来位置的偏移量绝对定位（absolute）：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的相对于父元素也需要使用绝对定位z-index：显示优先级，数值越大，越靠上opacity：透明度，0完全透明，1完全不透明属性尺寸

支持百分比或者像素

width：宽度height：高度display：可见性文本（字体）color：字体颜色font-size：字体大小font-family：字体样式font-weight：字体粗细font-style：倾斜（italic）text-align：水平对齐方式line-height：行高，文字垂直位置的处理text-shadow：x轴偏移量 y轴的偏移量 羽化效果 阴影颜色：文本阴影text-decoration：文本下划线背景background-color：背景颜色background-image：url（背景图片）background-repeat：是否平铺图片（no-repeat、repeat-x、repeat-y）background-position：背景图片位置（水平偏移量 垂直偏移量）backgroud-image：linear-gradient（to 方向，开始颜色，结束颜色）：渐变背景色box-shadow：x轴偏移量 y轴的偏移量 羽化效果 阴影颜色：盒子阴影background-size：背景图片大小边框border-left、right、top、bottom：宽度 颜色 样式border-color：颜色border-width：粗细border-style：样式border-radius：边框圆角border-collapse：边框间距合并border-spacing：属性指定相邻单元格边框之间的距离outline：点击轮廓box-sizing：border-box：设置相邻边框覆盖选择器

可以帮助我们快速定位到某一个或者某几个标签的，就称为选择器

格式：

选择器 { 小键值对； ... ... }元素选择器标签名{ 样式属性 key:value;}ID选择器#ID{ 样式属性 key:value;}类选择器.类名{ 样式属性 key:value;}

优先级：id选择器 > 类选择器 > 元素选择器

组合选择器选择器,选择器,选择器{ 样式属性 key:value;}后代选择器父标签 后代标签 { 样式属性 key:value;}子元素选择器父标签>子标签 { 样式属性 key:value;}兄弟选择器/*同等级的，标签1后方的*/标签1~标签2{ 样式属性 key:value; }相邻选择器/*同等级的，标签1后方的第一个标签*/标签1+标签2{ 样式属性 key:value;}伪类选择器标签:link{ 标签未被访问前的样式属性 key:value;}标签:hover{ 鼠标悬停的标签样式属性 key:value;}标签:visited{ 标签已被访问后的样式属性 key:value;}标签:active{ 鼠标点击标签未释放的样式属性 key:value;}标签:last-child{ 最后一个该标签的子标签样式属性 key:value;}标签:first-child{ 第一个该标签的子标签样式属性 key:value;}标签:nth-child(n){ 该标签的父标签的第n个该类子标签的样式属性 key:value;}属性选择器标签[key='value']{ 样式属性 key:value; }标签[key*='a']{ 属性key的值包含a的标签的样式属性 key:value; }标签[key^='a']{ 属性key的值以a开头的标签的样式属性 key:value; }标签[key$='a']{ 属性key的值以a结尾的标签的样式属性 key:value; }标签[key~='hello']{ 属性key的值包含单词hello的标签的样式属性 key:value; }2D\3D转换2D/*从其当前位置移动元素*/transform: translate(横向, 纵向);/*旋转一定的角度*/transform:rotate(角度deg);/*增大或减小元素大小*/transform:scale(宽度增大倍数,高度增大倍数);3D/*元素绕其 X 轴旋转给定角度*/transform: rotateX(角度deg);/*元素绕其 Y 轴旋转给定角度*/transform: rotateY(角度deg);/*元素绕其 Z 轴旋转给定角度*/transform: rotateZ(角度deg);动画@keyframes 动画名{ from{开始样式} to{结束样式}}div{ animation:动画名 时间;}动画属性animation-name：规定 @keyframes 动画的名称。animation-play-state：规定动画是运行还是暂停。animation-duration：定义需要多长时间才能完成动画animation-delay：规定动画开始的延迟时间animation-iteration-count：动画应运行的次数,infinite无限animation-direction：属性指定是向前播放、向后播放还是交替播放动画

normal - 动画正常播放（向前）。默认值reverse - 动画以反方向播放（向后）alternate - 动画先向前播放，然后向后alternate-reverse - 动画先向后播放，然后向前animation-timing-function：规定动画的速度曲线