iOS转前端之CSS基础学习

最新推荐文章于 2023-08-16 14:34:33 发布

kidd风

最新推荐文章于 2023-08-16 14:34:33 发布

阅读量995

点赞数

CC 4.0 BY-SA版权

分类专栏： iOS开发如何完美转前端开发文章标签： iOS转前端 CSS CSS选择器 CSS属性 CSS选择器优先级

本文链接：https://blog.youkuaiyun.com/hmh007/article/details/74519261

iOS开发如何完美转前端开发专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了CSS的基本概念，包括层叠样式表的定义及其在网页美化中的重要作用。文章讲解了CSS的三种书写形式：行内样式、页内样式及外部样式，并深入探讨了选择器的应用，如标签、类和ID选择器等。此外，还介绍了CSS属性，如背景颜色、字体大小等，并解释了CSS的继承性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写在开头：

目前保持一天一篇的节奏，虽然前面的知识比较简单，大多数可能比较枯燥，不会的可以百度，但是一些常用的一定要记住，这对后面的实战很重要。基础一定要打扎实。OK，进入第二篇CSS的基础学习吧。

什么是CSS？

CSS的全称是CascadingStyle Sheets，层叠样式表。它是用来控制HTML标签的样式，在美化网页中起到非常重要的作用。

CSS的编写格式是键值对形式的，比如

color:red;

background-color:blue;

font-size:20px;

冒号:左边的是属性名，冒号:右边的属性值

CSS有3种书写形式

p行内样式：（内联样式）直接在标签的style属性中书写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行内样式</title>
</head>
<!-- style="background-color: red;" -->
<body>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>
   <div style="color: red; font-size:50px; background-color: yellow;">11111111111</div>

   <p style="color: green; font-size: 100px; background: url('images/img_03.jpg');">22222222222222222</p>
</body>
</html>

p页内样式：在本网页的style标签中书写

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>页内样式</title>
    <!--
      css的样式遵循的规律:
       1. 叠加原则
       2. 就近原则
    -->
    <style>
       div{
           color: deepskyblue;
           font-size: 30px;
           border: 1px solid red;
       }

       p{
           color: deeppink;
           font-size: 40px;
       }
    </style>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>
  <div>11111111111111111111</div>

  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>
  <p>2222222222222222</p>

  <div>3333333</div>

</body>
</html>

p外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>外部样式</title>
    <link href="css/index.css" rel="stylesheet">
</head>
<body>
   <div>5555555555555555555</div>
   <p>1111111111111111111</p>
</body>
</html>

这里是css文件

div{
    color: blueviolet;
    font-size: 60px;
}

p{
    background-color: greenyellow;
    font-size: 45px;
}

CSS的两大重点

属性

通过属性的复杂叠加才能做出漂亮的网页

选择器

通过选择器找到对应的标签设置样式

下面来重点介绍下CSS选择器

选择器的作用：

选择对应的标签，为之添加样式。

CSS选择器

一、标签选择器

根据标签名找到标签

/*标签选择器*/
        div{
            color: red;
        }

        p{
            color: blue;
        }

二、类选择器

通过类型（class='test'）找到标签

/*类选择器*/
        .test{
            color: green;
        }

三、id选择器

通过id（id='older' / id='main'）找到标签

/*id选择器*/
        #older{
            font-size: 66px;
        }

        #main{
            width: 300px;
            height: 250px;
            background-color: green;
        }

四、并列选择器

中间通过 ‘,’ 隔开，表示要同时满足条件，才成设置样式

/*并列选择器*/
        div,.test{
            /*background-color: black;*/
        }

五、复合选择器

直接两个条件写到一起，中间没有任何符号间隔，相当于集合中的并集，任意满足一个条件即可。

/*复合选择器*/
        div.test{
           border: 10px dashed red;
        }

六、后代选择器

通过字面意思很明显，就是属于它的子集即可。

/*后代选择器*/
        div .test3 a{
            color: black;
        }

七、直接后代选择器

跟第六项很像，但是只能是直接的子集，只能是第二层。

/*直接后代选择器*/
        div  >  p{
            color: black;
        }

八、相邻兄弟选择器

相邻的两项即可。

/*相邻兄弟选择器*/
        div + test3{
            color: black;
        }

九、属性选择器

可以通过标签的某一个属性进行查找。

/*属性选择器*/
        div[name="jack"]{
            color: black;
        }

十、伪类

一些系统定义的，可以通过特定动作激活，来查找对应的标签，看一下用法应该就明白了。

/*前面是一个选择器，然后后面再加上对应的伪类即可*/
#main:hover{
            /*width: 400px;*/
            /*height: 50px;*/

            /*改变鼠标的类型*/
            cursor: crosshair;
        }

下面列举下常用的伪类：

十一、伪元素

跟伪类很想，只不过系统的定义不同，下面列举下常用的伪元素：

到这里，CSS的选择器就介绍完了，虽然十几种，但常用的也就那么三四种（类、标签、id选择器、伪类）。那么大家肯定有疑问，如果用过两种选择器对同一个标签进行设置样式，它会听谁的呢？

这个不用担心，因为CSS是存在优先级的，谁的优先级高就听谁的。这里有一个权值得概念，其实就是一个数值，每个选择器的数值不同，有冲突的时候就利用这个权值进行比较，权值越大，优先级越高。 important的权值最高。

通配选择符（*）：0

标签： 1

类： 10

属性： 10

伪类： 10

伪元素：1

id： 100

important： 1000

原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先级高。

优先级排序

important >内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素> 通配符 > 继承

下面看一个列子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <!--
      选择器的优先级别:
      1.同等级别的选择器,遵循: a.叠加原则  b.就近原则
      2.不同等级别:
        important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承
      3. 选择器的针对性越强，它的优先级就越高
    -->
    <style>
        /*符合选择器*/
        div.test1{ /* 权值 11*/
            color: royalblue;
        }

        /*id选择器*/
        #one{/* 权值 100*/
            color: chocolate;
        }


        /*类选择器*/
        .test2{/* 权值 10*/
            color: purple;
        }

        .test1{/* 权值 10*/
            color: deeppink;
        }

        /*标签选择器*/
        div{ /* 权值 1*/
            color: red;
        }
        div{/* 权值 1*/
            color: blue;
        }
        div{/* 权值 1001*/
            color: green ! important;
         }

        *{ /*所有的 权值 0*/
            font-size: 30px;
            color: firebrick;
        }
    </style>
</head>
<body>
  <div class="test1 test2" id="one" style="color:blue;">1221212121212121</div>
</body>
</html>

接下来介绍第二大快，属性；

CSS属性

我们先来看看一些常用的属性以及CSS3新增的一些属性；

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*background-color: red;*/
            /*background: url("images/img_02.jpg") no-repeat;*/
            /*background-size: cover;*/
            /*width: 500px;*/
            /*height: 250px;*/
            /*隐藏,不会隐藏尺寸*/
            /*visibility: hidden;*/
            /*隐藏,内容和尺寸都会隐藏*/
            /*display: none;*/
        }

        span{
            background-color: green;
        }

        /*伪类*/
        div:hover{
            /*改变鼠标指针的类型*/
            /*十字架*/
            /*cursor: crosshair;*/
            /*手指*/
            cursor: pointer;
            font-weight: bolder;
        }

        a{
            /*去除下划线*/
            text-decoration: none;
        }

        p{
            background-color: red;
        }

        .test1{
            /*首行缩进*/
            text-indent:50px;
        }

        ul{
          /*设置列表左边的样式*/
          /*list-style: square;*/
           list-style: none;
        }

        #test{
            width: 100px;
            height: 60px;
            background: green;
            /*处理超出内容*/
            /*overflow: hidden;*/
            overflow: auto;
        }
    </style>
</head>
<body>

 <div>我是MT</div>
 <span>哈哈哈哈哈哈哈哈</span>

 <a href="#">百度一下,你就不知道</a>

  <p class="test1">ghdbehwjdewbdewbhjdbewdbjewbjdbehwewbhjdbehjwbh</p>
  <p class="test2">ewdnejnwndewjkdnwenjdnjkewnj</p>

  <ul>
      <li>11111111</li>
      <li>2222222</li>
      <li>3333333</li>
  </ul>

  <div id="test">32787327832783723273827832783</div>
</body>
</html>

CSS3新增属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 40px;
            background-color: red;
            margin-bottom: 10px;
            /*设置不透明度*/
            /*opacity: 0.5;*/
            /*块阴影*/
            box-shadow:5px 5px 5px black;
        }
         /*rgba设置透明度*/
        /*.test1{*/
           /*background-color: rgba(255,0,0,1.0);*/
        /*}*/
        /*.test2{*/
            /*background-color: rgba(255,0,0,0.8);*/
        /*}*/
        /*.test3{*/
            /*background-color: rgba(255,0,0,0.6);*/
        /*}*/
        /*.test4{*/
            /*background-color: rgba(255,0,0,0.4);*/
        /*}*/
        /*.test5{*/
            /*background-color: rgba(255,0,0,0.2);*/
        /*}*/

        span{
           font-size: 100px;
           color: red;
           /*文字阴影*/
           text-shadow: 5px 5px 5px black;
           border: 10px solid #ddd;
           -webkit-border-image:url('https://www.baidu.com/img/baidu_jgylogo3.gif') 30 30 round;
        }
    </style>
</head>
<body>
 <div class="test1">1111111111</div>
 <div class="test2">2222222222</div>
 <div class="test3">3333333333</div>
 <div class="test4">4444444444</div>
 <div class="test5">5555555555</div>

 <span>我是MT</span>
</body>
</html>

CSS有N多属性，根据继承性，主要可以分为2大类

可继承属性

父标签的属性值会传递给子标签

一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签

一般是区块控制属性

继承属性根据标签类型的不同而不同：

所有标签可继承

visibility、cursor

内联标签可继承

letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction

块级标签可继承

text-indent、text-align

列表标签可继承

list-style、list-style-type、list-style-position、list-style-image

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
           color: red;
           font-size: 30px;
           font-family: 'Arial';
        }
    </style>
</head>
<body>
  <div>我是MT</div>
  <p>我是MJ</p>
  <span>我是MM</span>
</body>
</html>

下面列举下一些常用的不可继承的属性：

display、margin、border、padding、background

height、min-height、max-height、width、min-width、max-width

overflow、position、left、right、top、bottom、z-index

float、clear

table-layout、vertical-align

page-break-after、page-bread-before

unicode-bidi

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
           background-color: red;
           width: 300px;
           height: 300px;
            /*让标签变成行内标签*/
           display: inline;
        }

        p{
            background-color: green;
            width: 100px;
            height: 150px;
        }
    </style>
</head>
<body>
   <div>
       <p>我是MT</p>
   </div>
</body>
</html>

OK！到这里CSS的基础知识就介绍的差不多了，作者也是菜鸟，很多没讲到还希望大家见谅~内容很多，很杂，大部分是需要理解记忆的，这样到后面实战才能行云流水~下一篇再见~