前端——CSS新手基础篇

最新推荐文章于 2024-09-17 11:42:54 发布

祎2祎

最新推荐文章于 2024-09-17 11:42:54 发布

阅读量547

点赞数 20

文章标签：前端 css

本文链接：https://blog.csdn.net/wmy030921/article/details/139657422

版权

一，CSS字体样式属性

1.font-size：字号大小

px单位称为像素（大多数浏览器默认字体大小16px）

<style>

.con {

font-size: 16px;

}

</style>

<body>

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

</body>

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

em单位有如下特点：

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

2.font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等

p{
font-family:"Arial","微软雅黑";
}

可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

3.font-weight：字体粗细

字体加粗除了用 b 和 strong 标签之外，可以使用css中 font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

注：数字 400 等价于 normal，而 700 等价于 bold。

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

4. font-style：字体风格

字体倾斜除了用 i 和 em 标签之外，可以使用css 中font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。

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

font属性用于对字体样式进行综合设置，其基本语法格式如下：

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

注意：

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

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

二，链接伪类选择器

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

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

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

<style>

/* 未访问链接 */

a:link {

color: aqua;

}

/* 已访问链接 */

a:visited {

color: pink;

}

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

a:hover {

color: orangered;

}

/* 选定的链接 */

a:active {

color: darkgreen;

}

</style>

三，外观

1，color:文本颜色

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

注意:

1.一般情况下颜色我们喜欢小写字母比如 #ff0000。

2.css颜色简写比如 #ff0000 可以简写为#f00， #ff00ff 简写为 #f0f。

文字颜色到了CSS3我们可以采取半透明的格式了语法格式如下：

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

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

color: rgba(255, 0, 0, .5);

2.line-height:行间距

行高是指文本行基线间的垂直距离:基线与基线之间的距离。

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

normal：默认值，行高由浏览器自动处理。
数字：行高 = 数字 * 字体大小，例如，line-height: 2;font-size: 16px;，则行高等于：2 * 16px = 32px
长度值：使用长度值设置行高，例如，line-height: 32px。

<style>

.section {

line-height: 120px;

}

</style>

3.text-align:水平对齐方式

属性名	text-align
属性值	left \| right \| center \| justify
默认值	如果文本方向为ltr，则默认值为left；如果文本方向为rtl，则默认值为right
描述	设置文本在水平方向上的对齐方式