• css第一课:css内部样式


    css的作用是:修饰网页信息的显示样式 

    css语法格式:

    (1)每个css样式分为由两部分组成:选择符和声明(声明又分:属性和属性值)

    (2)声明是{},属性在{}里面,属性和属性值用冒号连接,每条声明用分号隔开

    (3)一个属性有多个属性值的时候,属性值和属性值不分先后顺序,中间用空格隔开

    (4)在书写样式的过程中,空格和换行等操作不影响属性显示

    图示: 

    语法理解:

    我们举一个整容的例子,那肯定要选择一个部位整吧,比如说我们这里选择整脸,然后我们想将眼睛扩大1公分,鼻子垫高1公分,嘴巴缩小1公分,上嘴唇整一下,下嘴唇也整一下。看下面用css语法怎么写:

     这整个就是css的样式:因为整个人我们选择了脸,所以脸是选择符,这个{}是声明,大括号里面包含了属性和属性值,所以这个眼睛、鼻子、嘴巴就是属性,冒号后面是属性值,属性和属性值之间用冒号隔开,一个属性和一个属性值组成一条声明,所以这{}里面有三条声明,每条声明用分号结束,多个属性值用空格隔开。

    接下来我们就来看看用代码来理解这个语法:

    代码演示:

      我选择了h1标签,给他的color属性增加red颜色

    结果:

     咦,结果运行出来,为什么我的css代码也显示在网页上,而且h1标签的内容11111,字体也没有变成红色,这是怎么回事。看下面

    那是因为呀body是人家html的地盘,你说你一个css去了人家能容得下你吗,所以就成了结果的那个样子,那怎么办呢,这时候呀,我们的css样式外面就要加上一个标签了,来表示一个我是css样式,看下面代码演示:

     结果:

     但是,你看body里面既要放html,又要放css,会觉得挺乱的,这时候我们可以把我们的css样式放在head标签里面,这样body标签放html,head放css样式,就会整齐一点:

    代码演示:

     结果:

     总结:

    (1)css样式放在head里,用style包裹着,

    (2)html标签代码放在body里,

    (3)html显示网页内容,css装饰内容的属性

    今天我们讲的是内部样式,就是在style标签里的样式,我们还有外部样式,行内样式

     为什么要讲外部样式和行内样式呢,因为我们的内部样式是放在head里面style标签里面的,我们要是在body写了100行代码,要规定样式的时候还要滑上去在head写样式,然后再滑下来写html代码,很不方便,所以我们再来讲一讲外部样式和行内样式,请看css第二课:外部样式

     

     

     

  • 相关阅读:
    Flutter在web项目中使用iframe
    vulnhub digitalworld.local: DEVELOPMENT
    【前端】vue数组去重的3种方法
    SELinux零知识学习十二、SELinux策略语言之客体类别和许可(6)
    以神龙出行小程序为例,说一些网站技术
    d的位域啊
    合并两个有序链表OJ
    工业机器人国产替代,数字化转型是关键
    获取URL中的参数
    go-zero环境搭建
  • 原文地址:https://blog.csdn.net/a1598452168YY/article/details/126518707