zoukankan      html  css  js  c++  java
  • 前端(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.  

  • 相关阅读:
    错误记录笔记(持续更新)
    聊聊iOS Keychain
    IDEA下将dubbo简单项目跑Demo(2019.12版)
    dubbo控制台启动步骤
    day1
    信息安全
    huZABtwIrp
    【踩坑】环境问题
    【踩坑】IDEA 设置 JVM 参数
    WebServer Project-02-XML解析
  • 原文地址:https://www.cnblogs.com/zhaijihai/p/9681870.html
Copyright © 2011-2022 走看看