CSS

最新推荐文章于 2024-07-25 15:36:30 发布

脏颜

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量59

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/qq_22553739/article/details/112548281

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS

层叠样式语言，不是编程语言，属于样式语言，没有变量、数据类型、控制语句等
css是用来服务html的，所以html还是主体，css是依附在HTML上的，所以进行css的开发，还是创建html文件。
在html中嵌入css样式的方式：
1、内联定义
2、定义内部样式快对象
3、链入外部样式表文件

内联定义

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!--
    内联定义语法格式：
      <标签 style="样式名:样式值;
                   样式名:样式值;
                   样式名:样式值;"></标签>
    任何一个html都有style
    -->
    <div id="" style="">
  </body>
</html>

定义内部样式块方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    /*
    这是css的注释！！
    与Java注释一样
    */
    /*
     写样式的语法：
     选择器{
            样式名:样式值;
            样式名:样式值;
            样式名:样式值;
            ······
            }
    css中常见的选择器包括：
       标签选择器
       id选择器
       class选择器
    */
    /*
     标签选择器：
    */
      div{
         background-color : aqua;
         width : 100px;
         height : 100px;
         border-color : red;
         border-style : solid;
      }
      /*
       id选择器：
       #id{
            样式名:样式值;
            样式名:样式值;
            样式名:样式值;
            ······
          }
         作用于该id的元素；
      */
    </style>
  </head>
  <body>
    <!--这里的div标签受上面的div样式影响-->
    <div>
    </div>
  </body>
</html>

类选择器

每个标签都有一个类属性(class)，类属性相同的标签属于一个类。

<! DOCTYPE html>
<html>
  <head>
   <style>
    <!--
    类选择器：
    .class
    作用于当前网页中某一类的标签 
    -->
    .student{
    font-size : 12px ;
    color : #FF0000 ;
    }
   </style>
  </head>
  <body>
  <span class="student">文本内容</span>
  <p class="stdent">文本内容</p>
  </body>
</html>

链入外部样式表文件

创建一个.css文件

<! DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <!--
  链入外部独立的CSS样式表文件
  css文件中可以写标签选择器、id选择器、类选择器 
  优先级：标签选择器、类选择器、id选择器（依次增高） 
   -->
  <!--href后面跟的是CSS文件的url-->
  <link rel="stylesheet" type="text/css" href="css" />
  </head>
  <body>
  <div id="">
  </div>
  </body>
</html>

隐藏样式

<! DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
   <style type="text/css">
    #id{
    <!--隐藏样式-->
    display : none;
    }
   </style>
  </head>
  <body>
    <ul>
     <li>
       <!--以下样式会被隐藏-->
       <ul id="">
       <li></li>
       </ul>
     </li>
    </ul>
  </body>
</html>

脏颜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS

CSS层叠样式语言，不是编程语言，属于样式语言，没有变量、数据类型、控制语句等css是用来服务html的，所以html还是主体，css是依附在HTML上的，所以进行css的开发，还是创建html文件。在html中嵌入css样式的方式：1、内联定义2、定义内部样式快对象3、链入外部样式表文件内联定义<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&gt
复制链接

扫一扫

专栏目录