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

标题: 前端基础第四天-王隆-20230413 [打印本页]

作者: 王隆 时间: 2023-4-13 23:36
标题: 前端基础第四天-王隆-20230413
一、今日知识点
1、CSS的简介
      HTML的局限性：HTML可以做简单的样式，但是会让代码显得很臃肿
      CSS（Cascading Style Sheets）层叠样式表，是一种标记语言，它可以为页面设置丰富的样式，也能实现结构和样式的分离。
2、CSS的语法规范
      注意点：
               选择器用于指定选择哪个元素，{}里面写的是对这个元素的具体样式设置。
               属性和属性值之间用“:”来隔开的，属性和属性值的这种形式也叫做键值对。
               多对属性和属性值之后要用";"来结尾。
3、CSS的基础选择器
      标签选择器：标签选择器是指用HTML的标签名作为选择器，按照标签的类型来设置统一的CSS样式
               特点：能快速选择页面中的某一类标签来设置样式，但是不能为同一类的标签设置差异化的样式。
      类选择器：如果想差异化选择不同的标签来设置样式，可以使用类选择器
            注意点：
                     类选择器使用“.”来定义，用class来调用，在调用的时候不要写“.”。
                     如果类名比较长，可以使用横线来进行连接
                     不要使用纯数字、中文等来进行命名，类名要有意义，尽量都使用英文字母
            多类名的使用
                     注意点
                              在标签中使用多个类的时候要用空格将多个类名隔开
                              可以根据自己想要的样式来调用不同的类名，类名的多少可以自己选择
      ID选择器
            ID是唯一的页面表示，通常是为HTML来某个特定元素来指定特定的样式，CSS中的id选择器用“#”来定义。
            注意点
                     用#来定义，用id来进行调用。
                     一个页面中同一个id选择器只能被调用一次，不能调用多次，因为id选择器中的样式一般都会比较特殊。
            id选择器和类选择器之间的区别
                     类选择器好比人的名字，一个人可以有多个名字（多类名的使用），也可以一个名字可以被多个人使用（同一个类名被多次调用）
                     id好比人的身份证号码，每个人都是唯一的编号
                     id选择器一般情况下会和JS一起联合使用来为页面中的特殊的元素设定状态。

      通配符选择器
            在CSS中，通配符选择器用"*"来定义，表示选择页面中的所有的元素（标签）。
4、CSS的字体属性
字体外观
      使用font-family 属性快来定义字体外观
      注意点
         1、各种字体之间要用英文的逗号隔开
         2、如果字体是一个词组，那么要用双引号引起来
      CSS Unicode字体
         在CSS中设置字体名称，直接写中文是可以的，但是在字符集如果出现不匹配的情况，可能会产生乱码，如果是Unicode编码能避免该问题
字体大小
      使用font-size属性来设置字体大小
      注意点：
         一般我们会将字体大小的值设置为具体的像素值，单位是(px)
         谷歌浏览器默认的字体大小是16px，最小到12px
         不同的浏览器之间对于默认的字体大小是不一致的，所以我们在写页面的时候，要设置一个明确的字体大小，不要使用默认值。
         一般情况下会给body来指定整个页面的字体大小
字体风格
      使用font-style来设置字体的风格
      常用属性值
         normal  默认值，浏览器会显示标准的字体样式
         italic 浏览器会将字体显示为斜体
      注意点：
         实际开发中很少将正常的字体改为斜体，一般会将em和i标签的斜体样式转化为正常显示，所以font-style:normal;使用的场景更多。
字体的粗细
      使用font-weight属性来控制字体的粗细
      例
      注意点：一般情况下我们只设置400(正常字体粗细)和700（代表加粗字体粗细），值后面不要加单位。
字体的复合属性
      语法规范
         font：font-style font-weight font-size/line-height font-family;
      注意点：
         使用font属性的时候，必须按照固定的属性顺序来进行书写，不能随便更换顺序，否则会导致font属性失效
         不需要的属性可以省略，font属性中可以被省略的属性 font-style 和 font-weight  不可以省略的是 font-size 和 font-family
5、CSS的文本属性
文本颜色
      使用color属性，设置文本的颜色
         属性值
            预定义的颜色：red、yellow、green等。
            RGB颜色：rgb(255,0,0) 代表纯红色  rgb(100%,100%,100%); 代表白色
            十六进制的颜色：#fff000
文本对齐
      使用text-algin属性来设置元素内的文本对齐方式
         属性值：
            left（默认值，左对齐）
            center 居中对齐
            right 右对齐
文本装饰
      使用text-decoration属性来控制文本的装饰
         常用的属性值
            none 默认值，没有装饰（给a标签去掉下划线，使用频率最高）
            overline 上划线
            line-through 删除线
            underline 下划线
文本缩进
      使用text-indent属性来控制文本的缩进（指的是第一行缩进），通常用在段落的首行。
      属性值
         固定像素单位，比如20px
         相对单位 2em
            em是一个相对单位，相对的是当前元素的font-size的大小，1em就是一倍的font-size值，想要缩进两个字符就可以写成2em。
行间距
      使用line-height属性来设置行高，可以控制文字行与行之间的距离
         属性值
            具体像素值
            font-size的倍数，推荐使用倍数，可以让页面中的字体根据自己的实际来自适应行高。
      使用line-height来实现文本的垂直居中
         将line-height的属性值设置成和父元素的高度一致即可。
文本换行
      通过white-space属性来控制文本是否换行
         属性值
            normal 默认值换行
            nowrap 控制文本到达父元素边界不换行
6、CSS的引入方式
内部样式表
      内部样式表，是写到html页面的内部，将所有的样式代码写到<style></style>标签中。
      注意点
         1、style标签其实可以写在页面的任何地方，但是我们推荐写在head标签中
         2、它能够实现结构和样式的部分分离（没有完全分离）
         3、代码结构更加清晰，平时练习的时候，推荐使用这种方式
行内样式表
      行内样式表就是将样式写在标签的style属性中，适合于简单的样式修改
      注意点
         样式要写在style属性后的双引号中
         样式格式要复合CSS的语法规范
         只用于简单的样式修改，一般不推荐使用这种方式
外部样式表
      实际开发中都是使用外部样式表，适合于样式比较多的情况
      使用方式
         1、先创建一个css文件
         2、在html文件中使用link标签来引入css文件即可
            rel 定义当前文档与被链接文档之间的关系，这里直接指定为stylesheet，表示被链接的文件是一个css样式表
            href 定义链接的css文件的路径（URL）

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