CSS学习的第一部分

原创已于 2023-05-20 17:14:18 修改 · 90 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #学习 #前端

于 2023-05-20 17:12:31 首次发布

层叠样式css

CSS的引入方式一般有四种：

行内样式：在标签内通过style属性实现

内嵌样式:通过style标签实现的

外链样式: 通过link标签引入外面所写的xxx.css

导入样式:使用import关键字进行导入

行内样式：行内样式又叫做标签样式，主要把style属性写在标签内

代码格式如下

<body>
    <h2 style="color: blue; font-size:20px;">这是一个h2标签</h2>
</body>

内嵌格式：把style属性写在了<head>标签里面

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3{
            color: aqua;font-size: 20px;
        }
    </style>
</head>
<body>
    <h3>这是一个h3标签</h3>
</body>

外链样式：首先需要单独创建一个css文件（XXX.css）,其次通过link标签将css文件进行引入

css文件编写格式如下

代码格式如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="1.css">
</head>
<body>
    <h3>这是一个h3标签</h3>
</body>
</html>

h3{
    color: crimson;
    font-size: 60px;
}

导入格式：通过style标签，使用@import url("css路径")将css文件导入进html文件中

代码格式如下

 <style>
        @import url(1.css);
    </style>

！！！注：这四种引入方式是没有优先级的，四种引入方式都是遵循就近原则（指的是距离修饰标签的距离）！！！

选择器

基本选择器

1. 标签选择器（根据标签的名称设置对应的样式）

2. ID选择器（通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值）

3. 类选择器（通过获取标签里面的class属性去设置对应的样式，设置的时候.+class的属性值）

4. 通配符选择器（通过*设置对应的样式）

标签选择器：直接把<body>标签中的标签名拿入<head>标签中进行设置

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       h3{
        color: blue;
        font-size: 30px;
       }
    </style>
</head>
<body>
    <h3>这是一个h3标签</h3>
</body>

ID选择器：通过在标签中设置ID属性，再在<head>标签中使用#加上ID名加大括号进行编译

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #one{
        color: blue;
        font-size: 30px;
       }
    </style>
</head>
<body>
    <h3 id="one">这是一个h3标签</h3>
</body>

类选择器：类选择器与ID选择器类似，在标签后给予标签类的属性，在<head>中再用 . 加上类名进行编译

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .first{
        color: blue;
        font-size: 30px;
       }
    </style>
</head>
<body>
    <h3 class="first">这是一个h3标签</h3>
</body>

通配符选择器：通配符选择器能够对所有标签，列表进行编译，在<head>标签中只需符号 * 即可进行编译

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       *{
        color: blue;
        font-size: 30px;
       }
    </style>
</head>
<body>
    <h3 class="first">这是一个h3标签</h3>
    <ul type="square">
        <li>ululululul</li>
        <li>ululululul</li>
    </ul>
    <dl>
       <dt>tital</dt>
       <dd>dddddddddd</dd>
       <dd>dddddddddd</dd>
    </dl>
</body>

！！！注：这四种选择器是有优先级顺序的

ID选择器>类选择器>标签选择器>通配符选择器

包含选择器

1. 子代选择器（获取的某个标签的第一级子标签）

2. 后代选择器（获取的某个标签的所有子标签）

3. 分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）

子代选择器：在一个标签中有着父级，子级，孙级时可以将孙级标签单独选中，从而跳过子级标签，不对子级标签进行编译

（可以将大括号前的类名，id名，父级标签名任意转换但必须按照相应的格式进行编写）

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*也可以写成 #one > ul或者 .first > ul*/
        div > ul{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div id="one" class="first">
        <ul>
            <li>1111111</li>
            <li>2222222</li>
            <li>3333333</li>
            <li>444444444</li>
        </ul>
        <li>555555555</li>
        <li>6666666</li>
        <li>77777777</li>
    </div>
</body>

后代选择器：后代选择器则是选中某一个标签，该标签只要是后代的子级或者孙级中都会被选中

（注：只会变换你所选中的标签，未选中的不会有变化且开头的代码格式也有所不同）

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*也可以写成 #one  ul或者 .first  ul*/
        div  li{
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <div id="one" class="first">
        <ul>
            <li>1111111</li>
            <li>2222222</li>
            <li>3333333</li>
            <li>444444444</li>
        </ul>
        <li>555555555</li>
        <li>6666666</li>
        <li>77777777</li>
    </div>
</body>

分组选择器：分组选择器可以把你所想选中的标签进行选中，每个标签名，类名或者ID名之间只需打上逗号即可

代码格式如下

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #two,.second,div{
        border: 1px solid pink;
       }
    </style>
</head>
<body>
    <h1 id="two">这是一个h1标签</h1>
    <p class="second">这是一个p标签</p>
    <div id="one" class="first">
        <ul>
            <li>1111111</li>
            <li>2222222</li>
            <li>3333333</li>
            <li>444444444</li>
        </ul>
        <li>555555555</li>
        <li>6666666</li>
        <li>77777777</li>
    </div>
</body>

属性选择器

1.选中某个标签中存在的某个值

（这个优先级是最高的）

1.1

 <style>
        /*选中某个标签中存在的某个值*/
        .one[class]{
    color: red;
    }
    </style>
</head>
<body>
    <div class="one">第一个div标签</div>

1.2

<style>
        .one[class]
        {
            color: red;
        }
        div[tital]
        {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="one">第一个div标签</div>
    <div tital="一个tital属性">第二个div标签</div>

2.整个属性都选中

（这个优先级最低）

 input{
        color: darksalmon;
    }

3.确切的等于某一个值

        input[type="text"]
        {
            background: green;
        }

4.属性里面包含某个值

      input[type *= "e"]{
        background: blue;
    }

5.属性中的值以XXX开始

 input[type ^= "e"]{
    background-color: blueviolet;
    }

6.属性中的值以XXX结尾

 input[type $= "rl"]
    {
    background-color: rgb(14, 139, 18);
}

7.表示下一个标签

        .mag + p{
            color: darkgoldenrod;
        }

8.属性等于某一个值



        [title="一个tital属性"]
        {
            color: chartreuse;
        }

整个代码汇总

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /*选中某个标签中存在的某个值*/    
        .one[class]
        {
            color: red;
        }
        div[tital]
        {
            color: blue;
        }
    /*整个属性都选中*/
            input{
            color: darksalmon;
        }
    /*确切的等于某一个值*/    
        input[type="text"]
        {
            background: green;
        }
    /*属性中包含某一个值*/    
        input[type *= "e"]{
        background: blue;
        }
    /*属性中的值以XXX开始*/
        input[type ^= "e"]{
            background-color: blueviolet;
        }
    /*属性中的值以XXX结尾*/
        input[type $= "rl"]
        {
            background-color: rgb(14, 139, 18);
        }
    /*表示下一个标签*/
        .mag + p{
            color: darkgoldenrod;
        }
    /*属性等于某个值*/
        [title="一个tital属性"]
        {
            color: chartreuse;
        }
    </style>
</head>

伪类选择器

伪类：同一个标签，在不同的状态下，有不同的样式

伪类通过冒号表示

最早的时候主要是用来渲染a标签不同的状态下的不同的样式

超链接点击之前---link

超链接被访之后---visited

鼠标放在超链接上时（处于悬停状态）---hover

超链接被激活的时候（鼠标正处于点击状态但还未松手）---active

（注意超链接的每一个属性都必须按照一定顺序，若不按照顺序则功能会有所损失达不到预期的效果）

顺序如下：a:link a:visited a:hover a:active

代码格式如下

<style>
    /*超链接点击之前的颜色*/
    a:link{
        color: red;
    }
     /*超链接点击之后的颜色*/
     a:visited{
        color: rgb(191, 255, 0);
    }
     /*超链接鼠标悬停时的颜色*/
     a:hover{
        color: rgb(0, 255, 255);
    }
     /*超链接被激活时的颜色*/
     a:active{
        color: rgb(30, 0, 255);
    }
    /*a标签中每个属性的顺序是一定的，不可以改变，如果改变则颜色可能无法达到预期效果*/
    div:hover{
        color: darkorange;
        border: 1px;
        width: 10px;
        height:10px ;
    }
</style>

伪元素选择器

以下仅为几个例子

：befor----css2中

：after----css2中

：：before----css3中

：：after----css3中

注意使用before和after时一定要给写上content属性

代码格式如下

（以下代码仅仅是部分伪元素选择器，详情请见W3C----伪元素选择器）

<style>

    p{
        color: coral;
        font-size:20px;
    }
    P::first-letter{
        content:"" ;
        color: blue;
        font-size: 200px;
    }
    p::before{
        content: "123";
        color: hotpink;
    }
    p::after{
        content: "456";
        color: rgb(212, 187, 103);
    }
    ::selection {
        color: red;
        background: yellow;
}
</style>
</head>
<body>
    <p>pppppppp</p>
</body>

以下为实现效果

常见样式

控制字体

设置字的大小（字号）：font-size：20px；

设置字的颜色：color：（XXX）；

设置字的字体:font-family；"楷体"：

设置字的行高：line-height：；（有四种设置的表示方法 1.用数字加px 2.百分比表示 3.直接使用数字 4.数字加em）

设置字的粗细：font-weight：normal（正常默认取值） blod（粗体）

<style>
      p{
        font-size:20px;
        font-family:"宋体" ;
        line-height: 100% ;/*:10px;  :10;  :10em;*/
        font-weight: bold;
        color:red
        }

样式的特点

1.继承性----网页中子元素将继承父元素样式

2.层叠式----网页中如果子元素和父元素设置了同样的样式，则子元素的样式会覆盖掉父元素的样式

控制文本

text-intend:-2px(可以取负值，且同样有四种表示方式)----这是文本缩进

text-align:left center right----这是文本对齐的方式

text-transform:none（正常大小写）capitalize（将每一个字母的首字母转换为大写）upper

case（转换为大写）lowercase（转换为小写）-----设置文本内容的大小写

代码格式如下

    <style>
      p{
        font-size:20px;
        font-family:"宋体" ;
        line-height: 100% ;/*:10px;  :10;  :10em;*/
        font-weight: bold;
        color:red
        }
      #ooo{
        text-indent:-2px;
        text-align:center ;
        text-transform:uppercase;/*none正常大小写,uppercase全部字母转换为大写,capitalize全部字母转换为小写*/
      }  
    </style>
</head>
<body>
    <p id="ooo">abcdefg</p>
</body>