iOS转前端之CSS基础学习

本文详细介绍了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
id100
important1000

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


优先级排序
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大类

可继承属性

父标签的属性值会传递给子标签
一般是文字控制属性

不可继承属性

父标签的属性值不能传递给子标签
一般是区块控制属性


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

所有标签可继承
visibilitycursor

内联标签可继承
letter-spacingword-spacingwhite-spaceline-heightcolorfontfont-familyfont-sizefont-stylefont-variantfont-weighttext-decorationtext-transformdirection

块级标签可继承
text-indenttext-align

列表标签可继承
list-stylelist-style-typelist-style-positionlist-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>


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

displaymarginborderpaddingbackground
heightmin-heightmax-heightwidthmin-widthmax-width
overflowpositionleftrighttopbottomz-index
floatclear
table-layoutvertical-align
page-break-afterpage-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的基础知识就介绍的差不多了,作者也是菜鸟,很多没讲到还希望大家见谅~内容很多,很杂,大部分是需要理解记忆的,这样到后面实战才能行云流水~下一篇再见~



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值