CSS声明学习

  • 在head标签中使用style标签声明:

    • 作用:此声明一般声明当前网页的公共样式或者给某个标签的单独样式
  • 在head标签中使用link标签引入外部声明好的css文件

    • <-link rel=”stylesheet” type=”text/css” href=”路径”/>
    • 作用:此声明相当于调用,解决了不同网页间样式重复使用的问题.一次声明,随处使用
  • 在标签上使用style属性进行声明:

    • 作用:此声明会将css样式直接作用于当前标签。
  • 问题:不同的声明给同一个标签操作了同一个样式,会使用谁的?

    • 如果Css的声明全部在head标签中,则遵循就近原则,谁离标签近,谁就会被显示。
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      <html>
      <head>
      <meta charset="UTF-8">
      <title>css的声明学习</title>
      <!--引入外部声明好的css文件-->
      <link rel="stylesheet" type="text/css" href="css/my.css"/>
      <!--声明css代码域-->
      <style type="text/css">
      hr{
      width: 50%;
      height: 20px;
      color: red;
      background-color: red;
      }
      </style>
      </head>
      <body>
      <h3>css的声明学习</h3>
      <hr style="background-color: blue;height:50px;"/>
      <hr/>
      </body>
      </html>

      css样式使用

  • 添加背景图片

    • background-image: url(img/a1.jpg)
  • 设置背景颜色

    • background-color: orange;
  • 设置图片不重复

    • background-repeat: no-repeat;(当图片尺寸不足时,会自动重复而铺满整个屏幕)
  • 设置图片平铺

    • background-size: cover;(图片平铺整个页面)
  • 添加边框及其颜色和大小

    • border: solid 1px red;(solid实线)
  • 设置表框的角度

    • border-radius: 10px;
  • 设置倾斜角度

    • transform: rotate(-10deg);
  • 设置文本位置

    • text-align: center;
  • 设置文本颜色

    • color: blueviolet;
  • 设置文本加粗

    • font-weight: bold;
  • 设置字体间距

    • letter-spacing: 10px;
  • 设置超链接去除下划线

    • text-decoration: none;
  • 伪类-鼠标划过链接

    • img:hover{}
  • 浮动方式

    • float: left;(左浮)