CSS从入门到精通+学习笔记（1）_css基础到精通-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_76484106/article/details/135284874

前言

CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述HTML文档外观和样式的标记语言。它的主要作用是为网页提供样式和布局。

一、CSS的语法格式

通常我们CSS是写在一对<style></style>里面的，我们把这个样式放在</head>上面

写法：选择器/标签{属性1:属性1的值; 属性2:属性2的值; ......}

二、文字化三属性

文字化三属性主要是颜色、字号、字体，在网页中最小的字号是12px，注：px为像素单位。

1、颜色 color

2、字号 font-size

3、字体 font-family

</head>
    <style>
    ul{
        color:pink;
        font-size: 60px;
        font-family:"楷体"
    }
    ol{
        color:aqua;
        font-size: 30px;
        font-family: "宋体";
    }
    div{
        color: burlywood;
        font-size: 20px;
        font-family: "楷体";
    }
    p{
        color: red;
        font-size: 50px;
        font-family: "楷体";
    }
    </style>
<body>
    <!-- 
        文字控制三属性
        1、颜色 color:red;
        2、字号 font-size:12px; 在网页中最小的字号是12px
        3、字体 font-family:"宋体"-----记得要加上双引号。
     -->

     <p>CSS从入门到精通</p>
     <ul>
        <li>CSS</li>
     </ul>
     <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
     </ol>
     <div>
        <ol>
            <li>欢迎来到我的优快云</li>
            <li>欢迎来到我的优快云</li>
            <li>欢迎来到我的优快云</li>
            <li>欢迎来到我的优快云</li>
            <li>欢迎来到我的优快云</li>
        </ol>
     </div>
</body>

三、实体化三属性

实体化三属性包括宽度（width）、高度（height）、背景色（background）。

</head>
    <style>
        h3{
            width: 600px;
            height: auto;
            background: blue;
        }
        p{
            width: 200px;
            height: 50px;
            background: red;
        }
        ol{
            width: 150px;
            height: 150px;
            background: pink;
        }
        ul{
            width: 200px;
            height: 100px;
            background: yellow;
        }

    </style>
<body>
    <!-- 
        实体化三属性
        1、宽度 width:600px;
        2、高度 height:300px;
        3、背景色 background:pink;
     -->
     <h3>二进制浪漫诗人</h3>
     <p>我是段落标签</p>
     <ol>
        <li>祝大家元旦快乐</li>
        <li>祝大家元旦快乐</li>
        <li>祝大家元旦快乐</li>
        <li>祝大家元旦快乐</li>
        <li>祝大家元旦快乐</li>
     </ol>
     <ul>
        <li>编程使我快乐</li>
        <li>编程使我快乐</li>
        <li>编程使我快乐</li>
     </ul>
</body>

四、CSS中的显示模式

通常我们的显示模式比较典型的有两种：行内元素和块级元素。最常见的行内元素 span，最常见的块级元素是div。下面我们用div和span进行举例说明：

1.不写宽度和高度的显示模式

我们只给背景加颜色，块级元素会独占一行并且会通栏显示，行内元素会一行并存，会显示文字的大小或者说文字的多少

    <style>
        div{
            background: green;
        }
        span{
            background: saddlebrown;
        }
    </style>
</head>
<body>
    <div>块级元素</div>
    <div>块级元素</div>
    <span>行内元素</span>
    <span>行内元素</span>
</body>

2.写了宽度和高度的显示模式

块级元素会显示宽度和高度，宽高都有起作用；行内元素给了宽度和高度也不会起作用

3.解决显示模式（宽高都起作用）

显示模式之间的转换 display

1、display:block; 它能让行内元素宽度和高度起作用

2、display:inline; 把块级元素转换为行内元素，这个用的一般比较少

4.如何区分块级元素和行内元素

只要宽度和高度起作用了无疑是块级元素，行内元素宽高起作用则需要使用display进行转换，这里我们可以通过一些标签案例进行测试，就可以区分出一些标签是块级元素还是行内元素了。

    <style>
        div{
            width: 200px;
            height: 100px;
            background: pink;
        }
        p{
            width: 200px;
            height: 100px;
            background: pink;
        }
        span{
            width: 200px;
            height: 100px;
            background: pink;
        }
        em{
            width: 200px;
            height: 100px;
            background: pink;
        }
        strong{
            width: 200px;
            height: 100px;
            background: pink;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <p>我是段落标签</p>
    <span>我是span</span>
    <em>我是倾斜</em>
    <strong>我是加粗</strong>
</body>

这里很明显的可以看出是块级元素和行内元素了。

5.行内块元素

布局要求：一行并存并且写出宽度和高度

我们可以使用display: inline-block; 既能显示宽度和高度又能一行并存

    <style>
        div{
            width: 100px;
            height: 200px;
            background: yellowgreen;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 200px;
            background: yellowgreen;
            display: inline-block;
        }

    </style>
</head>
<body>
    <div>我是div</div>
    <div>我是div</div>
    <span>我是span</span>
    <span>我是span</span>
</body>

五、选择器

1.类选择器

使用规则用（.）后面取任意名的英文字母，最好是小写，例如：.box{ }，.dav{ }

调用规则 <li class="list"></li> 在样式中使用.list{ }即可调用

    <style>
        .list{
            color:skyblue;
            font-size: 16px;
            font-family: "楷体";
        }
    </style>
</head>
<body>
    <ol>
        <li class="list">我是有序列表</li>
        <li class="list">我是有序列表</li>
        <li class="list">我是有序列表</li>
        <li class="list">我是有序列表</li>
        <li class="list">我是有序列表</li>
    </ol>
</body>

2.多个类的应用

我们可以使用多个类来进行对样式的美化

    <style>
      .size1{
        font-size: 18px;
      }
      .size2{
        font-size: 20px;
      }
      .pink{
        color: hotpink;
      }
      .bold{
        /* 文字加粗 */
        font-weight: bold;
      }
    </style>
</head>
<body>
    <div class="size1 pink bold" >优快云</div>
    <div class="size2">二进制</div>
    <div class="size2 bold">浪漫</div>
    <div class="size1 pink bold">诗人</div>
    <div class="size2 pink bold ">祝大家开心</div>
</body>

3.ID选择器

ID选择器具有唯一性，定义规则（#）后面取任意名的英文字母，例：#box{ }

调用规则<div id="box"></div>

4.标签选择器

调用方法：<标签> {属性值;}

5.选择器的权重

标签选择器<类选择器<id选择器

六、边框样式

边框样式有宽度属性、高度属性、边框属性例：border: 1px dashed hotpink;

语法格式border:线的大小实线/虚线线的颜色

实线：solid 虚线：dashed 点线：dotted

上边框：border-top

右边框：border-right

下边框：border-bottom

左边框：border-left

    <style>
        .one{
            width: 300px;
            height: 400px;
            border: 1px dashed hotpink;
        }
        .two{
            width: 300px;
            height: 400px;
            border: 1px dotted rgb(94, 28, 61);
        }
        .three{
            width: 300px;
            height: 400px;
            border-top:2px solid yellow;
            border-right: 3px dashed pink;
            border-bottom: 2px dotted red;
            border-left: 2px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div class="one"></div><br />
    <div class="two"></div><br />
    <div class="three"></div><br />
</body>