酷酷小栖

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

电脑版发表于:2019/10/28 21:38

   今天学习了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属性将不起作用。




  

   



关于TNBLOG
TNBLOG,技术分享。技术交流:群号677373950
ICP备案 :渝ICP备18016597号-1
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢