一、文字样式(可继承)
- 继承: 给父元素设置样式后,里边的子元素也可以应用上
- 继承来的样式优先级没有自己本身优先级高
1.文字大小
-
浏览器默认字体大小16px 支持最小字体是12px
font-size: 30px;
2.行高
-
技巧:行高的值和盒子高度一致时,可实现单行文字垂直方向居中
line-height: 80px;
3.文字是否倾斜
font-style: italic; 倾斜
font-style: normal; 不倾斜
4.文字是否加粗
font-weight: bold; 加粗
font-weight: normal; 不加粗
5.字体
- 可以设置多个字体,多个字体中间用逗号隔开,首先使用第一个字体,如果第一个字体电脑上没有,那就使用第二个字体,依次类推。如果设置的字体电脑上都没有,就用电脑上默认自带的字体
font-family: 'Courier New1' , '楷体';
6.复合写法
- font里 字体大小和字体是必须写的,其他的可以省略不写
font: italic bold 30px/60px '楷体';
倾斜 加粗 字体大小/行高 字体
二、文本样式 (可继承)
1.文字颜色
- a标签的文字样式必须选中它自己设置才行
color: blue;
2.首行缩进
- 单位: px 或 em
- em: 表示当前字体大小的倍数
text-indent: 3em;
3.文字水平对齐方式
- 给父元素设置text-align,可以让父元素里边的内联标签和内联块标签改变水平对齐方式
text-align: justify; 两端对齐
text-align: left; 默认值 居左
text-align: center; 居中
text-align: right; 居右
4.文本装饰
《了解》text-decoration: underline red wavy; //下划线 线条颜色 线条样式
线条样式(wavy 波浪线 dotted 点状线 dashed 虚线 double 双实线 solid 实线(默认) 《/了解》
text-decoration: underline; 下划线
text-decoration: overline; 上划线
text-decoration: line-through; 中划线
text-decoration: none; 取消装饰
5.扩展(了解)
/* 英文单词能显示几个字母,就显示几个,放不下在换行 */
word-break: break-all;
/* 字母与字母之间的空隙 */
letter-spacing: 20px;
/* 单词与单词之间的空隙 */
word-spacing: 50px;
三、颜色与单位
1.颜色
-
英文单词(red blue。。。)
-
十六进制: #六位十六进制数 或 简写 #三位十六进制数
- #ff0000 前两位表示红色 中间两位表示绿色 后两位表示蓝色
- #f00 如果两位两位是相同的可以省略一个
- #fff 纯白 #000 纯黑
-
rgb(255,0,0) r表示红色 g表示绿色 b表示蓝色 取值:0-255
- rgb(0,0,0) 纯黑 rgb(255,255,255) 纯白色
-
rgba(255,0,0,0.5) a表示透明度 取值0-1 (0 表示完全透明,1 表示完全不透明)
-
transparent 透明
color: red; color: #ff0000; color: rgb(0,0,255); color: rgba(255, 0, 0, 1); color: transparent;
2.单位
- 固定单位 px 像素
- em 相对于当前字体大小的倍数
- rem 相对于根标签(html标签)字体大小倍数
- % 百分比 相对于父元素宽高的百分比
四、盒模型
- 每个标签都有自己的盒模型,一个标签在浏览器中所占的位置就叫盒模型
- 盒模型组成: 宽高 + padding + border + margin
1.边框线
(1)第一种写法
border-width: 10px 20px 30px 40px; 边框粗细
border-style: dashed(虚线) dotted(点状线) solid(实线) double(双实线); 边框线条样式
border-color: yellowgreen orange yellow skyblue; 边框颜色
三个样式都可以设置多个值:
- 一个值:四周的边框样式
- 两个值: 上下 左右
- 三个值: 上 左右 下
- 四个值: 上 右 下 左
(2)第二种写法
border-top:10px solid plum ; 上边框
border-right: 10px dashed orange; 右边框
border-bottom: 10px dotted red; 下边框
border-left: 10px double green; 左边框
值: 边框粗细 边框样式 边框颜色
值为none时,取消某条边框线
(3)第三种写法
border: 20px solid #000 ;
值为none时,取消某条边框线
(4)小三角实现
.box{
width: 0px;
height: 0px;
border-width: 0px 50px 50px;
border-style: solid;
border-color: transparent transparent orange;
}
2.内边距
- 内容到边框线的距离
- 注意:不能设置负值, 盒子的背景色默认是延伸到内边距上的
(1)第一种写法
padding-left: 50px;
padding-top: 50px;
padding-right: 50px;
padding-bottom: 50px;
(2)第二种写法
padding: 20px;
padding: 20px 30px;
padding: 20px 30px 40px;
padding: 20px 30px 40px 50px;
多个值:
- 一个值:四周的内边距
- 两个值: 上下 左右
- 三个值: 上 左右 下
- 四个值: 上 右 下 左
3.外边距
- 盒子边框线以外的距离
- 值可以为负
(1)第一种写法
margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;
- margin-top 和margin-left 改变的是自己的位置
(2)第二种写法
margin: 50px;
margin: 50px 60px;
margin: 50px 60px 70px;
margin: 50px 60px 70px 80px;
多个值:
-
一个值:四周的外边距
-
两个值: 上下 左右
-
三个值: 上 左右 下
-
四个值: 上 右 下 左
-
注意: 可通过margin 将有固定宽度的块标签水平方向居中
margin: 0px auto;
清除默认样式
*{
margin: 0px;
padding: 0px;
/* 清除列表前边的装饰 */
list-style: none;
}