web基础.2

♧九九卐

已于 2024-06-16 16:24:30 修改

阅读量634

点赞数 18

文章标签：前端

于 2024-06-13 17:12:48 首次发布

本文链接：https://blog.csdn.net/2301_77482582/article/details/139655983

版权

一、CSS字体样式属性

1、font-size:字号大小

font-size属性用于设置字号。推荐使用像素单位px。

1.1 px

px单位名称为像素，像素是固定大小的单元.。
一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割)。

<style>

/* 字体大小最小12px */

/* 浏览器字体大小默认16px */

.con{

font-size: 30px;

}

/* 字体大小可以继承 */

.father{

font-size: 30px;

}

/* 如果自己有，以自己的为准 */

span{

font-size: 2px;

}

</style>

body里

<div class="con">保护国家秘密</div>

1.2 em

em是相对字体长度单位。如果用于font-size属性本身，则是相对于父元素的font-size。

em单位有如下特点：

em的值并不是固定的;
em会继承父级元素的字体大小。

<style>

/* 如果1em则和父元素字体大小一样 */

/* 如果2em则和父元素字体大小的2倍 */

span{

font-size: 2em;

}

</style>

body里

<div class="father">爸爸

<span>你好</span>

<span>我很好</span>

<span>非常好</span>

</div>

2、font-family:字体

网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

<style>

.con{

font-size: 30px;

/* 浏览器默认字体是微软雅黑 */

font-family: 微软雅黑;

/* 按顺序所以还是宋体 */

font-family: 宋体

}

</style>

body里

<div class="con">人生舞台，每一秒都需全力以赴。做人生的主角，迎接每一次机遇和挑战吧！愿你在属于自己的舞台上闪闪发光</div>

注意:

各种字体之间必须使用英文状态下的逗号隔开。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

3、 font-weight:字体粗细

font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

normal	默认值。定义标准的字符。
bold	定义粗体字符。
bolder	定义更粗的字符。
lighter	定义更细的字符。
100~900	定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

<style>

/* 加粗使用 blod 700 */

/* 正常使用 normal 400 */

.con1{

/* 字体粗细加粗*/

font-weight: bold;

}

.con2{

/* 字体粗细更粗的*/

font-weight: bolder;

}

.con3{

/* 字体粗细更细的*/

font-weight:lighter ;

}

.con4{

/* 字体粗细加粗*/

font-weight: 700 ;

}

strong{

font-weight: normal;

font-weight: 400;

}

</style>

4、font-style:字体风格

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体

normal	默认值，浏览器会显示标准的字体样式。
italic	浏览器会显示斜体的字体样式。
oblique	浏览器会显示倾斜的字体样式。

<style>

em{

/* 斜体变正常体 */

font-style: normal;

}

h2{

/* 标题粗体同时变斜体 */

font-style: italic;

}

</style>

5、font:综合设置字体样式

选择器{
font: font-style font-weight font-size font-family;
}

注意：

1.使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

2.其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则

font属性将不起作用。

二、伪类选择器

链接伪类选择器

<style>

/* 未访问的链接 */

a:link{

color: aqua;

}

/* 已访问的链接 */

a:visted{

color: pink;

}

/* 鼠标移动到目标元素上 */

a:hover{

color:orangered ;

}

/* 选定的链接 */

a:active{

color: darkgreen;

}

</style>

在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！

a:active 必须位于 a:hover 之后，这样才能生效！

注意:

a:link会对拥有a标签的属性href=""，即拥有实际链接地址的a对象发生效果

三、CSS外观属性

1、color：文本颜色

属性名	color
属性值	预定义的颜色名 \| 十六进制值的颜色值 \| RGB颜色值
默认值	在不同浏览器中，默认值可能不同，但是在大部分浏览器中默认值为黑色。
描述	设置文本的颜色

<style>

.item{

/* 1、预定义的值 */

color: red;

/* 二进制 0-1

八进制 0-7

十进制 0-9

十六进制 0-9 a-f/A-F */

/* 2、十六进制表示法 0-9 A-F

最小0 最大F*/

color: #000000;

color: #ffffff;

color: #ff0000;

color: #00ff00;

color: #0000ff;

/* 3、rgb （red，green，blue） 0-255*/

color: rgb(255, 255, 255);

color: rgb(0, 0, 0);

color: rgb(255,0,0);

/* 4、rgba alpha 透明度 0-1 */

color: rgba(255, 0, 0, 1);

color: rgba(255, 0, 0, .5); /* .5是0.5 省略写法*/

}

</style>

2、line-height：行间距

属性名	line-height
属性值	normal \|数字 \| 长度值 \| 百分比
默认值	normal
描述	设置文本的行高

<style>

/* 单行文本在垂直方向居中->垂直居中 */

/* line-height的值和盒子的高度相同 */

.box{

width: 150px;

height: 100px;

border: 1px solid red;

line-height: 100px;

}

</style>

3、 text-align：水平对齐方式

属性值	描述
left	内容左对齐。
center	内容居中对齐。（重点）
right	内容右对齐。
justify	内容两端对齐

.box{

/* 盒子宽度 */

width: 400px;

height: 200px;

border: 1px solid red; /*0.1rem */

/* 水平对齐方式默认是左对齐

text-align: left;*/

text-align: right;

/* 水平居中 */

text-align: center;

/* 两端对齐 */

text-align: justify;

}

4、text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

<style>

p{

/* 首行缩进2个字 */

text-indent: 2em;

}

</style>

5、 text-decoration：文本修饰

属性值	描述
none	指定文字无装饰
underline	指定文字的装饰是下划线
overline	指定文字的装饰是上划线
line-through	指定文字的装饰是贯穿线

<style>

.text{

/* 无文本修饰 */

text-decoration: none;

/* 删除线贯穿线 */

text-decoration: line-through;

/* 下划线 */

text-decoration: underline;

/* 上划线 */

text-decoration: overline;

}

</style>

6、letter-spacing：字符间距 word-spacing：单词间距

属性值	描述
normal	默认间隔
长度值	用长度值指定间隔。可以为负值。

<style>

.con1{

/* 字符间距 */

letter-spacing: 30px;

/* 单词间距 */

word-spacing: 30px;

/* 背景颜色 */

background-color: blueviolet;

}

</style>

7.text-shadow：文字阴影

可以给文字添加阴影效果

text-shadow:水平位置垂直位置模糊距离阴影颜色;

值	描述
h-shadow	必需写。水平阴影的位置。允许负值。
v-shadow	必需写。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

eg：/* 多重阴影 */
text-shadow: -5px 0px cyan, 5px 0px red;