鸿蒙应用开发-学习-第一章-CSS基础（二）_鸿蒙开发 css transform怎么输入

Tips：这个只是作者的学习笔记，仅作参考

目录

一、字体和文本样式

1. 字体样式       

1.1 字体大小

        1.2 字体粗细

        1.3 字体倾斜

        1.4 常见字体系列

        1.5 样式的层叠问题

        1.6 字体的font相关属性连写

        1.7 font-variant属性

        1.8 text-transform属性

        2. 文本样式

        2.1 文本缩进

        2.2 文本水平对齐

        2.3 文本修饰

  3. 行高

二、Chrome调试工具

        1. 打开方式

        1.1 检查

        1.2 看哪里?

        2. 选择元素

        1.1 方法一

        1.2 方法二

        3. 控制样式

        1.1 修改属性值

        1.2 添加属性

        1.3 控制样式生效

        4. 特殊情况 

        1.1 样式上有删除线

        1.2 样式前有小三角形

三、字体和文本样式（拓展）

四、综合案例

---

一、字体和文本样式

        使用场景：当有需要对元素外观样式进行美化修改时

1. 字体样式       

1.1 字体大小

        属性名：font-size        取值：数字+px（如不设置单位则无效）

        代码格式：例：

div{
    font-size: 100px;
}

        Tips：谷歌浏览器默认16px

        1.2 字体粗细

        属性名：font-weight 

        取值：纯数字（九个档次）or 关键字

h6{
    /* normal虽意为正常，但weight的正常反而对于<h>标题的标签是不正常的，
    因为会覆盖掉原本<h>标签的加粗效果 */
    font-weight: normal;
}

        Tips：不是所有字体都有九种粗细，因此部分取值页面无变化

        1.3 字体倾斜

        属性名：font-style

        取值：

        代码格式，例：

a{
    font-style: oblique;
}

        Tips：<em>、<i>标签也有倾斜效果

        1.4 常见字体系列

        属性名：family

        常见取值：

        渲染规则：1.从左往右按顺序查找，如果电脑未安装该字体则显示下一字体

                          2.如都不支持则显示字体系列的默认字体

                Tips:如果字体名称存在多个单词建议使用引号包裹,

                        最后一项字体系列不需要引号包裹,

                        网页开发尽量使用系统常见字体,保证不同用户浏览网页都可以正常显示.

        1.5 样式的层叠问题

                问：如果给同一个标签设置了多个同样的样式，那浏览器会怎样显示？

                CSS层叠样式表：样式一层一层叠加覆盖。

                既然样式一样，里面的样式就会被外面（下面）的样式包裹

                如下方：生效的只会是下方的代码

div{
    font-size: 100px;
    color: aqua;
    /* 当一个选择器内有两个同样设置类型
    下方设置会掩盖上方设置 */
    color: aquamarine;
}

        1.6 字体的font相关属性连写

        属性名：font （复合属性）

        代码格式：font:style weight size family;如下：

p{
    /* font：style weight size family; */
    font:oblique 700 200px serif;
}

        如果要省略，那么格式如下：

a{
    /* 只能省略前两个，省略了相当于设置默认值 */
    font:200px serif;
}

        Tips：如果要同时设置单独和连写两个形式，要么把单独写在连写下面，要么就写在连写里面。

        1.7 font-variant属性

        属性名：font-variant

        取值：

        

a{
    font-variant: small-caps;
}

        Tips：意味着所有小写字母都会被转化成小型的大写字母，转化后的字母与其余文本相比更小。

        例：一下显示文本，上方的AA为小写aa转化而来，明显比下方无任何修饰的小上不少

        1.8 text-transform属性

        属性名：text-transform

        取值：

        代码格式：

/* 全部大写 */
div{
    text-transform: uppercase;
}
/* 全部小写 */
h6{
    text-transform: lowercase;
}
/* 啥事没有 */
p{ 
    text-transform:none;
} 
/* 单词首字母大写 */
a{
    text-transform: capitalize;
}

        2. 文本样式

        2.1 文本缩进

        属性名：text-indent

        取值：

        1.数字＋px

        2.数字＋em（推荐：1em=当前标签font-size的大小）

        代码格式：

/* 取值一 */
div{
    text-indent: 10px;
}
/* 取值二 */
h6{
    text-indent: 1em;
}
/* -----拓展----- */
/* 字符间距 */
p{ 
    letter-spacing: 20px;
} 
/* 词间距 */
a{
    word-spacing: 5px;
}

        效果如图:

        2.2 文本水平对齐

        属性名:text-align

        取值:

代码格式:

/* 两端对齐 */
div{
    text-align: justify;
}
/* 左对齐 */
h6{
    text-align: left;
}
/* 居中对齐 */
a{ 
    text-align: center;
} 
/* 右对齐 */
p{
    text-align: right;
}

Tips:text-align:center可以让文本/span标签/a标签/input标签/img标签水平居中,但是要在它的父元素上设置

        2.3 文本修饰

        属性名:text-decoration

        取值:

        

        代码格式:                    Tips:长会用text-decoration:none清除<a>标签的默认下划线

/* 下划线 */
div{
    text-decoration: underline;
}
/* 删除线 */
h6{
    text-decoration: line-through;
}
/* 上划线 */
a{ 
    text-decoration: overline;
} 
/* 无装饰线 */
p{
    text-decoration: none;
}

  3. 行高

        作用:控制行间距

        属性名:line-height

        取值: 1.数字+px / 2.倍数(当前font-size标签的倍数)

        使用场景:1.单行文本垂直居中可以设置line-height:文字父元素高度

        2.网页精准布局时可以设置line-height:1实现取消上下距

        Tips:如果设置了行高和font的连写,注意覆盖问题

        font:style weight size/line-height family;

二、Chrome调试工具

        1. 打开方式

        1.1 检查

        

        1.2 看哪里?

        Elements可以看到当前页面结构

        styles则会显示当前样式

        2. 选择元素

        1.1 方法一

        直接点击该元素代码

        1.2 方法二

        点击左下角选择器,点击后鼠标会处于一种"附魔"的状态,将鼠标悬置在想要查看的元素上,下方就会自动找到该元素所在代码.

        3. 控制样式

                 (仅是临时效果,只有在源码中修改才能长期保留)

        1.1 修改属性值

                 直接修改属性值进行修改

        1.2 添加属性

         在上一个属性的分号后点击一下直接添加     

        1.3 控制样式生效

                  点击属性前小框即可

        4. 特殊情况 

        1.1 样式上有删除线

                含义:样式失效        

                原因:1.样式被注释掉了

                        2.样式被覆盖了

        1.2 样式前有小三角形

                含义:样式报错

                原因:1.属性值后没写分号  

                        2.出现中文标点符号

                        3.属性名or属性值单词拼错

三、字体和文本样式（拓展）

        标签水平居中方法总结 margin: 0 auto

        Tips:如果要让div / p / h(大盒子)水平居中,直接给当前元素本身设置即可        

        一般针对于固定宽度的盒子,如果大盒子没设置宽度,此时会默认占满父元素的宽度

四、综合案例

        1.新闻网页案例

                做出以下效果(自己截图去qq或wx图片提取文字):

        

        做法(做法有很多,我只写自己写的做法):

        1.首先我们先看看有哪些部分需要用到样式,

        标题居中(但是这个居中可以直接写在标签内,所以不用特地写css),

        时间居中＋变色,把它丢到div,

        新浪科技应该是个超链接＋变色,

        收藏文本看起来是可以点击的,但是不会跳转,所以不是超链接应该只是一个按钮

        2.写css文件

div{
    color: #808080;
    /* 同一排文字大小应该一致 */
    font-size: 15px;
    /* text-align:center;实现文本居中 */
    text-align: center;
}
a{
    color: #87ceeb;
    font-size: 15px;
    text-align: center;
}
input{
    /* 边框设为0 */
    border: 0px;
    /* 按钮背景颜色改成白色,这样就看不出来是个原始按钮了 */
    background-color: white;
    font-size: 15px;
    /* 修改一下文本颜色,尽量接近例图 */
    color:rgb(2, 2, 113);
}
p{
    /* text-indent实现首行缩进 */
    text-indent: 30px;
    font-size: 15px;
    font-weight: 500;
}
hr{
    margin-top: 15px;
}

         3.写html部分

        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻网页案例</title>
    <link rel="stylesheet" href="Test02.css">
<style></style>
</head>
<body>
    <h1 style="text-align: center;">《自然》评选改变科学的10个计算机代码项目</h1>
    <div>2077年01月28日  <a href="https://tech.sina.com.cn/">新浪科技</a>  <input type="button" value="收藏文本"></div>
    <hr>
    <p>2019年,事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现,其他研究者也可以在此基础上进一步加以分析。</p>
    <p>这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·菜维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力,”他说，“问题在于，我们仍然震要思考。”</p>
    <p>如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员,一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起,后者已经渗透到研究工作的各个方面。近日,《自然》(Nature)杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码,并列出了其中10个关键的计算机项目。</p>
    <p>最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran,用户可以用人类可读的指令来编程，例如x=3+5。然后由编译器将这些指令转换成快速、高效的机器代码。</p>
</body>
</html>

         好,展示的效果和例图差不多,懒得截图了

        2.卡片居中案例

         要求：对于大小、颜色等具体样式取值，参考效果图上的标注即可

         1.首先我们先看到白色部分宽和高,不难猜测出是一个盒子,车车图片宽度160,所以我们可以把盒子边框宽度设置为(234-160)/2=37px(笨办法但使适用),

        图片一眼居中,所以写个margin:auto实现自动居中,margin-top用来调整与盒子顶部的距离

        下面三行文字分别用h3,h4,p三个标签来承载.

        2.css文件

img{
    display: block;
    margin: auto;
    margin-top: -10px;
}
h3{
    text-align: center;
    size: 25px;
    font-size: 14px;
}
h4{
    size: 30px;
    font-size: 12px;
    color: #cccccc;
    text-align: center;
    margin-top: -5px;
}
p{
    font-size: 14px;
    color: #ffa500;
    text-align: center;
}

        3.HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米平衡车</title>
    <link rel="stylesheet" href="test03.css">
    <style>
        /* 盒子的样式写在HTML中 */
    .box{
        width: 234px;
        height: 300px;
        background-color: #f5f5f5;
    }
    </style>
</head>
<body>
    <div class="box"> 
    <br>
    <img src="car.png" alt="车车;">
    <h3>九号平衡车</h3>
    <h4>成年人的玩具</h4>
    <p>1999元</p></div>
</body>
</html>

        效果: