• 【前端技术】CSS基础入门篇

    一、 CSS简介

    css（Cascading Style Sheets，缩写为 CSS，也叫作层叠样式表）是一套美化HTML标签所编写出页面的语法，CSS描述了如何在不同设备上渲染内容的方法。

    二、 CSS基本引入方法

    
<html lang="en">

<head>
    <meat charset="UTF-8">
        <title>CSS引入方法title>
        
        <style type="text/css">
            div {
                Width: 100px;
                Height: 100px;
                Background-color: green;
            }
        style>
        
        <link rel="stylesheet" type="text/css" href="tp.css">
head>

<body>
    
    <div style="Width:100px;height:100px;Background-color:red;">div>
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    三、CSS选择器

     /* 1.通配符选择器 */
 * {
     margin: 0px;
     padding: 0px;
     /* !important表示优先使用 */
     Background-color: red !important;
 }

 /* css选择器 2.id选择器 */
 #only {
     Background-color: red;
 }

 /* css选择器 3.CLASS选择器
    背景颜色为绿色，class为demo的都加上该CSS
*/
 .demo {
     Background-color: green;
 }

 /* css选择器 4.标签选择器 
设置字体颜色为橘色，font-weight设置字体为加粗 标签选择器表示所有div都采用该格式
*/
 div {
     Background-color: black;
     Color: #f40;
     Font-weight: bold;
 }

 /*css选择器 5.分组选择器  > 组合器选择前一个元素的直接子代的节点 */
 div,
 span,
 p {
     color: red;
 }

 /*css选择器 6.直接子代选择器 */
 ul>li {
     font-size: 20px;
 }

 /* css选择器 7.一般兄弟组合器   p ~ span 匹配同一父元素下，
     元素后的所有  元素 */
 p~span {
     color: #f40;
 }

 /* css选择器 8.紧邻兄弟选择器   h3 + p 会匹配紧邻在 h2 元素后的第一个 
     元素 */
 h3+p {
     color: #000;
 }

 /* css选择器 9.结构伪类选择器 
        first-child:查找第一个元素
        last-child:查找最后一个元素
        nth-child(n):查找第n个元素，第一个元素n为1
*/
 p:first-child {
     color: red;
 }

 /* css选择器 9.伪类选择器 */

 a:hover {
     color: #00f;
 }

 /* css选择器 10.属性选择器 '[ ]'可以选择任何有值得属性填入其中，调用这个css样式 也可以只给这个一个属性加上样式（id="ls"） */
 [id] {
     Background-color: blue;
 }

 /* css选择器 11.父子选择器/派生选择器 */
 div span {
     background-color: red;
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75

    四、 CSS优先级问题

    选择器的优先级：

    • !important > 内联样式 > id 选择器> class选择器 == 属性选择器 == 伪类选择器 > 标签选择器 > 通配符选择器
    • 权重值越高优先级越大，多种选择器叠加使用可以通过权重值相加，从而得出最终的权重
    • css权重是属于256进制，0到1之间隔了256位后才进的1
    选择器权重优先级
    !importantInfinity(正无穷)最高
    内联样式1000第一
    id选择器100第二
    class、伪类、属性选择器10第三
    标签选择器、伪元素选择器1第四
    通用选择器、子选择器、一般兄弟选择器，紧邻兄弟选择器0

    五、寄语

    1.css是前端重要的组成部分，学会css可以有很多的玩法；
    2.多学习、多看、学想、多实操，成为更好的你；
    3.喜欢的小伙伴可以点赞、关注、收藏哟！

  • 相关阅读:
    基于php智能推荐的民族服饰网的设计与实现
    STM32_SPI总线驱动OLED详细原理讲解
    算法竞赛入门【码蹄集进阶塔335题】(MT2326-2330）
    从一个 issue 出发，带你玩图数据库 NebulaGraph 内核开发
    【极简python】第四章 列表，字典，元组
    Windows未正确加载怎么办？
    [附源码]Python计算机毕业设计宠物短期寄养平台
    Spring Boot启动流程分析
    ＜＜Java＞＞ Thread 类的基本用法
    K8s Pod的QoS类
  • 原文地址：https://blog.csdn.net/qq_45538572/article/details/138170843