什么是 CSS:
层叠样式表 (英文全称: Cascading Style Sheets) 是一种用来表现 html(标准通用标记语言的一个应用)或 xml(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS 不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式.
CSS 能够对网页中元素位置的排版进行像素级精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象和模型样式编辑的能力.
盒子模型:
盒模型是 CSS 中的核心的概念, 描述了元素如何显示.
盒子模型分类:
盒子模型分为两种: W3c 标准盒子模型和 IE 盒子模型
W3C 盒子模型: 这种盒子模型设置的宽度就是内容的宽度, 其他的边距和边框都是在盒子外边
IE 盒子模型: 这种盒子模型的内容高度是除去内边距, 外边框, 外边距的高度, 盒子的整体高度就是我们设置的高度(height).
设置盒模型的方式是: 设置 box-sizing
box-sizing:content-box 标准盒模型
box-sizing:border-box 怪异盒模型
盒子模型的四种元素:
Margin(外边距) - 清除边框外的区域, 外边距是透明的.
Padding(内边距) - 清除内容周围的区域, 内边距是透明的.
Border(边框) - 围绕在内边距和内容外的边框.
Content(内容) - 盒子的内容, 显示文本和图像.
Margin(外边距):
margin-top: 上边距
margin-buttom: 下边距
margin-left: 左边距
margin-right: 右边距
- /* margin 属性后跟四个值, 第一个值设置上边距, 第二个是设置右边距, 第三个值设置下边距, 第四个值设置左边距 */
- margin: 10px 20px 30px 40px;
- /* 下面样式与上面的样式等价 */
- margin-top: 10px;
- margin-right: 20px;
- margin-bottom: 30px;
- margin-left: 40px;
- Padding(内边距):
padding-top: 上部填充
padding-right: 右部填充
padding-bottom: 下部填充
padding-left: 左部填充
- /* padding 属性后跟四个值, 第一个值设置上边距, 第二个是设置右边距, 第三个值设置下边距, 第四个值设置左边距 */
- padding: 10px 20px 30px 40px;
- /* 下面样式与上面的样式等价 */
- padding-top: 10px;
- padding-right: 20px;
- padding-bottom: 30px;
- padding-left: 40px;
- Border(边框):
border-top: 上边界
border-bottom: 下边界
border-left: 左边界
border-right: 右边界
- /* 使用简写属性, 同时设置四条边界, 四条边界的宽度, 样式和颜色都是一样的 */
- border: 2px solid green;
- /* 下面的样式与上面的样式等价 */
- border-top: 2px solid green;
- border-bottom: 2px solid green;
- border-left: 2px solid green;
- border-right: 2px solid green;
border-width: 边界宽度
border-style: 边界样式
border-color: 边界颜色
- /* 使用简写属性设置宽度, 样式和颜色, 同时作用于四条边 */
- border: 2px dotted green;
- /* 下面的样式与上面的样式等价 */
- border-width: 2px;
- border-style: dotted;
- border-color: green;
border-top-width: 上边界宽度
border-top-style: 上边界样式
border-top-color: 上边界颜色
border-bottom-width: 下边界宽度
border-bottom-style: 下边界样式
border-bottom-color: 下边界颜色
border-left-width: 左边界宽度
border-left-style: 左边界样式
border-left-color: 左边界颜色
border-right-width: 右边界宽度
border-right-style: 右边界样式
border-right-color: 右边界颜色
- /* 使用简写属性设置宽度, 样式和颜色, 同时作用于一条边 */
- border-top: 2px solid green;
- /* 下面的样式与上面简写样式等价 */
- border-top-width: 2px;
- border-top-style: dotted;
- border-top-color: green;
border-radius: 边界半径
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-left-radius: 右下角
- /* 以简写属性的三个值为例 */
- border-radius: 10px 20px 30px;
- /* 下面样式与上面简写属性样式等价 */
- border-top-left-radius: 10px;
- border-top-right-radius: 20px;
- border-bottom-right-radius: 30px;
- border-bottom-left-radius: 40px;
CSS 选择器:
元素选择器: 针对一类标签
- HTML {
- color:black;
- }
- h1 {
- color:blue;
- }
- h2 {
- color:silver;
- }
选择器分组: 针对多个特定的标签使用, 可以将任意多个选择器分组在一起
- /* no grouping */
- h1 {
- color:blue;
- }
- h2 {
- color:blue;
- }
- h3 {
- color:blue;
- }
- /* grouping */
- h1, h2, h3 {
- color:blue;
- }
类选择器: 针对你想要的所有标签使用
- /* 语法 */
- .important {
- color:red;
- }
- /* 结合元素选择器 */
- p.important {
- color:red;
- }
ID 选择器: 以一种独立于文档元素的方式来指定样式
#intro {font-weight:bold;}
属性选择器: 根据元素的属性及属性值来选择元素
a[href] {color:red;}
后代选择器: 选择作为某元素后代的元素
- /* 只对 h1 元素中的 em 元素应用样式 */
- h1 em {
- color:red;
- }
子元素选择器: 选择作为某元素子元素的元素
- /* 只作为 h1 元素子元素的 strong 元素 */
- h1> strong {
- color:red;
- }
相邻兄弟选择器: 选择紧接在另一元素后的元素, 且二者有相同父元素
- /* 增加紧接在 h1 元素后出现的段落的上边距 */
- h1 + p {
- margin-top:50px;
- }
伪类: 向某些选择器添加特殊的效果
selector : pseudo-class {property: value}
CSS 背景:
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中 |
background-color | 设置元素的背景颜色 |
background-image | 把图像设置为背景 |
background-repeat | 设置背景图像是否及如何重复 |
background-attachment | 设置背景图像是否固定或者随着页面的其余部分滚动 |
background-position | 设置背景图像的起始位置 |
CSS 文本样式:
属性名 | 含义 | 举例 |
---|---|---|
font | 设置所有字体属性 | font:italic bold 36px "宋体"; |
font-family | 设置字体类型 | font-family:"隶书"; |
font-size | 设置字体大小 | font-size:12px; |
font-style | 设置字体风格 | font-style:italic; |
font-weight | 设置字体的粗细 | font-weight:bold; |
- <div class="divcss5">
- <div class="divcss5-a"></div>
- </div>
- <style>
- /* 定义父级 position:relative 为就认为是绝对定位声明吧 */ .divcss5{ position:relative;width:400px;height:200px;
- border:1px solid #000} /* 使用绝对定位 position:absolute 样式 并且使用 left top 进行定位位置
- */ .divcss5-a{ position:absolute;width:100px;height:100px; left:10px;top:10px;background:#000}
- </style>
- none # 不浮动
- left # 元素向左浮动, 而后面的内容流向对象的右侧
- right # 对象向右浮动, 而后面的内容流向对象的左侧
- overflow:visible; # 默认值, 不剪切内容, 也不添加滚动条
- overflow:auto; # 在必须时, 对象内容才会被剪切或者显示滚动条
- overflow:hidden; # 不显示超过对象尺寸的内容
- overflow:scroll; # 总是显示滚动条
- .clearFix:after{
- clear:both;
- display:block;
- visibility:hidden;
- height:0;
- line-height:0;
- content:"";
- }
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
来源: https://www.cnblogs.com/riyir/p/12587417.html