css之font&&选择器

240 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

font属性
<!-- 
    字体属性
    font-family     字体系列(微软雅黑、宋体~),可以直接给body指定
    font-size       字体大小(多少px)
    font-weight     字体粗细(多少)
    font-style      字体风格(是否是斜体)
    字体复合属性font
    格式要求:font :font-style   font-weight  font-size/line-height    font-family
    必须保留font-size和fony-family属性,否则font属性不起作用
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体属性</title>
    <style>
        h2 {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            /* 可以使用英语的逗号来加上多个字体,字体内部空格来分开单词 
               类似兼容浏览器字体*/
            font-size: 20px;
            font-weight: 400;
            font-style:italic;
        }
        body {
            font-size: 20px ;
            font-weight: 700;
            /* 实际开发中更提倡使用数字表示加粗或变细,正常是400,bold是700,不用加px */
        }
        /* 标题标签比较特殊,需要单独指定 */
        em {
            font-style: normal;
        }
        div {
            font: italic 700 16px  Georgia;
        }
    </style>
    <img src
</head>
<!-- 
    <em>,<i>是倾斜字体的标签
 -->
<body>
    <h2>title</h2>
    <p>五项原则</p>
    <p>我下周一二</p>
    <p>在拿到合同</p>
    <p>中午和你说话你就不用管</p>
    <em>下课了啊</em><br>
    <i>想你的也</i><br><br>
    <div>三生三世十里桃花</div>
</body>
</html>

image.png

选择器
<!-- 
    CSS代码规范:
    属性的冒号之后留一空格
    {之前留一空格
 -->
 <!-- 
     选择器类型:
        标签选择器          html标签名就是选择器,只能选择某一类标签,不能差异化选择同一类
        类选择器            在<styl>中 .~~~  定义类选择器,名字写代码的起,然后在标签中用class来引用
                           口诀:样式点定义,结构类调用,一个或多个,开发最常用
        类选择器——多类名    一个标签可以指定多个类名,到达组合的效果
        id选择器            HTML元素以id属性来设置id选择器,css中id选择器以 # 来定义
                           口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用
        通配符选择器        用 * 定义,选取页面中所有元素(标签) 不用加名称也不用调用 
  -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS开始</title>
    <style>
        /* 选择器{样式} */
        /* 给谁改{改什么} */
        /* 选择器就是选择标签而已 */
        p{
            color: brown;
            font-size: 120px;
        }/* 给下面的p标签修改样式,每一组属性后面都要加分号,<style>写在<head>标签中 */
        div{
            color: coral;
        }
        /* 类选择器 */
        .red {
            color: darkblue;
        }
        .fsize {
            font-size: 100px;
        }
        #pink {
            color: pink;
        }
        * {
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <p class="red"></p>   <!--class引用-->
    <p></p>
    <!-- 类选择器——多类名使用 -->
    <div class="red fsize">华为</div>
    <!-- id选择器使用 -->
    <h6 id="pink">I'm a young boy.</h6>
</body>
</html>

image.png