CSS核心样式

最新推荐文章于 2022-08-15 17:24:08 发布

wutenghui

最新推荐文章于 2022-08-15 17:24:08 发布

阅读量386

点赞数

分类专栏：学习笔记文章标签： html css

本文链接：https://blog.csdn.net/wutenghui/article/details/109210008

版权

文章目录

CSS常用样式

CSS常用样式

一、常用样式 – 字体属性

1、粗细 font-weight

作用：设置文字是否进行加粗显示
属性名：font-weight, 属于 font 属性的一个单一属性
属性值有两种方式： 单词类型、数字类型

单词类型

属性值	说明
normal	默认值，定义标准的字体
bold	定义粗体字体，b、strong标签的默认值
bolder	定义更粗的字体
light	定义更细的字体

 .p1 {
   
     font-weight: normal; 
}
.p2 {
   
    font-weight: bold;
}
.p3 {
   
    font-weight: bolder;
}
.p4 {
   
    font-weight: lighter;  
}

<p class="p1"> 标准的字体，默认的字体 </p>
<p class="p2"> 粗体 </p>
<p class="p3"> 更粗的文字 </p>
<p class="p4"> 细体 </p>

<b> 这是 b 标签的默认文字 </b>
<br>
<strong> 这是 strong 标签的默认文字 </strong>

数字类型

100-900 之间的整百数字
数字越大，文字显示越粗
其中 400 等价于 normal，700 等价于 bold

.p1 {
   
	font-weight: 400; 
}
.p2 {
   
	font-weight: 700;
}

最常用的是 normal、bold 两个字体

2、字体风格 font-style

作用：设置文字是否斜体显示
属性名：font-style，属于 font 属性的一个单一属性
属性值：单词

属性值

属性值	说明
normal	设置正规的字体，大多数标签的默认值
italic	设置斜体的文字，主要针对为英文、要求英文以字体中的斜体样式显示
oblique	设置倾斜的文字，知识将文字倾斜显示，与字体无关

.p1 {
   
 	font-style: normal;
}
.p2 {
   
	font-style: italic;
}
.p3 {
   
	font-style: oblique;     
}

实际应用中，更多的斜体效果习惯使用 italic 属性值

3、行高 line-height

作用：设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的
属性名：line-height，属于 font 属性的一个单一属性

**属性值属性值

属性值	说明
px 的像素	设置的行高的具体像素值
百分比值	设置的本身字号像素值的百分比

div{
   
    font-size: 14px;
    /* 设置文字的行高 */
    /* line-height: 26px;
    line-height: 200%; */
}

4、字体综合 font

字体、字号、行高、加粗、斜体都是 font 综合属性的单一属性
font 属性五个单一属性的值可以进行合写，属性值可以有2到多个，值之间用空格进行分隔

写法1

font 进行综合书写时，必须有字号和字体参与，而且必须字号在前，字体在后，不能颠倒顺序

p {
   
 	font: 16px "楷体";
}

写法2

font 属性经常对字体、字号、行高进行合写，书写顺序必须是字号、行高、字体，字号和行高之间必须用 / 进行分隔

 p {
 	font: 16px / 32px "楷体";
 }

写法三

如果 font 属性需要设置加粗和斜体，两个属性值只能写在最前面，两个值之间可以互换位置。后面的字号、行高、字体不能更改位置

  p {
   
 	 font: italic bold 16px / 32px "楷体";
  }

二、常用样式 – 文本属性

1、水平对齐 text-align

作用：设置文本水平方向的对齐
在盒子中，不论文本是单行还是多行，都会对应方向对齐
属性值：三个方向的单词

属性值

属性值
left	居左对齐，大部分标签的默认值
center	居中对齐
right	居右对齐

p {
   
    width: 300px;
    height: 100px;
    background-color: aqua;
}
.p1 {
   
	text-align: left; 	
}
.p2 {
   
	text-align: center;
}
.p3 {
   
	text-align: right;
}

<p class="p1"> 这是一段居左文字 </p>
<p class="p2"> 这是一段居中文字 </p>
<p class="p3"> 这是一段居右文字 </p>

2、文本修饰 text-decoration

作用：设置文本整体是否有线条的修饰效果

属性值

属性值	说明
none	没有修饰，大部分标签的默认值
overline	上划线
line-through	中划线、删除线，<del>标签的默认值
underline	下划线，<a> 标签的默认值

.none {
   
    text-decoration: none;
}

.overline {
   
    text-decoration: overline;
}

.through {
   
    text-decoration: line-through;
}

.underline {
   
    text-decoration: underline;
}

<p class="none"> 没有修饰 </p>
<p class="overline"> 上划线 </p>
<p class="through"> 删除线 </p>
<p class="underline"> 下划线 </p>
<del> del 标签 </del>
<br>
<a href=""> a 标签 </a>
<br>
<a href="" style="text-decoration: none;"> 去掉 a 标签的下划线 </a>

3、缩进 text-indent

作用：设置段落首行是否进行缩进

属性值

属性值	说明
auto	默认值，浏览器可计算出实际的高度
px	像素定义的高度
百分比(%)	定义参考父级元素宽度 height 的百分比高度

实际工作中，最长使用 em 为单位的属性值。属性值区分正负，正数表示向右缩进，负数表示向左缩进

div {
   
    width: 300px;
    height: 200px;
    background-color: aqua;
}
.p1 {
   
	text-indent: 30px;
}
.p2 {
   
	text-indent: 2em;
}
.p3 {
   
	text-indent: 20%;
}
.p4 {
   
	text-indent: -30px;
}

三、盒模型

1、盒模型概述

盒模型又叫框模型，包含了五个用来描述盒子位置、尺寸的属性
分别是: 宽度 width，高度 height，内边距 padding，边框 border，外边距 margin

常见盒模型区域

盒模型的属性中，根据不同属性的效果，可以划分区域：

书写元素内容区域：width + height
盒子可以实体化的区域：width + height + padding + border
盒子实际占位的位置：width + height + padding + border + margin

盒模型图

学会查看浏览器控制台中的盒模型图 (浏览器 F12 打开控制台)

2、盒模型 - width

作用：设置可以添加元素内容的区域的宽度

属性值

属性值	说明
auto	默认值，浏览器可计算出实际的宽度
px	像素定义的宽度
百分比（%）	定义参考父级元素宽度 width 的百分比宽度

 .box {
   
     width: 300px;
     background-color: coral;
 }
 .p1 {
   
     width: 150px;
     background-color: darkturquoise;
 }
 .p2 {
   
     width: 40%;
     background-color: deepskyblue;
 }

 <div class="box">
     <p class="p1"> px 定义的宽度 </p>
     <p class="p2"> % 定义的宽度 </p>
 </div>

特殊应用

如果一个元素不添加 width 属性，默认属性值为 auto，不同的元素浏览器会根据其特点自动计算出实际宽度，例如 <div> 元素等独占一行的，其 width 属性的值会自动撑满父元素的 width 区域，如果是 <span> 元素等不需要独占一行的，其 width属性的值是内部元素内容自动撑开的宽度
<body> 元素比较特殊，不需要设置 width 属性，宽度会自动适应浏览器窗口的宽度

.box {
   
    width: 300px;
    height: 200px;
    background-color: coral;
}
.p1 {
   
	background-color: darkturquoise;
}
.s {
   
	background-color: deepskyblue;
}

<div class="box">
    <p class="p1"> 不定义宽度撑满 </p>
    <span class="s"> 文字有多少就有多大 </span>
</div>

3、盒模型 - height

作用：设置可以添加元素内容的区域的高度

属性值

属性值	说明
auto	默认值，浏览器可计算出实际的高度
px	像素定义的高度
百分比（%）	定义参考父级元素宽度 width 的百分比高度

.box {
   
    /* 宽度 */
    width: 300px; 
    /* 高度 */
    height: 200px;
    background-color: coral;
}
.p1 {
   
    width: 150px;
    height: 100px ;
    background-color: darkturquoise;
}
.p2 {
   
    height: 30%;
    background-color: deepskyblue;
}

特殊应用

如果一个元素不添加 height 属性，默认属性值为auto，浏览器会自动计算出实际高度，也就是是内部元素内容自动撑开的高度。元素的高度自适应内部内容的高度

4、盒模型 - padding

作用：设置的是元素的边框内部到宽高区域之间的距离
特点：可以去加载背景，不能书写嵌套的内容
属性值：常用 px 为单位的数值
padding 是一个复合属性，可以根据内边距的方向不同划分为四个方向的单一属性

单一属性

书写四个方向单一属性时，一般是按照顺时针规律书写：上、右、下、左

.p1 {
   
    width: 150px;
    height: 100px ;
    background-color: darkturquoise;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 40px;
    padding-left: 50px;
}

简写

有时为了化简书写，一般习惯将四个方向的单一属性进行合写成 padding 属性

padding 属性值：可以有 1- 4 个值，值之间用空格进行分隔，根据四个方向属性值不同，padding 有多种值的书写表示方法，根据 padding 的属性值的个数不同，区分了四种表示法:
- 四值法
  - 设置四个属性值，分配方向上、右、下、左
```
.p1 {
       
    padding: 20px 30px 40px 50px;
}
```
- 三值法
  - 设置三个值分配给上、左右、下
```
 .p1 {
       
     padding: 20px 30px 50px;
 }
```
- 二值法
  - 设置两个值，分配给上下、左右
```
.p1 {
       
	padding: 20px 50px;
}
```
- 单值法
  - 设置属性值只有一个，分配方向上右下左，四边的值相同
```
.p1 {
       
	padding: 20px;
}
```

案例

制作三边内边距相同，一边不同
- 方法1：使用四值法、三值法，进行属性值设置
```
.p1 {
     
	/* padding: 10px 10px 10px 20px;  */
	padding: 10px 10px 20px;
}
```
- 方法2：利用综合属性和单一属性之间的层叠，对综合属性设置单值法，将四边内边距设置相同，在后面使用单一属性写法，再次定义某个方向的属性值不同，可以实现单一属性层叠综合属性的一部分
```
 .p1 {
     
     padding: 10px;
     padding-left: 20px;
 }
```

其中第二种用法更加灵活，推荐使用，使用过程中注意书写顺序，单一属性必须书写在后，才能层叠掉综合属性中重复的部分

5、盒模型 - border

作用：设置的是内边距外面的边界区域，作为盒子的实体化的最外层
属性值：由三个值组成，分为线的宽度、线的形状、线的颜色
border 属性是一个复合属性，根据划分依据不同可以有两种单一属性的划分方式

.box {
   
    /* 宽度 */
    width: 300px; 
    /* 高度 */
    height: 200px;
    background-color: coral;
    border: 20px solid red;
}

<div class="box">
	<p> 第一段的高度 </p>
</div>

按照属性值的类型划分

线宽：border-width
- 作用：设置边框线的宽度
- 属性值：常用 px 形式的数值，四个方向都有边框，属性值类似于
```
 .box{
     
 	border-width: 10px 20px 30px 40px
```

最低0.47元/天解锁文章

wutenghui

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS核心样式

CSS常用样式一、常用样式 – 字体属性1、粗细 font-weight2、字体风格 font-style3、行高 line-height4、字体综合 font二、常用样式 – 文本属性1、水平对齐 text-align2、文本修饰 text-decoration3、缩进 text-indent三、盒模型1、盒模型概述2、盒模型 - width3、盒模型 - height4、盒模型 - padding5、盒模型 - border6、盒模型 - margin.
复制链接

扫一扫