CSS知识总结

最新推荐文章于 2024-08-16 22:57:43 发布

weixin_47516651

最新推荐文章于 2024-08-16 22:57:43 发布

阅读量114

点赞数

分类专栏： web 文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_47516651/article/details/128645259

版权

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS知识总结

CSS的作用

CSS（层叠样式表）用于设置和布置网页——例如，更改内容的字体、颜色、大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。
简单来说就是使网页更加美观。

如何将HTML和CSS进行关联

内部关联 via <style>
外部关联 via<link rel="stylesheet" href="styles.css">
内联关联 via 元素的 style 属性

元素+id选择器

通过一个元素的id选择某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>元素选择器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
     <div id="hello"></div>
     <div id="world"></div>
</body>
</html>

/* 选择所有的 body 元素，但 body 元素只有一个 */
body {
    background-color: blue;
}

div {
    width: 400px;
    height: 200px;
}

/* 所有 id 是 hello 的元素，听我号令 */
#hello {
    background-color: yellow;
}

/* 所有 id 是 world 的元素，听我号令 */
#world {
    background-color: green;
}

类选择器

通过指定的类别，选择某批元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="large red square"></div>
    <div class="small red circle"></div>
    <div class="medium yellow square"></div>
    <div class="large blue circle"></div>
    <div class="large blue square"></div>
</body>
</html>

.large {
    width: 300px;
    height: 300px;
}

.medium {
    width: 200px;
    height: 200px;
}

.small {
    width:100px;
    height:200px;
}

.red {
  background-color: red;
}
.blue {
    background-color: blue;
}

.yellow {
    background-color: yellow;
}

.square {

}

.circle {
    border-radius:30%;
}

通配符选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style>
        /* 所有的元素都遵守该号令，一般设置一些页面的基础样式，例如字体大小、颜色、模型布局 */
        * {
             font-size: 60px;   /* 字体大小 */
             color:     blue;   /* 字体颜色 */
             font-weight: normal;   /* 取消字体加粗和斜体 */
        }
    </style>
</head>
<body>
   <h1>你好</h1>
   <p>世界</p>
</body>
</html>

组合选择器

把元素选择和类选择器进行了组合。

1.所有class中有hello的div元素，听我号令。

div.hello{}

2.所有class中既有hello,又有world的div元素，听我号令。

div.hello.world{}

3.所有id是hello的div元素，听我号令。

div#hello{}

一次选择多种元素

所有的p标签和所有id是hello的标签和所有的class中有world的标签，听我号令。

p,#hello,.world{} //

子孙选择器

1.所有body 元素的子孙（包含孩子以及孩子的孩子…）中的所有p元素

body p {}

2.先找到id 为 hello 的元素，然后在其所有子孙中，满足class 中有world 的div 元素，听我号令.

#hello div.world{}

直系孩子选择器

body 元素的孩子（只有孩子）中的所有 p元素

body > p {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子孙后代选择器</title>
    <style>
<!--        ol > ul {-->
<!--            list-style: none;   /* 更改列表的默认样式 */-->
<!--        }-->

     ol > li {
          color: pink;
     }
    </style>
</head>
<body>
   <ol>
       <li>你好</li>
       <li>中国</li>
       <li>世界</li>
       <li>
           <ul>
               <li>亚洲</li>
               <li>非洲</li>
           </ul>
       </li>
   </ol>
   <ul>
       <li>再见</li>
       <li>地球</li>
       <li>太阳系</li>
   </ul>
</body>
</html>

伪类选择器

关于 a 标签

a标签的几种状态

初识状态 :link
鼠标悬停在a标签上 :hover
鼠标按下不松开 :active
鼠标访问过 :visited

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于 a 标签</title>
    <style>
        a:link {
            font-size: 10px; 
        }

        a:visited {
            color: yellow;
        }

        a:hover {
            font-size: 20px;
        }

        a:active {
            font-size: 20px;
        }
    </style>
</head>
<body>
<a target="_blank" href="https://www.baidu.com/">A</a>
<br>
<a href="#">B</a>
<br>
<a href="#">C</a>
<br>
<a href="#">D</a>
</body>
</html>

关于焦点

某个元素获得焦点时（1.鼠标点击该元素;2.通过tab 切换焦点），该选择器生效。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于焦点</title>
    <style>
        input {
            height: 100px;
        }
        input:focus{
            height: 300px;
        }
    </style>
</head>
<body>
     <div>
         <input type="text">
     </div>
     <div>
         <input type="text">
     </div>
     <div>
         <input type="text">
     </div>
     <div>
         <input type="text">
     </div>
</body>
</html>

常用元素属性

关于字体

body {
    font-family: '微软雅黑';
    font-family: 'Microsoft YaHei'; }

大小

p {
    font-size: 20px; }

粗细

p {
 font-weight: bold;
    font-weight: 700; }

文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

文本属性

文本颜色

color: rgb(红、蓝、绿）
color: rgb(255, 0, 0); 纯红色  #FF0000
color: rgb(0, 255, 0); 纯绿色  #00FF00     
color: rgb(0, 0, 255); 纯蓝色  #0000FF      省略#00F
color: rgb(0, 0, 0); 纯黑色    #000000      省略#000
color: rgb(255, 255, 255); 纯白色 #FFFFFF   省略#FFF

文本对齐

<style>
    .text-align .one {
        text-align: left;
   }
    .text-align .two {
        text-align: right;
   }
    .text-align .three {
        text-align: center;
   }
</style>
<div class="text-align">
    <div class="one">左对齐</div>
    <div class="two">右对齐</div>
    <div class="three">居中对齐</div>
</div>

文本装饰

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]

<style>
    .text-decorate .one {
        text-decoration: none;
   }
    .text-decorate .two {
        text-decoration: underline;
   }
    .text-decorate .three {
        text-decoration: overline;
   }
    .text-decorate .four {
        text-decoration: line-through;
   }
</style>
<div class="text-decorate">
    <div class="one">啥都没有</div>
    <div class="two">下划线</div>
    <div class="three">上划线</div>
    <div class="four">删除线</div>
</div>

文本缩进

控制段落的首行缩进 (其他行不影响)

<style>
    .text-indent .one {
        text-indent: 2em;
   }
    .text-indent .two {
        text-indent: -2em;
   }
</style>
<div class="text-indent">
    <div class="one">正常缩进</div>
    <div class="two">反向缩进</div>
</div>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于字体</title>
    <style>
        body {
            font: 53px '幼圆';
        }

        h1 {
            text-align: center;
            text-decoration: underline dashed #C52749 .1em;
        }

        a {
            text-decoration: none;
        }

        p {
            text-indent: 2em;
            /* -webkit- 开头的，代表兼容性不是最好的，很多浏览器不支持 */
            -webkit-text-stroke: 1px red;
        }
    </style>
</head>
<body>
    <h1>CSS 学习</h1>
    <p>我爱我的祖国，她是那么的壮丽辽阔

        东海霞光四射，屋脊星光闪烁


        江南盎然春色，塞北银装素裹

        我爱我的祖国，繁荣昌盛


        锦绣大地，江南如此多娇

        万丈高楼平地起，五星红旗神采飞扬


        锦绣中华风流还看今朝，蛟龙入海神舟飞上天

        我爱我的祖国，我爱我的祖国


        她是那么的欣欣向荣，四大发明创造五千年的奇迹

        富饶的土地孕育五十六个民族，中国制造传遍世界各地


        中华儿女那么勤劳勇敢，江南如此多娇

        中华民族五千年文化智璀璨，锦绣中华风流还看今朝</p>
    <p>Hello, I'm a chinese.</p>
    <a href="https://www.baidu.com">百度</a>
</body>
</html>

行高练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行高</title>
    <style>
        div {
            width: 100%;
            height: 500px;
            font-size: 100px;
            background-color: #31a5e7;
            text-align: center;
            line-height: 500px;
        }
    </style>
</head>
<body>
    <div>你好中国</div>
</body>
</html>

关于背景图片

<style>
        body {
            background-image: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");
            background-repeat: no-repeat;
            background-size: cover;
        }
</style>

关于box

生成圆形

让 border-radius 的值为正方形宽度的一半即可

div {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    border-radius: 100px;
    /* 或者用 50% 表示宽度的一半 */
    border-radius: 50%; }

生成圆角矩形

让 border-radius 的值为矩形高度的一半即可

div {
    width: 200px;
    height: 100px;
    border: 2px solid green;
    border-radius: 50px; }

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关于 box</title>
    <style>
        div {
            width: 400px;
            height: 200px;
            background-color: #3927e5;
        }

        div {
            border-radius: 14px 120px 30px;
        }

        div {
            border-top: 30px double #000;
            border-bottom: 30px solid #000;
            border-left: 30px dotted #000;
            border-right: 30px dashed #000;
        }

        div {
            box-shadow: 3px 3px 5px 5px rgba(0, 0, 0, .7);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

元素的显示模式

块级元素

h1 - h6
p
div
ul
ol
li

行内元素/内联元素

a
strong
b
em
i
del
s
ins
u
span

盒模型

边框 border
内容 content
内边距 padding 设置内容和边框之间的距离.
外边距 margin 控制盒子和盒子之间的距离.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>初识盒模型</title>
    <style>

        div {
            width: 0;
            height: 0;
            background-color: blue;

            margin: 30px;
            border: 40px solid black;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="d1">Hello World Yes No</div>
    <div id="d2"></div>
</body>
</html>

弹性布局

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.
flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式

justify-content: 设置主轴上的子元素排列方式.
align-items:设置侧轴上的元素排列方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <style>
        div {
            width: 100%;
            height: 500px;
            background-color: blue;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        span {
            background-color: yellow;
            width: 120px;
            margin: 30px;
            height: 40px;
        }
    </style>
</head>
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
</html>