css引入方式
01: 行间样式(行内式) (最不推荐)
02: 内部样式(样式写在html文档中) => 在head标签内写style标签, style标签内写样式.
03: 外部样式(用独立的css文件写样式) => 通过link标签引入css文件
样式三大系统
基本的修饰样式.(文本类,背景类,其他)
盒模型
弹性盒模型
定位
/* 字体颜色 */
color: red;
字号大小,px => 像素
/* 默认字号是16px.最小是12px */
/* font-size: 50px; */
/* 字体,默认字体是微软雅黑 */
font-family: 微软雅黑;
/* 加粗字体 */
font-weight: bold;
/* 文字水平居中 */
/* text-align: center; */
/* 文字修饰线 */
/* 不需要任何修饰线 */
/* text-decoration: none; */
/* text-decoration: line-through; */
/* text-decoration: underline; */
/* text-decoration: overline; */
/* 缩进的长度 */
text-indent: 25px;
/* 行高 */
/* line-height: 200px; */
/* 永远不换行 */
/* white-space: nowrap; */
/* 如何可以换行,如何换行 */
/* word-break: break-all; */
<!-- 长度单位
01: px(像素)
02: 百分比 (有些样式不能设)
03: em 根据当前标签的字号,来确认长度. (相对单位)
04: rem 根据html标签的字号来确认长度 (用于实现移动端适配)
05: vh 视口的高 (移动端适配)
06: vw 视口的宽 (移动端适配)
-->
<!-- 视口 => 网页呈现的区域大小 -->
颜色写法
01: 预设的单词
02: rgb => 红绿蓝三原色,颜色取值是0-255
03: rgba => 带透明通道的rgb色
04: 16进制颜色 => 0-9,a-f中的6个字符组成的16进制表示. 前面固定有一个# (最常用)
05: hsl => 色相,饱和度,亮度模式 (色域远比rgb要大)
06: hsla => 带透明的hsl
background-image: url(./img/2222.png);
/* 水平方向可以重复 */
/* background-repeat: repeat-x; */
/* 垂直方向可以重复 */
/* background-repeat: repeat-y; */
/* 水平方向和垂直方向,都不允许重复 */
background-repeat: no-repeat;
/* 设置背景图片的大小, 宽高都是300px */
/* background-size: 300px 300px; */
/* 按当前标签的宽高算图片的宽高,按百分比计算 */
/* background-size: 100% 100%; */
/* 宽度300px,高度自适应,(等比例缩放) */
/* background-size: 300px auto; */
/* 高度300px, 宽度自适应 */
/* background-size: auto 300px; */
/* 一定会铺满元素. 图片比例也是对的,图片有可能显示不全 */
/* background-size: cover; */
/* 图片比例也是对的,图片一定显示全,不一定铺满元素 */
/* background-size: contain; */
/* 设置坐标, 可以移动到任意位置 */
background-position: -10px -10px;
* 直接设置图片的中心和div的中心重合 */
background-position: center;
* 设置光标样式 */
cursor: pointer;
/* cursor: move; */
/* cursor: copy; */
/* 整个标签都设置透明度,(包括颜色和内容) */
/* opacity: .5; */
/* 把超出元素区域的内容隐藏 */
/* overflow: hidden; */
/* 自动出现滚动条 */
overflow: auto;
/* 取消轮廓线 */
outline: none;
/* 取消默认的点和序号 */
list-style: none;
<!-- 块级元素 => 默认占一行的元素 例如: div,h1-h6,p, 所有的列表标签,所有的布局标签 -->
<!-- 默认宽是父元素的宽,高是内容的高 -->
<!-- 可以设置宽高 -->
<!-- 行内元素 => 默认不占一行, 例如:span,a,img,strong,em,所有的表单标签 -->
<!-- 默认宽高都是内容的宽高 -->
<!-- 不能设置宽高 -->
<!-- 行内块元素 => 同时具备行内元素和块级元素的特征 => 不独占一行, 可以设置宽高 -->
span{
/* 设span为块级元素 */
/* display: block; */
}
span{
/* 设span为行内块元素 */
display: inline-block;
width: 100px;
height: 100px;
}
span{
/* 隐藏元素, 不占页面的位置 */
/* display: none; */
/* 隐藏元素, 占页面位置 */
/* visibility: hidden; */
/* 完全透明,不算隐藏 */
opacity: 0;
}
<!-- css => 层叠样式表 -->
<!-- 如何知道一个标签层叠了多少样式? -->
<!-- css三大特性 -->
<!-- 01: 层叠性 => 多个样式表可以同时作用于同一个标签上. -->
<!-- 02: 继承性 => 祖先元素的某些样式也对所有的后代元素生效-->
<!-- 可以继承的样式是 => 文本类样式,list-style -->
<!-- 03: 优先级 -->
!important > 行内 > id > 类(属性) > 标签 > * > 浏览器样式 > 继承样式
!important 后门
<!-- 先数id选择器的个数 => 再数类选择器个数(属性选择器个数) => 最后数标签选择器的个数 -->
body会有默认的8px外边距
<!-- 浏览器会默认给a标签添加字体颜色,光标形状,下划线这些样式 -->
<a href="#">百度一下</a>
<!-- ul会有list-style-type这样的默认样式,一级内外边距的默认样式 -->
<!-- p标签会有默认的外边距样式 -->