前端(css引入的3中方式)

一、css引入的三种方式

1. 行间式

   • 在标签头部的style属性内

   • 属性值满足的是css语法

   • 属性值用key:value形式赋值,value具有单位

   • 属性值之间用;隔开

2. 外联式(企业开发中使用这种方式)

   • 在外部css文件中

   • 属性值满足css语法

   • 属性值用key:value形式赋值,value具有单位

   • 属性值之间用;隔开(一般独行分开赋值)

   • 格式:选择器(样式快)

   • 将html与css文件建立联系:通过link

3. 内联式

   • 在style标签内(style标签一般作为head的子标签)

   • 属性值满足的是css语法

   • 属性值用key:value形式赋值,value具有单位

   • 属性值之间用;隔开(一般独行分开赋值)

   • 格式:选择器(样式快)

二、三种引入优先级

• 注：三种方式间没有优先级

• 三种方式协同布局：

  不重复的属性一定为唯一位置的值

  重复的属性采用覆盖赋值，保留最后位置的属性值

  行间式一定式逻辑上最后被解析的位置（js正常操作的就是行间式）

  ！important会影响优先级

• css注释: /这是注释/

三、长度及颜色单位

1. 长度单位：

   px ：像素(pixel),屏幕上的最小单位,用于网页设计,直观方便

   in ：英寸

   pt ：点(point) 1pt = 1/72in,用于印刷业,非常简单易用

   mm ：毫米

   cm ：厘米

   em ：相当长度,通常1em=16px,应用于流式布局

   rem vw

2. 颜色单位

   单色：rgb() rgba()

四、常用样式

1. 字体样式

   • 大小

     font-size:30mm

   • 自重: bold normal lighter 100~900

     font-weight:900

   • 行高:行高设置大于等于字体大小，字体在行高中垂直居中显示

     line-height:100px

   • 样式

     font-style:oblique

   • 自族:可以自定义字族：当：STSong不存在或不起作用再选取：微软雅黑

     font-family：“STSong”，“微软雅黑”

   • css语法： 空格隔开为多个值赋值，逗号隔开为一个值多值赋值

     font:lighter 50mm/80mm "STSong","微软雅黑"

2. 文本样式

   • 颜色

     color: red

   • 水平居中方式：left center right

     text-align: cente

   • 字划线：underline; line-through; overline none

     text-decoration:line-through

   • 字间距

     letter-spacing:3px

   • 词间距

     word-spacing:10px

   • 应用场景

     text-decoration: none

   • 显示方式：

     display: inline-block

   • 垂直排列方式：top baseline bottom

     vertical-align:baseline

   • 缩进

     text-indent:2em

   • 按标签的设定宽度强行换行，可以在单词（整体）内部换行

     word-break:break-all

3. 背景样式

   • 背景图片

     background-image:url()

   • 平铺：no-repeat repeat-x repeat

     background-repeat:no-repeat

   • 定位

     10px == 10px center 设置一个值，第二个值默认为center

     10px 1px 第一个值控制水平位置，第二个值控制垂直默认位置

     background-position:10px

   • 定位相关的涉及到滚动时是效果：scorll fixed

     background-attachment: scroll

   • ==辅助的操作

     overflow:auto

   • 整体设置

     background: url（） 10px 10px no-pepeat red

五、css选择器

1. 基础选择器

   1. 统配选择器：匹配所有（具有显示效果的标签）

   2. 标签选择器（标签名）：匹配指定标签名的对应所有标签

   3. 类选择器（.）：匹配指令类名对应的所有标签

   4. id选择器（#）：匹配指定id名对应的唯一标签,id通常是配合js使用的

   html,css都是标记语言，所有id可以进行多匹配，但js是编编程语言，只能匹配到一个

   总结：统配选择器一般整体用于reset操作（reset操作：清除系统自定义样式） 标签与id在选择器i运用场景并不多，一般不提倡采用id选择器进行布局

   类选择器为布局选择（建议基本去全用class选择器进行布局）

   基本选择器布局首选：id>clas>标签>通配

2. 组合选择器