zoukankan      html  css  js  c++  java
  • 前端第45天------css三种引入方式、样式与长度颜色、css选择器

    一、css三种引入方式

      行间式:<div style=" 100px; height: 100px; background-color: red"></div>

      内联式:<head>

            <style>

              div {

                 100px;

                height: 100px;

                background-color: red;

              }

            </style>

          </head>

      外联式:file: zero.css

          div {

             100px;

            height: 100px;

            background-color: red;

          }

          file: zero.html

          <head>

            <link rel="stylesheet" type="text/css" href="css/zero.css" />

          </head>

      三种引入方式优先级(三种引入方式并没有优先级):1.三种方式协同布局

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

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

                              4.行间式一定是逻辑上最后被解析的位置(js正常操作都是行间式)

                              5.!important会影响优先级

    二、样式

      基本样式:<head>

            <style>

              dic{

                100px;

                height:100px;

                background-color:red;

              }

            </style>

          </head>

      字体样式:font-size  字体大小

           font-weight  字重(粗细)

           line-height  行高

           font-style  样式

           font-family  字族

      文本样式:color  颜色

           text-align  水平居中方式

           text-decoration  字划线

           letter-spacing  字间距

           word-spacing  词间距

           text-decoration  应用场景

           display  显示方式

           vertical-align  垂直排列方式

           text-indent  缩进

           word-break  按标签设定的宽度强行换行,在单词内部换行

      背景样式:background-image  背景图片

           background-report  平铺

           background-attachment  滚动效果

           background  整体设置

    三、长度及颜色

      长度:px  像素

         mm  毫米

         cm  厘米

         in  英寸

         pt  点(point)

         em  1em=16px

      颜色:rgb()  三个值为[0-255]或百分比

         rgba()  前三个值可以是像素或是百分比,最后一个为[0,1]数值

         hsl()  第一个值为[0,360]数值,后二个值可为百分比

         hsla()  第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值

         #AABBCC  六个十六进制位,每两位一整体

  • 相关阅读:
    Object的create、assign、getPrototypeOf与拷贝
    vue中使用axios最详细教程
    COJ1249(竞争性酶抑制剂和同工酶)
    COJ1127(芝麻开门)
    COJ1219(建食堂)
    COJ1236(删数游戏)
    COJ1247(有髓鞘神经纤维动作电位传导)
    POJ1159(Palindrome)
    POJ1080(Human Gene Functions)
    Uva10034(Freckles)
  • 原文地址:https://www.cnblogs.com/zhouyi0316/p/9681825.html
Copyright © 2011-2022 走看看