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

最新推荐文章于 2024-08-16 10:21:04 发布

jeverson.jee

最新推荐文章于 2024-08-16 10:21:04 发布

阅读量163

点赞数 1

分类专栏：前端文章标签： CSS 选择器属性连写继承权重

本文链接：https://blog.csdn.net/github_34552693/article/details/95352930

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

选择器

概述

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

类型

标签选择器

写法：标签 {属性: 值}

<style type="text/css">
    div {
        font-size:30px;
        color:green;
        background-color:yellow;
        width:300px;
        height:200px;
    }

    p {
        color: pink;
        font-size: 60px;
    }
</style>

类选择器

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

    .box {
        font-size:40px;
        color:red;
        width:300px;
        height:500px;
        background-color:
    }
    .miss {
        text-indent:2em;
    }
</script>
<body>
    <div class="box miss">JeversonJee Greatest HTMLer</div>
    <div>我是你爸爸</div>
    <p class="box">HeyJeversonJee</p>
</body>

id选择器

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

    .box {
        font-size:40px;
        color:red;
        width:300px;
        height:500px;
        background-color:
    }
    #miss {
        text-indent:2em;
    }
</script>
<body>
    <div id="miss" class="box">JeversonJee Greatest HTMLer</div>
    <div>我是你爸爸</div>
    <p class="box">HeyJeversonJee</p>
</body>

复合选择器

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

交集选择器

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

<style type="text/css">
    .box {
        font-size:50px;
    }
    div.box {
        color: red;
    }
    div#miss {
        width: 400px;
        height: 300px;
        background-color: yellow;
    }
</style>
</head>
<body>
    <div class="box">JeversonJee</div>
    <p class="box">is Ur father </p>
    <div id="miss">A greatest developer</div>
</body>

后代选择器

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

        .box {
            font-size:40px;
        }
        div span {
            font-size:50px;
        }
        
        .box span {
            background-color: blue;
        }
        .box .miss {
           color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <p><span class="miss">JeversonJee</span></p>
    </div>
    <div class="box"><span>isUrFather</span></div>
</body>

子代选择器

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

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

并集选择器

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

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

属性

了解完选择器，控制好显示的标签。下面我们可以通过属性的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 三大特性

层叠性

继承性

优先级

优先级顺序：默认样式<标签选择器<类选择器<id选择器<行内样式<!important

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

Logs

2019-07-15 文本属性