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

标题: 陈玉-20221012-CSS1 [打印本页]

作者: polaris123 时间: 2022-10-12 23:39
标题: 陈玉-20221012-CSS1
一、今日学习内容1.CSS概念：层叠样式表（Cascading Style Sheet）的简称，CSS也是一种标记语言，可以给HTML书写出来的网页设置不同的样式
2.语法规范
eg：h1 {color:red; font-size:14px;}
h1是选择器；color是属性；red是属性值
注意1、选择器是用于指定CSS样式的HTML标签，{}里面是对该选择器设置的具体样式
   2、属性和属性值是以“键值对”的形式出现
   3、属性是一种特定的样式属性，例如：字体颜色，字体大小等等
   4、属性和属性值之间要用英文的“:”隔开
   5、多个“键值对”之间要用英文的";"来隔开
   6、在<head>标签中的<style>标签中

3.CSS基础选择器
  3.1标签选择器（元素选择器）
   概念：用HTML标签名作为选择器，对页面中所有的符合条件的一类标签来指定统一的CSS样式。
   语法：eg：
            div {
                     color：blue；
                     }
优点：能快速设置页面中的一类标签的样式
缺点：不能差异化设置样式
  3.2类选择器
   概念：差异化选择不同的标签，可以使用类选择器
   语法：eg：
         .red {
                  color:red;
                  }
            <div class="red">哈哈哈哈</div>
注意：1.类选择器用英文“.”进行定义，后面跟类
      2.长类名一般可以用横线来进行链接
      3.不要使用纯数字、中文等命名，要使用英文来命名
      4.类命名要有意义，尽量让别人知道类名的目的
   多类名使用
   1、在标签class属性中写多个类名可以进行多类名调用
         2、多个类名之间要用空格隔开
         3、调用完后就会显示所有被调用类名所声明的样式
  3.3ID选择器
   概念：id是唯一标识，所以id选择器主要是为了唯一的id的HTML元素来指定特定的样式,用#定义，id调用
   ID选择器和类选择器之间的区别
      1、类选择器可设置多个名字，同一个名字可被多标签使用
      2、id选择器相当于身份证号码，全国唯一，不得重复
      3、id选择器在一个网页中只能使用一次，类选择器可以使用多次
      4、类选择器在修改样式中使用的频率最高，id选择器一般用于页面的唯一性的元素上，经常搭配JS来使用
  3.4通配符选择器
概念：在CSS中，通配符选择器用“*”来定义，它表示选择页面中的所有元素。
注意：通配符选择器不需要进行调用，可以直接给所有的元素设置样式

4.CSS的字体属性
  4.1font-family（字体外观）
常用：font-family：“Microsoft Yahei”（微软雅黑），Arial（宋体），Helvetica（西文字体），sans-serif（黑体）；
注意：1.各个字体之间用英文逗号隔开；
      2.一般情况使用默认字体，保证在任何用户浏览器上可以正常显示
      3.如果字体的名字有空格，用“ ”将名字引起来
   表现字体外观的方法
1.font-family：‘宋体’；
2.font-family：英文；
3.font-family：Unicode字体；
  4.2font-size（字体大小）
   1、一般设置字体的时候采用的单位是px（像素值）
      2、谷歌浏览器的默认字体大小是16px
      3、可以给body标签中指定文字大小样式，来改变整个页面的文字大小
      4、不同的浏览器可能默认显示的字体大小不一样，我们尽量设置一个明确的字体大小，不要使用默认大小
  4.3font-style（字体样式）
  常用属性值：
      normal 默认值
      italic 斜体
  4.4font-weight（字体粗细）
  常用数值：
  400代表正常的字体粗细
  700代表加粗的字体粗细
  注意数值后面不要px单位
  4.5line-height（行高）
line-height：40px/2（40px的2倍）
具体的像素值设置和倍数设置都可以
4.6字体复合属性（对字体属性样式综合书写）
注意：
1.使用font属性时，必须按照严格的语法格式中属性值的顺序来进行书写，不可以随便更换顺序，各个属性要用空格隔开
2.可以省略的值：font-style 和 font-weight  不可省略的值：font-size 和 font-family

5.CSS文字属性
  5.1文字颜色
   color：英文单词；
   color：#16进制码；
   color：RGB（，，）；
  5.2文字对齐
   text-align：center/right/left
  5.3文本装饰
   text-decoration：none；（无文本装饰）
   text-decoration：underline；（下划线）/overline（上划线）;
   text-decoration：line-through（删除线）
  5.4文字缩进
   text-indent：___ px（像素值，不够灵活）/___ em（文本缩进单位）

6.CSS三种引入方式
  6.1行内样式表（行内式）:实现元素标签内部的style属性中来设置CSS样式，适合于简单的样式修改
   注意：
         1、行内样式书写的时候要符合css的书写规范
         2、样式要写在style属性中，要用双引号来引起来
         3、书写繁琐，没有实现结构样式分离的思想
  6.2内部样式表（嵌入式）:写到html页面内部的，将所有的CSS代码都写到style标签中
注意：
         1、内部样式表也没实现结构和样式分离
         2、练习的时候可以使用这种形式
  6.3外部样式表（链接式）:外部样式表是我们实际开发中最常用的方式，首先创建一个css文件中，放入我们所需要的样式，然后再html文件中引入样式文件即可
步骤：
         1、创建后缀名为.css的样式文件
         2、在HTML文件中，使用<link>标签来进行引入
   link属性
         1.rel：定义当前文档与被链接文档的关系，这里直接写成stylesheet即可，表示被链接的文档是一个样式表文件
         2.href：定义引入文件的路径
   整合多个外部样式表集中导入：
         1.建立每个样式表
         2.将所有样式表集中在一个CSS文件中，输入@import URL（）导入到html文件中

7.Emment语法
7.1直接输入标签名按tab键可以直接补全标签
7.2可以一次性生成多个标签 div*5可以直接生成5个div标签
7.3生成父子级标签  div>p
7.4生成兄弟级的标签 div+p
7.5生成带id属性的标签 #one 来生成如下结果
7.6生成带类名的标签 .red生成如下标签
7.7可以用$来实现自增 p.demo$*5可以实现如下结果
7.8可以使用{}来给标签内写内容 div{我是个超级好的人，是不是呢？是}*5 实现如下结果
7.9快速生成css代码 tac 生成如下代码
二、今日问题
今日没有遇到问题，老师讲解细致到位，优秀！
三、解决方案

今日没有遇到问题，老师讲解很细致到位，优秀！

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