css3系列-1.css基础知识入门

2020-03-18 09:22:12来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

css3系列-1.css基础知识入门

css3系列-1.css基础知识入门

1.css 如何引用

  • 内部
  • 外部
  • 内联

代码示例

内部css代码示例

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <style>
        h1{
            color: red;
        }
    </style>
</head>

外部css代码示例

<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <h1>微信公众号:全栈学习笔记</h1>   
        
</body>

css文件里面的代码(test.css)

h1{
    color: red;
  }

内联css代码示例

<h1 style="color:red">

这里推荐使用第二种方式,尽量不使用其他两种方式,第二种方式可以是html文件与css文件分离,代码可阅读性以及维护性更强

2.css 优先级

  1. 内联style
  2. id选择器
  3. class选择器
  4. 标签

所谓内联style就是上述的第三种方式,这种方式的css样式级别是最高的。什么是优先级?比如说我在一个标签里面,style设置了一个color属性,然后给这个标签加上一个class,就是外联上一个css文件。这个css文件里面写上这个class的css样式,也是一个color属性,这时,又给这个标签加上了一个id,然后我在css里面给对应的id加上一个color样式,然后再为这个标签本身写上一个color属性,到最后你会发现最后显示的color是style里面的color,如果你删除了style,那么显示的就是对应id的color颜色,依次类推,这就是所谓的css优先级。

3.css 注释

和很多语言一样,css也能注释代码,格式如下

 /* 注释 */

4.css 长度单位

  1. px 像素
  2. em 倍数

以上是最常用的单位,还有一些css3新增的长度单位如:vw、vh、vmin、vmax,rem与em

5.css 颜色单位

  1. red
  2. ff0000

  3. f00

  4. rgb(255,255,255)

用法 如:color:red

6.css 选择器

css里面的选择器比较多,这里暂时只介绍部分选择器,后面会出一期选择器详解,点个关注不迷路哦,微信公众号:全栈学习笔记,正在完善中。很期待你的关注哦!
在这里插入图片描述

选择器的大概分类

  1. 常用选择器
  2. 基本选择器
  3. 层级选择器
  4. 伪类选择器
  5. 属性选择器

这里简单介绍一下常用的选择器:

1.html选择器

*{
    color:red;/*设置页面全部的字体样式属性*/
 }

2.类选择器

.className{
    /*设置某个class=className的全部标签的样式属性*/
    color:red;
}

3.id选择器

#id{
    /*设置某个id=id的标签的样式属性*/
    color:red;
}

4.关联选择器
关联选择器是什么呢?定义:选择器中的选择器

<div class="div">
        <h1>这是全栈学习笔记的关联选择器</h1> 
    </div>

css代码

.div h1{
            color: red;
        }

这样实现的效果就是:在class为div的下面的h1标签的color属性为red

5.组合选择器

div,h1{
            color: red;
        }

注意与上面代码的区分,这段代码实现的功能就是,全部的class为div的标签以及h1标签,将他们的color属性设置为:red。一般来说,color属性是对文本的颜色进行设置。才疏学浅!

这一期的css教程就到这里,下一期将对css的各种常见属性以及属性的值进行讲解!希望点个关注哦!微信公众号:全栈学习笔记

div的标签以及h1标签,将他们的color属性设置为:red。一般来说,color属性是对文本的颜色进行设置。才疏学浅!

这一期的css教程就到这里,下一期将对css的各种常见属性以及属性的值进行讲解!希望点个关注哦!微信公众号:全栈学习笔记


原文链接:https://www.cnblogs.com/swzx-1213/p/12518490.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:学习 CSS 之用 CSS 3D 实现炫酷效果

下一篇:前端 自定义确认提示框