菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: css知识02_王晓苗_20230207 [打印本页]

作者: 王晓苗1991 时间: 2023-2-7 19:56
标题: css知识02_王晓苗_20230207
本帖最后由王晓苗1991 于 2023-2-7 23:33 编辑

20230207学习笔记
      1. 今日学习内容
            CSS文本属性
                     文本颜色：color
                              预定义的颜色，如red,yellow,green等
                              RGB代码，如rgb(170,88,88)
                              十六进制颜色,如#000000代表黑色
                              属性值三种设置形式
                     文本对齐：text-algin
                              left 左对齐
                              right 右对齐
                              center 居中对齐
                     文本装饰：text-decoration
                              none：默认值，没有装饰线（最常用）主要是给a标签去掉下划线
                              underline：下划线，链接的a标签是自带下划线
                              line-through：删除线
                              overline：上划线
                     文本缩进：text-indent
                              固定像素值，比如10px
                              相对单位 em
                              属性值两种设置形式
                     行间距：line-height
                              固定像素值，如70px
                              当前元素的font-size的倍数（推荐使用，可以让文字根据自己的大小来适配行高）
            CSS的引入方式
                     行内样式表（在元素的标签内部的style属性中，设定CSS样式，适用于简单的样式修改。）
                     内部样式表（也称为嵌入式，在<head></head>标签中的<style></style>标签中书写样式）
                     外部样式表（链接式）（开发中最常用，实现了结构和样式的完全分离）
            Emmet语法
                     输入div 按tab键，能快速补全标签
                     <div> </div>
                     输入div*5 按tab键，能生成5个div标签
                     <div> </div>
                     <div> </div>
                     <div> </div>
                     <div> </div>
                     <div> </div>
                     输入div>p 按tab键，生成父子级关系标签
                     <div>
                              <p></p>
                     </div>
                     输入div>p 按tab键，生成平级级关系标签
                     <div>
                     </div>
                     <p></p>
                     输入p.demo 再按tab键，生成类名为demo的p标签
                     <p class="demo"></p>
                     输入p#demo 再按tab键，生成id为demo的p标签
                     <p id="demo"></p>
                     输入p.demo$*5 再按tab键，生成class为class1到class5的5个p标签（使用自增符号$生成顺序内容）
                     <p class="demo1"></p>
                     <p class="demo2"></p>
                     <p class="demo3"></p>
                     <p class="demo4"></p>
                     <p class="demo5"></p>
                     生成标签时直接添加内容
                     输入div{123} 再按tab键，生成内容为123的div标签
                     <div>123</div>
                     这些是Emmet常用的语法，可以提高HTML和CSS的编写速度
            CSS的复合选择器
                     概念：对基础选择进行组合而形成的选择器
                     优点：可以更加高效的选择目标元素
                     常用的复合选择器
                              后代选择器（包含选择器）：元素1  元素2 {样式声明} ，表示选择元素1中的所有元素2（所有复合条件后代都可以被选中，不局限于到底是儿子还是孙子）
                              子元素选择器：元素1 > 元素2  {样式声明} 表示选择元素1里面最近的一级元素2，简单来说就是选亲儿子元素
                              并集选择器：元素1，元素2{样式}，表示为元素1和元素2定义相同的样式，这样可以简化代码，提升效率。注意：多选择器之间用逗号隔开。
                              伪类选择器
                                    链接伪选择器
                                             :link  选择所有未访问过的链接
                                             :visited  选择所有已经被访问的链接
                                             :hover 选择鼠标指针悬浮的链接
                                             :active  选择所有鼠标点击时的链接
                                             尽量采取 link visited hover active 的顺序
                                    焦点伪选择器
                                             :focus  用于选取获得焦点的表单元素，一般情况下在<input>表单元素中使用
                              二者的区别：后代选择器可以选择所有后代元素，包括儿子和孙子；子选择器只包含儿子。
            CSS的元素显示模式
                     概念：CSS的元素显示模式就是指html里面的元素（标签）是以什么方式进行显示的，比如<div>自己占一行，比如一行可以放多个<span>
                     元素显示模式的分类
                              块元素
                              行内元素
                              行内块元素
                     元素模式的转换
                              转换为块元素：display:block;
                              转换为行内元素：display:inline;
                              转化为行内块元素：display:inline-block;
      今日遇到问题
            把input文本框、img标签和a标签放在同一个td中，img标签的相对于input和a向上偏移
      问题解决方案
            将Input、img和 A 标签分别放在三个 Td 里面
            随后学了其他Css知识后，还有其他解决方案

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)