zoukankan      html  css  js  c++  java
  • css基本属性

    1. css(又称层叠样式表,用来表现HTML的一种计算机语言)


    2. css声明:
      {
        /* 注释 */
        css声明1;
        css声明2;
        属性名:属性值;
        color:red;
        color:#ffffff;
        color:rgb(255,255,255)
        color:rgba(0,0,0,0.5)
      }


    3. 如何在html中应用css
      1) style属性(直接在元素中使用)
      2) 内嵌 head> style (在html中使用style标签内嵌)
      3) 外部引用(从外部引用css文件)
        <link rel="stylesheet" href="">


    4. 选择器
      1) 基本选择器
        1. 元素 div p
        2. id #idname
        3. class .classname
        4. 组合 selector1,selector2
        5. 并且 p.one
        6. 普遍 * 一般与其他选择器配合使用 (以下表示ul标签下的所有子元素)
          ul > *
      2) 层次选择器【多个选择器共同作用结果】
        1. 后代 (空格)
          ul li
        2. 子代(>)
          ul > li
        3. 下一个兄弟(+)
          #second + *
        4. 只有所有兄弟(~)
          #second ~ *
      3) 过滤器
        1. 属性过滤器
          selector[过滤条件]
          1) 属性名
            form > input[name]
            input中包含name属性的元素
          2) 属性值
            form > input[name=val]
            input中包含name属性并且属性值为指定val的元素
            div[class~=one]
            class属性值之一为‘one’的元素
            div[id^=first_]

            id不等于first的
        2. 伪类过滤器
          selector:xxx
          1. 筛选当前元素是独生子的(ul下只有一个li的)
            ul>li:only-child
          2. 筛选当前元素在父元素中出现的位置(ul下的第一个li,最后一个,第n个)
            ul>li:first-child
            ul>li:last-child
            ul>li:nth-child(参数)
              参数:
                数值 1、2、3
                变量 odd even
                表达式 n+3、2n+1
            ul>li:nth-last-child(参数)(参数同上,但是倒着来的)

          3.扩展
            :first-of-type
            :last-of-type
            :nth-of-type(参数)
            :nth-last-of-type(参数)

            :hover

        3. 伪元素过滤器(比如以下的用法为:在选择器下面添加其他元素,常用于使浮动元素的父元素撑起来)
            ::after
            ::before

      2. 级联与继承
        级联 当多个选择器应用到同一个元素中
          1. 如果css声明不同,累加
          2. 如果css声明相同,对比选择器的优先级,优先级胜出的应用其css声明

            .list > li:nth-child(2) {
              color: red;
            }
            #second {
              color: #ededed;
              background-color: pink;
            }
            ==>
            {
              color: #ededed;
              background-color: pink;
            }

            选择器的权重
              1000 style属性
              100 id选择器
              10 类,伪类,属性
              1 元素,伪元素

        继承:能够被子元素所继承的属性有:
                          颜色,文字,字体间距行高对齐方式,和列表的样式

       3.常见的长度单位
          px
          绝对单位,1像素
          em
          相对单位,相对于当前元素的字体大小
          rem
          相对单位,相对于html中设置的字体大小
          百分比
          80%
      

      4.颜色单位
          关键字 lightblue pink
          十六进制 #333 #333333 #fff #000
          函数 rgb(255,255,255)
          函数 rgba(255,255,255,0.5)

      5.字体样式
        font-size(字体大小)
        font-style(字体样式)
        font-weight(字体宽度)
        font-family(字体所属类)
          "Microsoft Yahei","宋体",serif
        color(字体颜色)
        line-height(字体所占行高)
        text-align(文本对齐方式)
        text-decoration(下划线)
        text-shadow(字体所占阴影)
        text-indent(个块元素首行文本内容之前的缩进量)
        速写形式
          font: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family

          font: normal normal normal normal 12px/1.5 "Microsoft Yahei","微软雅黑", Arial, sans-serif;

  • 相关阅读:
    Ftp、Ftps与Sftp之间的区别
    Previous Workflow Versions in Nintex Workflow
    Span<T>
    .NET Core 2.0及.NET Standard 2.0 Description
    Announcing Windows Template Studio in UWP
    安装.Net Standard 2.0, Impressive
    SQL 给视图赋权限
    Visual Studio for Mac中的ASP.NET Core
    How the Microsoft Bot Framework Changed Where My Friends and I Eat: Part 1
    用于Azure功能的Visual Studio 2017工具
  • 原文地址:https://www.cnblogs.com/nyhhd/p/12509322.html
Copyright © 2011-2022 走看看