CSS快速入门_css两步走-CSDN博客

本文链接：https://blog.csdn.net/z714405489/article/details/105001439

更详细的教程： CSS教程参考

一、概念

Cascading Style Sheets 层叠样式表
* 层叠：多个样式可以作用在同一个html的元素上，同时生效

二、好处

功能强大
将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率

三、CSS与html结合方式

1.内联样式

在具体某个标签内使用style属性指定css代码
如：

<div style="color:red;">hello css</div>

2. 内部样式

在html代码的head标签内，定义style标签，style标签的标签体内容就是css代码。
如：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }

    </style>
</head>

<body>

<div>hello css</div>
<div>hello css</div>

</body>

3. 外部样式

1. 定义css资源文件。
2. 在head标签内，定义link标签，引入外部的资源文件
如：
a.css文件：

div{
    color:green;
}

hello.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link rel="stylesheet" href="css/a.css">
</head>
<body>

<!--


<div>hello css</div>
<div>hello css</div>

</body>
</html>

注意：

1,2,3种方式 css作用范围越来越大
1方式不常用，后期常用2,3
第3种格式可以写为（在html的head标签内）：

<style>
    @import "css/a.css";
</style>

四、CSS语法

格式：

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

选择器:筛选具有相似特征的元素
注意：每一对属性需要使用；冒号隔开，最后一对属性可以不加；

五、选择器

**用于筛选具有相似特征的元素。**分为基础选择器和扩展选择器。

基础选择器

优先级：id > 类 > 元素，作用于同一个标签时，优先级高的将生效。

1.id选择器

选择具体的id属性值的元素.建议在一个html页面中id值唯一。
语法：

#id属性值{}

2.类选择器

选择具有相同的class属性值的元素。
语法：

.class属性值{}

3.元素选择器

选择具有相同标签名称的元素。
语法：

标签名称{}

例子

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>

    <style>

        .cls1{

            color: blue;
        }

        div{
            color:green;
        }


        #div1{
               color: red;
           }

    </style>
</head>

<body>

    <div id="div1">嘿嘿嘿</div>
    <div class="cls1">哈哈哈</div>
    <p class="cls1">嘻嘻嘻</p>

</body>

在这里插入图片描述

扩展选择器：

1.选择所有元素

*{}

2. 并集选择器：

同时选中多个元素。

选择器1,选择器2{}

3. 子选择器

筛选选择器1元素下的选择器2元素。

选择器1 选择器2{}

4. 父选择器

筛选选择器2的父元素选择器1。

选择器1 > 选择器2{}

5. 属性选择器

选择元素名称，属性名=属性值的元素。

元素名称[属性名="属性值"]{}

如：

        input[type='text']{
            border: 5px solid;
        }

6. 伪类选择器

选择一些元素具有的状态。

元素:状态{}

状态：
* link：初始化的状态
* visited：被访问过的状态
* active：正在访问状态
* hover：鼠标悬浮状态

如：

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }

六、属性

在这里插入图片描述
接下来看看CSS中的常用属性吧~

1. 字体、文本

font-size：字体大小
color：文本颜色
text-align：对其方式
line-height：行高

2. 背景

background

3. 边框

border：设置边框，复合属性（指的是一个属性可指定多个值）

4. 尺寸

width：宽度
height：高度

    <style>
        p{
            color: #FF0000;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            /*
                border 边框
             */
            border: 1px solid red;

        }
        div{
            border: 1px solid red;
            /*
                尺寸
             */
            height: 200px;
            width: 200px;
            /*
                背景
             */
            background: url("img/logo.jpg") no-repeat center;
        }
    </style>

5. 盒子模型：控制布局

margin：外边距
padding：内边距

如下图所示，以红色的盒子为第一视角，那么可以定义内外边距：
在这里插入图片描述

默认情况下内边距会影响整个盒子的大小。

box-sizing: border-box; 如此设置盒子的属性，让width和height就是最终盒子的大小而不会受边距的影响。
float：浮动
left 左浮动
right 右浮动

例：

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


    <style>
        div{
            border: 1px solid red;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*外边距*/
           /* margin: 50px; */
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            box-sizing: border-box;
        }

        .div3{
            float: left;
        }

        .div4{
            float: left;
        }

        .div5{
            float: right;
        }

    </style>
</head>
<body>


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

    </div>

    <div class="div3">aaaa</div>
    <div class="div4">bbbbb</div>
    <div class="div5">cccc</div>
</body>
</html>