CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

alwaysPractice

最新推荐文章于 2024-10-01 23:54:35 发布

阅读量2.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： CSS

本文链接：https://blog.youkuaiyun.com/jjjndk1314/article/details/79683196

web前端专栏收录该内容

14 篇文章

订阅专栏

css的四种引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    第二种：嵌入式
    <style>
        p{
            color: rebeccapurple;
            font-size: 40px;
        }

        a{
            text-decoration: dashed;
        }
    </style>

    第三种：链接式-----------《推荐》
    <link href="test1.css" rel="stylesheet">

    第四种：导入式
    <style>
        @import "test1.css";
    </style>


</head>
<body>

第一种：行内式
<div style="color: red;background-color: beige">hello yuan </div>


<div>hello div</div>

<p>hello p</p>

<a href="">点我</a>

</body>
</html>

CSS的四种选择器：

1.基本选择器

  *： 通选
  Tag：标签选择
  #id值：id选择器
  .class值：class选择器

2.组合选择器

  A，B  并列选择
  A B   后代选择器
  A>B   自带选择器
  A+B   毗邻选择器（紧挨着的下一个是B才会选择）

3.属性选择器

[abc='my_attr1']     abc属性为my_attr1
[abc~='my_attr2']    abc有一个属性为my_attr1即可
[abc^='my_attr3']    abc属性开头第一个必须为my_attr1

4.伪类选择器

hover   悬浮
before  访问前
after   访问后
link    链接
visited  浏览后
active   激活

属性选择器例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
           /*color: red;*/
        /*}*/


        #littleP{
            background-color: blue;
        }

        .cuihua{
            color: aquamarine;
        }

        /*注意：不能写成div .cuihua*/
        div.cuihua{
            color: brown;

        }

        #littleP,div.cuihua{
            color: chartreuse;
        }



        .div1>.div2{
           color: red;
        }

        .div1 div>p{
            color: blue;
        }


         .div1 + div{
             background-color: chartreuse;
         }


        p div{
            color: red;
        }

        [alex]{
            color: red;
        }
        p[alex="dasb"]{
            font-family: "Times New Roman";
            font-size: 30px;
        }

        [alex*="b"]{
            color: teal;
        }
    </style>
</head>
<body>
hello body

<div>hello div</div>

<p id="littleP">pppp</p>
<p id="littlePP">ppp</p>
<p class="cuihua">pp</p>
<p class="cuihua">p</p>
<div class="cuihua">div</div>

<a href="">aaa</a>


<div>hello div before</div>
<div class="div1">

    <div>
        <a href="">a</a>
        <p>ppp</p>
        <div>div3</div>
    </div>

    <p>p ele</p>
    <div class="div2">div2</div>
</div>
<p>after div1 p</p>
<div>after div1</div>


<p>
    <div>p中的div</div>
</p>

<!--属性选择器-->

<div>hello1</div>
<div alex="sb LI">alex</div>
<div alex="dasb">hello1</div>
<p alex="dasb">hello2</p>

<div class="div1 div2">hello1</div>

</body>
</html>

伪类例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    a:link{
        color: red;
    }

    a:visited {
        color: blue;
    }
    a:hover {
        color: green;
    }
    a:active {
        color: yellow;
    }

    .box{
        width: 100px;
    }

        .top,.bottom{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
        }

        /*.top:hover{*/
            /*background-color: red;*/
        /*}*/


        /*.box:hover .bottom{*/
            /*background-color: red;*/
        /*}*/

       .add:after{
           content: "欢迎加入前端学习";
           color: red;
       }
    </style>
</head>
<body>


    <a href="css_引入方式.html">hello-world</a>

   <div class="box">
         <div class="top"></div>
         <div class="bottom"></div>
   </div>


    <div class="add">hello yuan</div>
</body>
</html>

CSS选择器优先级：

1.行内           权重1000
2.id选择         权重100
3.class选择      权重10
4.标签选择       权重1
5.继承           权重0.1

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        #id1{
            color: red;
        }
        .div1{
            color: rebeccapurple;
        }

        div{
            color: yellow;
        }

        .div3{
            color: red;
        }
        .div1 .div3{
            color: chartreuse;
        }

        #div1 .div3{
            color: rebeccapurple!important;
        }

        #div1 .div3  {
            color: chartreuse!important;
        }

        #div1{
            color: red;
        }
    </style>
</head>
<body>


<div id="div1">
    hello1
    <div class="div2">
        hello2
        <div class="div3">
              嵌套优先级
        </div>
    </div>
</div>

      <!--<div class="div1" id="id1" style="color: green">优先级</div>-->
</body>
</html>

CSS属性操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            color: rgba(23,25,233,0.8);   设定颜色
            font-size: smaller;       字体大小
            font-weight: 100;         字体厚度
            font-style: oblique;      字体样式
            background-color: chartreuse;   背景颜色
        }

        .back{
            border: 1px solid red;    边框属性
            width: 800px;           宽
            height: 800px;           高
            background-image: url("meinv2.jpg");  背景图片
            background-repeat: no-repeat;        背景图片不重复铺设
            background-position: 0 200px;         背景图片相对于自己原位置定位
            <style>
        .div1{         
            width: 200px;      
            height: 200px;
            /*border:5px dashed blueviolet;*/
            border-color: blueviolet;
            border-style: solid;  边框样式
            border-width: 5px;    边框宽度

            border-left-color: blue;
        }
    </style>
        }
    </style>
</head>
<body>


<p>独在异乡为异客</p>
<div class="back">

</div>
div class="div1"></div>
</body>
</html>