CSS初识

勿言128

已于 2023-06-21 12:33:16 修改

阅读量87

点赞数 1

文章标签： css 前端

于 2023-06-21 12:25:49 首次发布

本文链接：https://blog.csdn.net/qq_61825662/article/details/131324531

版权

1.2 id选择器: 按照id属性来找到对应的标签

1.CSS的定义

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

2.CSS的作用

1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

2. 控制页面布局, 比如: 设置浮动、定位等样式。

3.CSS的基本语法

选择器{

样式规则

}

样式规则:

    属性名1:属性值1;

    属性名2:属性值2;

    属性名3:属性值3;

    ......

选择器:是用来选择标签的,选出来以后给标签加样式.

代码示例:

    div{
        width:100px;
        height:100px;
        color:green;
        background:gold;
    }

注意: 样式规则需要写在大括号里面.

4.css的三种引入方式:

1. 行内式 2. 内嵌式(内部样式) 3.外链式

方式一: 内嵌式(内部样式)

在<head>标签内加入<style>标签,在<style>标签中编写css代码

<head>
  <style>
     div{
          color:green;
          background:yellow;
        }        
  </style>
</head>

* 优点：在同一个页面内部便于复用和维护。
* 缺点：在多个页面之间的可重用性不够高。

方式二: 行内式

直接在标签中添加style属性

<div style="color:green;background:yellow;">
        你好
</div>

* 优点：方便、直观。
* 缺点：缺乏可重用性

方式三: 外链式 --- 工作中最常用的

将css代码单独写在一个新建的.css文件中,在<head>标签中使用<link>标签直接引入到该文件页面中.

<link rel="stylesheet" type="text.css" href="css/main.css">

* 优点：使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。
* 缺点：css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱

5.css引入方式选择

1. 行内式几乎不用

2. 内嵌式在学习css样式的阶段使用

3. 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

6.CSS选择器(如何找到对应的标签)

1.基本选择器

1.1 元素选择器

标签名 {css属性:属性值;}

示例:

<style>
    div a{
        color: red;

    }
</style>

1.2 id选择器: 按照id属性来找到对应的标签

#id属性对应的值 { css属性:属性值; }

示例:

<style>
    #d1{
        color: green;
    }
</style>

1.3 类选择器:

.class属性对应的值{css属性:属性值}

示例:

<style>
     .c1{
        color: blue;
    }
</style>

2.组合选择器

2.1 后代选择器

.class对应的值标签名{css属性:属性值;}

<style>
    .c1 a{
         color:green;
         background:yellow;
    }    
</style>

2.2 儿子选择器

.class对应的值>标签名{css属性:属性值;}

<style>
    .c1>a{
         color:green;
         background:yellow;
    }    
</style>

2.3 毗邻选择器

.class对应的值+标签名{css属性:属性值;} 紧挨着的第一个标签

<style>
    .c1+p{
         color:green;
         background:yellow;
    }    
</style>

2.4 弟弟选择器

.class对应的值~标签名{css属性:属性值;}

<style>
    .c1~p{
         color:green;
         background:yellow;
    }    
</style>

body示例:

<body>

<p>小葵花妈妈课堂开课了!</p>
<p>孩子咳嗽老不好</p>

<div class="c1">
    <a href="">多半是装的</a>
    <div>
        <a href="">打一顿就好了</a>
        <div>
            <a href="">说得对</a>
        </div>
    </div>
</div>

<p>明白了</p>
<p>没得问题</p>

<div id="d2">
    <a href="">宣课结束</a>
</div>

</body>

3.属性选择器

格式书写:

标签名,标签名{css属性:属性值}

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    <!--    <style>-->
    <!--        div{-->
    <!--            color:yellow;-->
    <!--        }-->
    <!--        p{-->
    <!--            color:yellow;-->
    <!--        }-->
    <!--    </style>-->
    
        <style>
            div,p{
                color:green;
            }
        </style>
    </head>
    <body>
    
    <p>p1</p>
    <div>div1</div>
    
    </body>
    </html>

4.伪类选择器

可以改变标签 a 在点击前、点击时、点击后显示不同的三个状态.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
    <!-- a:link{css属性:属性值;} a标签未访问前显示样式  -->
            a:link{
                color:red; 
    <!-- a:active{css属性:属性值;} a标签点击时显示样式   --    }
            a:active{
                color:yellow;
            }
    <!-- a:visited{css属性:属性值;} a标签访问后显示样式   -->
            a:visited{
                color:pink;
            }
    <!-- a:hover{css属性:属性值;} 鼠标悬浮到a标签时显示样式   -->
            a:hover{
                color:purple;
            }
    
    <!-- div:hover{css属性:属性值;} 鼠标悬浮在a标签时显示样式   -->
            div{
                width:200px;
                height:200px;
                background:green;
            }
            div:hover{
                background:red;
            }
    <!-- input:focus{css属性:属性值;} input捕获光标时显示样式   -->
            input:focus{
                background:green;
            }
    
        </style>
    </head>
    <body>
    
        <a href="https://www.gaokao.com/gkpic/">校花网</a>
        <div>
    
        </div>
    
        <input type="text">
    </body>
    </html>

hover的用法(用的比较多)

当鼠标悬浮在链接上时,显示不同颜色

用法1：这个表示的是：当鼠标悬浮在a这个样式上的时候，a的背景颜色设置为黄色

    a:hover
        {
            background-color:yellow;
        }

用法2: 使用a 控制其他块的样式
　　使用a控制a的子元素 b：

 .a:hover .b {
            background-color:blue;
        }

使用a控制a的兄弟元素 c(同级元素)：

    .a:hover + .c {
            color:red;
        }

使用a控制a的就近元素d：

    .a:hover ~ .d {
            color:pink;
        }

7.css选择器种类:

1.标签选择器：div

2.类选择器：.container

3.id选择器：#child1

4.后代选择器：.container div，表示container类里面的所有div标签

5.子选择器：.container>div，表示container类里面下一代的所有div标签

6.相邻同胞选择器：.child1+.child2，表示所有紧接在.child1后面的一个.child2（二者必须是兄弟）

7.群组选择器：.child1,.child2，表示所有的.child1和.child2

8.伪类选择器：比如 :hover :link :active :first-child ::nth-child(n)

9.伪元素选择器：比如 ::after ::before ::first-letter

10.属性选择器：[attribute]选择带有attribute属性的标签，[attribute=value]选择attribute=value属性的标签

11.层次选择器：p~ul，表示p后面的所有ul，二者必须有相同的父标签