原精

css基础选择器和字体相关样式

2023人阅读 2019/10/28 21:38 总访问：4558 评论：0 收藏：0 手机

分类: 基础html.css

今天学习了css基础选择器感觉自己又成长了

1、内部样式表

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

2、行内式（内联样式）

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

3、外部样式表（外链式）

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

4、类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

案例：

<head>
        <meta charset="utf-8">
        <style>
        span {
            font-size: 100px;
        }
        .blue {
            color: blue;
        }
        .red {
            color: red;
        }
        .orange {
            color: orange;
        }
        .green {
            color: green;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

5、多类名选择器

<div class="pink fontWeight font20">刘小贱</div>
<div class="font20">张</div>
<div class="font14 pink">瑞</div>
<div class="font14">我</div>

6、通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

7、CSS字体样式属性

（1）font-size:字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少

（2）font-family:字体

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

（3）font-weight:字体粗细

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

数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。

（4）font-style:字体风格

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

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

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

（5）font:综合设置字体样式 (重点)

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

注意：

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

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

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

酷酷小栖

我很善良，也很坏

博主信息

排名

文章

粉丝

文章类别

基础html.css 2篇

css基础选择器和字体相关样式

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}