前端学习记录---CSS基础（字体+文本

俩小歪

已于 2023-06-16 18:54:05 修改

阅读量86

点赞数

文章标签：前端学习 css

于 2023-06-16 17:57:17 首次发布

本文链接：https://blog.csdn.net/m0_69483514/article/details/131245024

版权

一、CSS层叠样式 cascading style sheets

1. 语法规则

选择器{

属性名：属性值

}

2. 书写位置：<head>里面的 <style> css语句 </style>

二、CSS引入方式

引入方式	书写位置	作用范围	使用场景
内嵌式	style 标签	当前页面	小案例
外链式	link 标签引入单独 css 文件	多个页面	项目中
行内式	标签 style 属性中	当前标签	配合 js 使用

1. 内嵌式

css写在<style> 这里 </style>
可以写在任何位置，但一般写在<head>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.css引入方式 -->
    <!-- 1.1内嵌式 小案例适用-->
    <style>
        /* 选择器{css属性} */
        p {
            color: chartreuse;
            /* 单位必须要写px */
            font-size: 30px;
            /* 背景颜色 */
            background-color: antiquewhite;
            width: 400px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

2. 外联式

CSS单独在.css文件中写---直接写选择器就行不用框架格式

/* 在css文件中直接写选择器{} */
p{
    color: blue;
}

在网页中需要link标签引入

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.2 外联式---在项目中用 link 连接.css文件 -->
    <link rel="stylesheet" href="./my.css">
</head>

3. 行内式

直接写在当前标签的style中

<body
    <!-- 1.3 行内式 配合js使用-->
    <div style="color: blueviolet; font-size: 40px;">行内式 直接在行内设置</div>
</body>

三、基础选择器

包含：标签选择器、类选择器、id选择器、通配符选择器

1. 标签选择器

标签名{

属性名：属性值

}

<head>
    <style>       
        p {
            color: red;
            font-size: 30px;
            background-color: antiquewhite;
        }
    </style>
</head>

<body>
    <!-- 2.选择器--标签 -->
    <p>标签选择器测试</p>
</body>

2. 类选择器

数字、字母、下划线、中划线组成，不能以数字和中划线开头
一个标签可以用多个类名，类名之间用空格隔开

.类名{

属性名：属性值

}

<head>
    <style>
        /* <!-- 3.选择器---类 --> */
        .red{
            color: red
        }

        .size{
            font-size: 24px;
        }    
    </style>
</head>

<body>
    <!-- 3.选择器---类 -->
    <div class="red">看看是什么颜色</div>

    <!-- 调用多个选择器 空格多个 -->
    <div class="red size">再看看是什么颜色</div>
</body>

3. id选择器

整个页面中不能重复，唯一的id
一个标签只能由一个id（class可以有很多个值）
id选择器一般配合js用

#元素id{

属性名：属性值

}

<head>
    <style>
        /* <!-- 3.选择器---类 --> */
        .red{
            color: red
        }

        .size{
            font-size: 24px;
        }  
  
         /* <!-- 4.选择器---id --> */
        #blue {
            color: blue;
        }
    </style>
</head>

<body>
    <div class="red size">再看看是什么颜色</div>
    <div class="red size" id="blue">再看看是什么颜色</div>
</body>

4. 通配符选择器

会选中网页所有标签
用于统一设置页面样式

*{

属性名：属性值

}

<style>
    *{
        /* 清除页边距 */
        margin: 0;
        padding: 0%;
        box-sizing: border-box;
    }
 </style>

四、CSS字体和文本样式

1.1 字体大小：font-size 默认值16px

1.2 字体粗细：font-weight

数值的范围：100-900的整百数

属性值	数值	效果
normal	400	正常
bold	700	加粗

1.3 字体样式：font-style 取值 normal/italic 倾斜

1.4 字体系列：font-familly 默认值为微软雅黑

常见字体系列	特点	场景	该系列常见字体
无衬线字体（sans-serif）	文字笔画粗细均匀，并且首尾无装饰	网页	黑体、Arial
衬线字体（serif）	文字笔画粗细不均匀，并且首尾有装饰	报刊书籍	宋体、Times New Roman
等宽字体（monospace）	每个字母或文字的宽度相等	程序代码编写	Consolas、 fira Code

1.5 字体font系列简写---复合属性

font：style weight size/line-height family;
只能省略前两个，省略则取默认值（ font：100px 微软雅黑）
位置不能改变

2.1 文字缩进：text-indent: 2em

缩进数值：20px
字符：2em（em等于当前字体的大小）

2.2 文本水平对齐方式：text-align

取值：center、left、right
作用范围：文本、span标签、a标签、input标签、img标签
其实是元素居中工具：要给标签的父元素设置text-align
img标签的父级是body标签---所有要给body做选择器

2.3 文本修饰：text-decoration：none

下划线：underline
删除线：line-through
上划线：overline
无：none（默认）

3. 行高 line-height

作用：控制上下行的间距（上间距+文本高度+下间距）
取值：

数字+px line-height：90px
字号的倍数 line-height：2

应用：

单行文本垂直居中：line-height=元素父元素高度///
取消上下间距：line-height=1

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .shatou{
            line-height: 1;
        }
        .px{
            line-height: 50px;
        }
    </style>
</head>

<body>
    <p>其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了
    </p>
    <p class="shatou">其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了
    </p>
    <p class="px">其实莎头这两年配的比赛每次好像都没怎么练就上场了，南阳比赛之前就练了一堂课，世乒赛之前练了两次结果两个人就分开集训，然后到休斯敦以后也就练了两次，莎头真的是混双绝配，共同作战酷毙了    
    </p>
</body>

4.颜色取值

文字颜色：color
背景颜色：background-color

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red、green、blue
rbg 表示法	红绿蓝三原色，取值 0-255	rgb(0,0,0)
rgba 表示法	红绿蓝三原色+透明度，取值 0-1	rgba(0, 0, 0, 0.5)
十六进制表示法	#开头	#000000 简写 #000

5.标签居中 margin

margin：0 auto；

练习1：news---标签整体嵌套

重点记得：标签居中用margin：0 auto

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 800px;
            height: 500px;
            /* background-color: rgb(26, 168, 149); */
            /* 标签居中！整个div居中 */
            margin: 0 auto;
        }
        .center{
            text-align: center;
        }
        .color1{
            color: aqua;
        }
        .color2{
            color: blueviolet;
            font-weight: 500;
        }
        a{
            text-decoration: none;
        }
        .suojin{
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <div>
        <h2 class="center">体霸+学霸！国乒新生代王楚钦喜获北体大本科录取通知书</h2>
        <p class="center">
            <span class="color1">2020-03-04</span> 
            <span class="color2">15:32:30</span> 
            <a href="">发布于广西体育领域创作者</a>
        </p>
        <hr>
        <p class="suojin">北京时间3月4日，中国运动文化教育官网发布了2020年优秀运动员本科保送推荐名单，中国乒乓球队有多人入选。其中，王楚钦获得了免试入读北京体育大学的机会，引发网友们强烈关注。</p>
        <p class="suojin">可以看到，王楚钦被推荐免试入读北京体育大学运动训练专业。除此之外，许嘉颖、李雨琪两人获得了免试入读上海体育学院的机会。</p>
        <p class="suojin">网友们也纷纷留言给王楚钦送上了祝福：“大头（王楚钦的昵称）都要上本科了呢，突然有一种孩子长大了的感觉，哈哈”、“本妈妈粉表示满足，头头要好好学习天天向上啊”、“恭喜王楚钦，事业学业双丰收，哈哈”、“所以我以后有机会去北体大偶遇大头了么？期待哇”、“哇哦，大头都要读大学了，本姐姐粉为你骄傲”。</p>

    </div>
</body>
</html>

练习2：图片布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        .goods{
            width: 234px;
            height: 200px;
            background-color: #fff;
            /* 标签居中 margin */
            margin: 0 auto;
            /* 内容居中 图 文字 */
            text-align: center;
        }
        img{
            width: 160px;
        }
        .st{
            font-size: 14px;
            line-height: 25px;

        }
        .time{
            color: #ccc;
            font-size: 12px;
            line-height: 30px;
        }
        .content{
            font-size: 14px;
            color: #ffa500;
        }

    </style>
</head>

<body>
    <div class="goods">
        <img src="./222.jpg" alt="">
        <div class="st">莎头德班·回忆录</div>
        <div class="time">2023.5.20-2023.5.28</div>
        <div class="content">顶峰相见</div>
    </div>    
</body>
</html>