【不务正业】之前端CSS 基础 (一)

作为一个不误正业的iOS开发者,偶然的机会被"安排"开发小程序和没有前端故事的勇哥合作时发现在各种行内,样式表滥用class,有关margin,pading的各种骚操作,于是才有不务正业系列的CSS基础篇,本篇不介绍有关CSS3的一些用法和标准,后续有时间会补充H5&C3. 诚惶恐,熟知博客的篇幅过长会

【不误正业】CSS

  • 选择器
    • 概述
    • 类型
      • 标签选择器
      • 类选择器
      • id选择器
      • 复合选择器
        • 交集选择器
        • 后代选择器
        • 子代选择器
        • 并集选择器
  • 属性
    • 文本属性
      • 常用文本属性
      • 文本属性的连写
      • BTW
    • 背景属性
      • background-position
      • background 属性连写
  • CSS 三大特性
    • 层叠性
    • 继承性
    • 优先级
  • Logs

选择器

概述

选择器是一种模式,用于选择需要添加样式的元素

类型

标签选择器

写法:标签 {属性: 值}


类选择器

写法:.自定义类名{属性: 值; 属性: 值;}
BTW: 一个标签可以调用多个类选择器。多个标签可以调用多个类选择器.
类选择器命名规范和OOP变量命名规范类似,此处不在赘述。

    .box {
        font-size:40px;
        color:red;
        width:300px;
        height:500px;
        background-color:
    }
    .miss {
        text-indent:2em;
    }


    
"box miss">JeversonJee Greatest HTMLer
我是你爸爸

"box">HeyJeversonJee

id选择器

写法:#自定义名称{属性: 值}
BTW:一个ID选择器在一个页面只能调用一次,一个标签只能调用一个ID选择器。一个标签可以同时调用类选择器和ID选择器。

    .box {
        font-size:40px;
        color:red;
        width:300px;
        height:500px;
        background-color:
    }
    #miss {
        text-indent:2em;
    }


    
"miss" class="box">JeversonJee Greatest HTMLer
我是你爸爸

"box">HeyJeversonJee

复合选择器

概述:两个或者两个以上的基础选择器通过不同的方式组合在一起

交集选择器

写法:标签+类(ID) 选择器{属性:值}




    
"box">JeversonJee

"box">is Ur father

"miss">A greatest developer

后代选择器

写法: 后代选择器+空格+选择器{属性:值}
BTW:后代选择器首选要满足包含(嵌套关系) 父级元素在前面,子集元素在后面

        .box {
            font-size:40px;
        }
        div span {
            font-size:50px;
        }
        
        .box span {
            background-color: blue;
        }
        .box .miss {
           color: red;
        }
    


    
"box">

"miss">JeversonJee

"box">isUrFather

子代选择器

写法:子代选择器: 选择器>选择器{属性:值}
BTW: 选中直系子代元素。

        div>span{
            color:red;
            font-size:40px;
        }
        p>span{
            color:green;
            font-size:60px;
        }
    style>
<body>
    <div>
        <p><span>JeversonJeespan>p>
        <span>isUrFatherspan>
    div>
body>

并集选择器

写法:选择器+,+选择器+,选择器{属性:值}

        .box,#miss,span,h1 {
            font-size:100px;
            color: #fff;
            background-color: green;
        }
    

属性

了解完选择器,控制好显示的标签。下面我们可以通过属性的key:value 来控制表现层

文本属性

常用文本属性

font-size: 16px; 文字大小
font-weight: 700; 文字加粗;
font-family:微软雅黑; 文本的字体
font-style:normal | italic;normal 默认值 italic 斜体
line-height:行高

文本属性的连写

// font: font-style font-weight font-size/line-height font-family;
font: italic 700 16px/40px simsun;

BTW

  • 有关font的连写:lineheight的被层叠的问题
  • font-weight 正常时可使用normal
  • font-family 值可参考相应的标准,可以为汉字可以是Unicode编码

背景属性

background-color,background-image,background-repeat等自行搜索,这边主要讲述background-position

background-position

属性值一共包含left, right, center, top, bottom
应用场景主要集中在一些文字前面有图片等操作。
注意事项

  • background-postion:left 30px; 表示的是水平方向靠左对其,垂直防线距上20像素
  • background-position:left;表示靠左,居中对齐;

background 属性连写

background: #520520 url("xxx.png") no repeat left;

CSS 三大特性

层叠性

继承性

优先级

优先级顺序: 默认样式<标签选择器<类选择器

  • 继承的权重为0
  • 权重会叠加

Logs

  • 2019-07-15 文本属性

你可能感兴趣的:(前端)