04 CSS01

NYX_UNI

已于 2023-06-12 15:15:04 修改

阅读量757

点赞数

分类专栏：零基础前端 CSS 文章标签： css html css3

于 2022-10-21 18:59:42 首次发布

本文链接：https://blog.csdn.net/NYX_UNI/article/details/127245430

版权

零基础前端同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

目标：
1、基础认知
2、基础选择器
3、字体和文本相关样式
4、Chrome调试工具
5、综合案例

一、基础认知

1.1 css介绍

中文名：层叠样式表
作用：给页面中的html标签设置样式

1.2 css语法规则

css写在style标签中，style标签一般写在head标签里面。title标签下面

属性名：属性值;

· css标点符号都是英文状态下的；
· 每一个样式键值对写完之后，最后需要分号隔开。

2.1 css引入方式

在这里插入图片描述

<!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>Document</title>
    <!-- 1、内嵌式 -->
    <style>
        p {
            color:red;
        }
    </style>
    <!-- 2、外联式 -->
    <link rel="stylesheet" href="./02.css">
</head>
<body>
    <!-- 3、行内式 -->
    <p style="color:green;">我是一个p标签</p>
    <p>我也是一个p标签</p>
</body>
</html>

二、基础选择器

· 标签选择器：标签名{css属性名：属性值；}
· 类选择器：.类名{css属性：属性值；}
· id选择器：#id属性值{css属性名：属性值；}
· 通配符选择器：* {css属性名：属性值；}

1、标签选择器

结构：标签名{css属性名：属性值；}
作用：通过标签名，找到页面中所有这类标签，设置样式

· 标签选择器是一类标签，不是单独一个
· 标签选择器无论嵌套关系有多深，都能找到对应的标签

2、类选择器

结构：.类名{css属性：属性值；}
作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

· 所有标签上都有class属性，class属性的属性值成为类名
· 类名可卡因由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
· 一个标签可以同时有多个类名，类名之间以空格隔开
· 类名可以重复，一个类选择器可以同时选中多个标签

3、id选择器

结构：#id属性值{css属性名：属性值；}
作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

· 所有标签上都有id属性
· id属性类似于身份证号码，在一个页面中是唯一的，不可重复的
· 一个标签上只能有一个id属性值
· 一个id选择器只能选中一个标签

类和id的区别：

· 属性值
class可重复，一个标签可以同时有多个class类名
id不可重复，一个标签只能有一个id属性值
· 标签名
类选择器以.开头
id 选择器以#开头
· 实际开发
类选择器用最多
id一般配合js使用，除非特殊情况，否则不用id设置样式
实际开发中会遇到冗余代码的抽取（可将一些公共的代码抽取到一个公共类中去）

4、通配符选择器

结构：* {css属性名：属性值；}
作用：找到页面中所有的标签，设置样式

· 开发中使用极少，只会在特殊情况下才会遇到
· *和{之间有空格

三、字体和文本相关样式

· 字体样式
		大小：font-size
		粗细：font-weight
		样式：font-style
		类型：font-family
		font属性连写
· 文本样式
· line-height行高

1、字体样式

1.1 字体大小

font-size：数字px

· 谷歌浏览器默认文字大小是16px
· 不设置单位无效

1.2 字体粗细

font-weight

取值：
· 关键字
正常 normal
加粗 bold
· 纯数字：100~900的整百数
正常 400
加粗 700

· 不是所有字体都有九种粗细，因此部分取值页面中无变化
· 实际开发：正常、加粗两种取值使用最多

1.3 字体样式（是否倾斜）

font-style

取值：
正常（默认值）：normal
倾斜：italic

1.4 字体系列

font-family：具体字体1,具体字体2,...,字体系列

渲染规则：
· 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
· 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

如果字体名称中存在多个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正常显示

1.5 样式的层叠问题

如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效

1.6 字体font相关属性的连写

顺序要求：style weight size family

swsf（稍微舒服）

font:italic 700 30px 楷体,宋体,隶书,sans-serif;

省略要求：
只能省略前两个，如果省略了相当于设置了默认值

要么把单独的样式写在连写的下面
要么把单独的样式写在连写的里面

2、文本样式

2.1 文本缩进

属性名：text-indent
属性值：
· 数字+px
· 数字+em（推荐：1em=当前标签的font-size的大小）

2.2 文本水平对齐方式

属性名：text-align
取值：
left 左对齐
center 居中对齐
right 右对齐

如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置

2.3 文本修饰

属性名：text-decoration
取值：
underline 下划线（常用）
none 无装饰线（常用）
line-through 删除线（不常用）
overline 上划线（几乎不用）

开发中会使用text-decoration：none；清除a标签默认的下划线

2.4 水平居中方法总结

1、text-align水平居中
· 文本
· span标签、a标签
· input标签、img标签

 如果需要让以上元素水平居中，text-align:center需要给以上元素的父元素设置

2、margin：0 auto水平居中
· div
· p
· h
（大盒子）

直接给当前元素本身设置即可
margin：0 auto一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认沾满父元素的宽度

2.5 颜色常见取值

请添加图片描述

3、line-height行高

作用：控制行间距（给一行上下增加间距）
属性名：line-height
取值：
· 数字+px
· 倍数（当前标签font-size的倍数）
应用：
1、让单行文本垂直居中可以设置line-height：文字父元素高度
2、网页精准布局时，会设置line-height：1，可以取消上下间距

如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family；
如：
font：italic 700 20px/400px 楷体

四、Chrome调试工具

打开方式
选择元素
控制样式
特殊情况

请添加图片描述

五、综合案例

1、综合案例1-新闻网页

<!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>Document</title>
    <style>
        .box{
            width: 800px;
            /* height: 800px; */
            /* background-color: pink; */
            margin: 0 auto;
        }
        h1{
            text-align: center;
        }
        .info{
            text-align: center;
        }
        .time{
            color: #808080;
        }
        .sina{
            color: #87ceeb;
            font-weight: 700;
        }
        a{
            text-decoration: none;
        }
        p{
            text-indent: 2em;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>《自然》评选改变科学的10个计算机代码项目</h1>
        <div class="info">
            <span class="time">2077年01月28日14:28</span>
            <span class="sina">新浪科技</span>
            <a href="#">收藏本文</a>
        </div>
        <hr>
            <p>代码就是程序员用开发工具所支持的语言写出来的源文件，是一组由字符、
                符号或信号码元以离散形式表示信息的明确的规则体系。 </p>
            <p>代码设计的原则包括唯一确定性、标准化和通用性、可扩充性与稳定性、
                便于识别与记忆、力求短小与格式统一以及容易修改等。 源代码是代码的分支，
                某种意义上来说，源代码相当于代码。 </p>
            <p> 现代程序语言中，源代码可以书籍或磁带形式出现，但最为常用格式是文本文件，
                这种典型格式的目的是为了编译出计算机程序。计算机源代码最终目的是将人类可
                读文本翻译成为计算机可执行的二进制指令，这种过程叫编译，它由通过编译器完成。 </p>
    </div>
</body>
</html>

效果如图：
在这里插入图片描述
2、综合案例2-小米官网卡片

<!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>Document</title>
    <style>
        body{
            background-color: #f5f5f5;
        }
        
        .box{
            width: 234px;
            height: 300px;
            background-color: #fff;
            margin: 0 auto;
            text-align: center;
        }

        .pic{
            width: 160px;
        }

        .info1{
            font-size: 14px;
            height: 25px;
        }

        .info2{
            font-size: 12px;
            height: 30px;
            color: #ccc;
        }

        .info3{
            font-size: 14px;
            height: 25px;
            color: #ffa500;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./img/car.jpg" alt="" class="pic">
        <div class="info1">九号平衡车</div>
        <div class="info2">成年人的玩具</div>
        <div class="info3">1999元</div>
    </div>
</body>
</html>