CSS基础知识

YYHHStarry

于 2021-12-03 15:06:36 发布

阅读量180

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/YYHHStarry/article/details/121698768

版权

CSS是什么？

1.CSS 指层叠样式表 (Cascading Style Sheets)

2.样式定义如何显示 HTML 元素

3.样式通常存储在样式表中

4.把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

5.外部样式表可以极大提高工作效率

6.外部样式表通常存储在 CSS 文件中

7.多个样式定义可层叠为一个

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>

    <style>
        p {
            /* font-family: Cambria, "Microsoft Yahei", Cochin, Georgia, Times, 'Times New Roman', serif; */
            /* font-size:32px; */
            /* font-weight: bold; */
            /* 100-900 */
            /* font-weight:500; */
            /* italic 斜体   normal 正常 */
            /* font-style: normal; */
            /* 1.font style
                2.fonot weight
                3.font size 
                4.font family
             */
            font:italic bolder 18px  "Microsoft Yahei";
            /* 字体颜色 */
            /* 1.英文单词
                2.十六进制
                3.rgb()
            */
            color: #cccccc;
            /* color: rgb(130, 184, 247); */
         /* 继承 */
         /* 1.文本的属性   text-
            2.字体的属性    font-
            3.list-style    列表样式
          */
            text-align: center;

            text-indent: 1em;
        }
        /* 块级元素，子元素的宽度  默认为父元素的宽度 */
        .one {
            /* height: 300px;
            width: 200px; */
            /* 文本缩进 */
            /* text-indent: 2em; */
        }

        a {
            text-decoration:line-through;
            color: steelblue;
        }

        header{
            text-align: center;
            line-height: 30px;
        }

        div {
            /* height: 100px;
            width: 150px; */
        }

        .one {
            height: 100px;
            width: 150px;
            float: left;
            background-color: rgb(4, 172, 12);
        }

        .two {
            height: 100px;
            width: 150px;
            float: left;
            background-color: red;
        }

        .three{
            height: 100px;
            width: 150px;
            float: left;
            background-color: yellow;
        }
        .four {
            /* width: auto; */
            height: 100px;
            background-color: #cccccc;
        }

        .parent {
            /* overflow: hidden; */
            /* content: "";
            display: block;
            height: 0;
            clear: both; */
            background-color: rgb(121, 235, 255);
        }

        .clearFix::after{
            content: "";
            display: block;
            height: 0;
            clear: both;
        }

        .new {
            /* height: 0;
            clear: both; */
        }
    </style>
</head>

<body>

    <!-- 字体样式 -->
    <!-- 
        font-family   字体样式  微软雅黑  Microsoft Yahei、宋体,
        可以连续添加几个，会根据顺序读取，若当前浏览器没有安装该字体，会读取下一个  
        font-size 字体大小  一般默认大小为16
        font-weight  字体粗细  normal正常 bold粗  bolder特粗 lighter细体，100-900 数字  不加单位
        font-style  normal  italic 斜体
        font: 
     -->
    <!-- <p>这是一个p标签
        <span>123</span>
    </p>
    <div class="one">
        这是父元素的div
    </div>
    <div class="two">这是子元素的div</div>

    <a href="#">这是我们的a标签</a>
    <header>这是头部</header> -->

    <!-- 文本颜色 -->
    <!-- 文本对齐 -->
    <!-- 拓展  元素转换
    display:block; 设置为块级元素
    inline -  设置为行内元素
    inline-block   设置为行内块元素
    -->
    <!-- 文本下划线 -->
    <!-- 下划线  删除线 上划线 -->
    <!-- overline  line-through -->
    <!-- 文本缩进 -->
    <!--  px   em   , em相当于当前元素1个字符的像素大小 -->

    <!-- 行间距 -->
    <!-- line-height -->

    <!-- 浮动 -->
    <!-- 1.脱离标准文档流，
        下面文档流的内容会顶上 占有它原本的位置
        2.不会覆盖文字。会覆盖其他内容
        3.一浮全浮
    
    -->
    <div class="parent clearFix">
        <div class="one">one</div>
        <div class="two">two</div>
        <div class="three">three</div>
        <!-- <div class="new"></div> -->
    </div>
    
    <div class="four">four</div>

    <!-- 清除浮动 -->
    <!-- 额外标签法 -->
    <!-- 给父元素overflow：hidden -->
    <!-- 父级添加after伪元素 -->
    <!-- 父级添加双伪元素    用的最多 -->

</body>

</html>

id 选择器：


#para1
{
    text-align:center;
    color:red;
}

class 选择器：


.center {text-align:center;}

外部样式表：


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

内部样式表：


<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式：


<p style="color:sienna;margin-left:20px">这是一个段落。</p>

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

多彩诗句：

<!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>
    <style>
        * {
            list-style: none;
        }
        
        .conten {
            align-items: center;
            text-align: center;
            font-weight: bold;
        }
        
        h1>a {
            color: blue;
            font-size: 15px;
        }
        
        .a1 {
            color: blue;
            font-size: 20px;
        }
        
        .a1 a {
            color: green;
            font-size: 15px;
        }
        
        .a2 {
            color: red;
            font-size: 20px;
        }
        
        .a2 a {
            color: pink;
            font-size: 10px;
        }
        
        .a3 {
            color: blue;
            font-size: 20px;
        }
        
        .a3 a {
            font-size: 10px;
        }
        
        .a4 {
            color: green;
            font-size: 20px;
        }
        
        .a4 a {
            color: red;
            font-size: 15px;
        }
        
        .a5 {
            color: blue;
            font-size: 20px;
        }
        
        .a6 {
            color: green;
            font-size: 20px;
        }
        
        .a7 {
            color: blue;
            font-size: 20px;
        }
        
        .a8 {
            color: red;
            font-size: 20px;
        }
        
        .a8 a {
            color: red;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <div class="conten">
        <h1>沁园春·长沙<a>【毛泽东】</a></h1>
        <p class="a1">独立寒秋， <a>湘江北去</a>，橘子洲头。</p>
        <p class="a2">看万山红遍，层林尽染， <a>漫江碧透</a>，百舸争流。</p>
        <p class="a3">鹰击长空，<a>鱼翔浅底</a>，万类霜天竞自由。</p>
        <p class="a4"><a>怅寥廓</a>，问苍茫大地，谁主沉浮？</p>
        <p class="a5">携来百侣曾游，忆往昔峥嵘岁月稠。</p>
        <p class="a6">恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
        <p class="a7">指点江山，激扬文字，粪土当年万户侯。</p>
        <p class="a8">曾记否，到中流击水，浪遏<a>飞&nbsp;&nbsp;&nbsp;舟&nbsp;&nbsp;？</a></p>
    </div>

</body>

</html>

摆弄形状：

<!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>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div id="fifth-row" class="row">
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="square"></div>
            <div class="circle green"></div>
        </div>
    </div>
</body>

</html>

body {
    font-family: "Karla";
    background: #edeae5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0px;
    text-align: center;
}

a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.5);
    font-style: italic;
    transition: 0.4s;
}

a:hover {
    color: rgba(0, 0, 0, 0.7);
}

div {
    transition: linear 0.2s;
}

#container {
    width: 480px;
    height: 480px;
    position: absolute;
    top: calc(50% - 240px);
    left: calc(50% - 240px);
}

.circle {
    width: 60px;
    height: 60px;
    background: white;
    display: inline-block;
    margin-right: 30px;
    border-radius: 50%;
}

.square {
    width: 60px;
    height: 60px;
    background: #e67e22;
    display: inline-block;
    margin-right: 30px;
}

.row {
    margin-bottom: 30px;
}

.green {
    background: #78c272;
}

.fancy {
    border: 3px inset rgba(74, 74, 74, 0.25);
    width: 54px;
    height: 54px;
}

#third-row .circle {
    background: #de6868;
}

.circle.fancy {
    border-style: dotted;
}

:first-child.circle {
    opacity: 0;
}

.green,
.fancy {
    background: #6392c0;
}

:hover.circle {
    opacity: 0.5
}

#second-row :hover.circle {
    transform: scale(1.25)
}