写点什么

CSS 学习笔记(二)

作者:lxmoe
  • 2022-11-08
    辽宁
  • 本文字数:1068 字

    阅读完需:约 4 分钟

id 选择器

id 选择器可以为标有特定的 id 的 html 元素指定特定的样式,基本格式如下:


<html>    <head>        <title>id选择器</title>        <style>          #pink{              color:pink;            }        </style>    </head>    <body>       <div id="pink">嘻嘻</div>    </body></html>
复制代码


我们可以简单的记忆为:样式 #定义,结构 id 调用。由上可以看出,id 选择器和类选择器很相似,他们之间有什么区别呢?类选择器可以调用多次,但 id 选择器只能调用一次。

通配符选择器

css中,通配符选择器使用"*"定义,它表示选取页面中所有元素,基本格式如下:


<style>*{    color: red;}</style>
复制代码


只要在head标签内写下这些,body标签内的元素将都会被改变。

CSS 字体属性

cssFonts属性用于定义字体系列、大小、粗细和文字样式。接下来我们将一一介绍:

字体系列

css使用font-family属性来定义文本的字体系列。基本格式如下:


p { font-family: "宋体";}div { font-family: Arial,"Microsoft Yahei";}
复制代码


我们可以为文本设置多个字体系列,但各种字体之间必须用英文状态下的逗号分隔开,一般情况下,如果有空格隔开的多个单词,比如 Microosoft Yahei,应该加引号。


设置多个字体时,浏览器会从第一个开始识别电脑内上是否安装此字体,以此类推,哪个在电脑内有安装就会使用此字体,如果都没有,将会使用浏览器默认字体——微软雅黑。

字体大小

css使用font-size属性来定义字体大小,基本格式如下:


p{    font-size: 30px;}
复制代码

字体粗细

css使用 font-weight 属性来定义字体粗细,基本格式如下:


p{    font-weight: 700;}
复制代码


属性值normal为浏览器默认值,即不加粗的;bold为加粗的;我们还可以用一个数字,这是在开发过程中更提倡的,范围为 100-900,其中 400 等同于normal,700 等同于bold,数字后没有单位。

文字样式

css 使用 font-style 属性设置文本风格,基本格式如下:


p {    font-style: normal;}
复制代码


属性值normal为浏览器默认值;italic为斜体。


当我们想要定义多个属性时该怎么定义呢,我们首先想到的可能是以下这种方式:


div {    font-style: italic;    font-weight: 700;    font-size: 16px;    font-family: 'Microsoft yahei';}
复制代码


但是看起来是不是有些麻烦呢,我们还有更简单的办法:


div {   /* font:font-style font-weight font-size/line-height font-family;*/font:italic 700 16px 'Microsoft yahei';}
复制代码


使用 font 属性时,必须按上面语法格式中的顺序书写,不能随意的更换顺序,各个属性之间还要用空格隔开。


不需要设置的属性可以省略,但是必须保留 font-size 和 font-family 属性。

发布于: 刚刚阅读数: 5
用户头像

lxmoe

关注

还未添加个人签名 2022-08-06 加入

还未添加个人简介

评论

发布
暂无评论
CSS学习笔记(二)_CSS_lxmoe_InfoQ写作社区