要么改变世界,要么适应世界

CSS 语法一

2020-03-08 09:42:00
114
目录

前言

在网页设计中,往往会利用到HTML与CSS的结合,HTML是实现大致框架的,而CSS则是为HTML框架设置想要设定的样式属性,两者相结合可以完整的生成出相应的静态网页。 简单说, HTML进行布局,CSS进行页面的美化 ,即HTML指明有什么,CSS指明怎么放。

创建CSS方法

  1. 使用元素内嵌样式表

    <a href="https://yalexin.gitee.io/">HTML原生超链接</a>
    <a href="https://yalexin.gitee.io/" style="font-size: 40px;">CSS修饰超链接</a>
    <a href="https://yalexin.gitee.io/" style="font-size: 40px; color: #ff0000;">有颜色的超链接</a>
    
  2. 使用文档内嵌样式表

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style type="text/css">
            a { /* 所有的a标签都是这个样式 */
                color: coral;
            }
        </style>
        <title>css1</title>
    </head>
    
    <body>
        <a href="https://yalexin.gitee.io/">文档内嵌CSS超链接</a>
    </body>
    
    </html>
    

    注意上面head下面的style标签,它是内嵌到了文档中,它定义了所有a标签的样式

  3. 使用外部样式表

    • 新建一个a.css文件

      a {
          color: rgb(37, 0, 139);
          font-size: 50px;
      }
      
    • 在HTML文件中引入上文的a.css

      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" type="text/css" href="a.css">
          <title>css1</title>
      </head>
      

    这三种样式是有优先级的,记住他们的优先级:元素内联式 > 文档内嵌式 > 外部式,但是文档内嵌式>外部式有一个前提:文档内嵌式css样式的位置一定在外部式的后面。 其实总结来说,就是--就近原则(离被设置元素越近优先级别越高)。 但注意上面所总结的优先级是有一个前提:元素内联式 、文档内嵌式 、外部式是在的相同权值的情况下。

CSS基本选择器

  • 选择所有元素

    style 元素:*{}
    
  • 根据类型选择元素

    style 元素:a{}
    body元素:<a>博客链接</a>
    
  • 根据类选择元素

    style 元素:.class_test{}
    body元素:<a class = "class_test">博客链接</a>
    
  • 根据ID选择元素

    style 元素:#id_test{}
    body元素:<a id = "id_test">博客链接</a>
    
  • 根据属性选择元素

    style 元素:[href]{}
    body元素:<a href = "https://yalexin.gitee.io/">博客链接</a>
    
    
  • :选择器动作

    style 元素:a:hover{}
    body元素:<a>博客链接</a>
    
    

**说明:**选择器仅出现在文档内嵌或者外部样式中。

ID选择元素与类选择元素:

  • 共同点:都可以作为选择器,改变属性外面的元素的样式。
  • 不同点:ID选择器又叫做唯一选择器,ID是元素的一个唯一标识,即主键。即在网页中次ID属性值确保只出现一次,不能重复出现。类属性可以多次使用,用户根据需要,将部分具有某种特征的元素集合归为一类,可将该类元素表现出同一效果,比如说id=apple1的苹果、id=apple2的苹果,id=banana1的香蕉、id=banana2的香蕉,它们都同属于水果类,可以根据需要设置它们的class=fruit。

控制背景

.class_test {
    background-attachment:local;/* 固定方式 */
    background-size: auto;
    background-repeat: no-repeat;/* 重复方式 */
    background-color: brown;
    background-image: url(hello.png);
}

历史评论
开始评论