CSS教程

CSS（一）

本文主要是介绍CSS（一），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

快速入门

规范项目目录
image

使用CSS简单美化颜色

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个css程序</title>

<!--
style中编写css代码，每一个声明最好使用‘;’结尾
语法：
选择器{
    声明1;
    声明2;
    声明3;
}
-->
    <style>
        h1{
            color: dodgerblue;
        }
    </style>

</head>
<body>

<h1>CSS到底是什么？</h1>

</body>
</html>

HTML与CSS代码分离（建议使用）
<link rel="stylesheet" href="css/style.css">

选择器

作用：选择页面上的某一个或某一类元素

基本选择器

标签选择器

  <style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
      color: #6f4955;
      background: bisque;
      border-radius: 20px;
    }
    p{
      font-size: 80px; /*字体大小*/
    }
  </style>

类选择器和class

<style>
        /*类选择器格式：.类名称{}
        好处：可以多个标签归类，属于同一个class，可以复用*/
        .biaoqian1{
            color: brown;
        }
        .biaoqian2{
            color: darksalmon;
        }
    </style>

ID选择器

<style>
        /*id选择器
          #id名称{}*/
        #label1{
            color: aqua;
        }
        .biaoti{
            color: #6f4955;
        }
    </style>

层次选择器

后代选择器：在某个元素的后面

/*后代选择器*/
body p{
    background: cadetblue;
}

子选择器：之后一代

/*子选择器*/
body>p{
    background: brown;
}

相邻兄弟选择器：同辈

/*相邻兄弟选择器：只对同辈后面一个元素生效*/
.active+p{
    background: #6f4955;
}

通用选择器

/*通用兄弟选择器：当前选中元素的向下所有兄弟元素*/
.active~p{
    background: blueviolet;
}

结构伪类选择器

伪类：条件

    <style>
        /*选中ul的第一个子元素*/
        ul li:first-child{
            color: dodgerblue;
        }
        /*选中ul的最后一个子元素*/
        ul li:last-child{
            color: darksalmon;
        }
        /*选中p：定位到父元素，选择当前的第一个元素*/
        p:nth-child(1){
            background: dodgerblue;
        }
        /*选中父元素下的p元素的第二个，类型*/
        li:nth-of-type(1){
            background: springgreen;
        }
    </style>

属性选择器（常用）

正则表达式通配符

= 绝对等于
*= 包含这个元素
^= 以这个元素开头
$= 以这个元素结尾

/*选择id为first的元素 a[]{}*/
/*选择id为first的元素 a[]{}*/
a[id="first"]{
    background: aqua;
}
/*选择class中有links的元素*/
a[class *= "links"]{
    background: #6f4955;
}
/*选择href中以http开头的元素*/
a[href^=http]{
    background: aqua;
}
这篇关于CSS（一）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航