前端(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. 组合选择器

  3.  

原文地址:https://www.cnblogs.com/zhaijihai/p/9681870.html