CSS基础学习day01

支持中国的体育老妹子 發表於 2020-8-14 23:57:00

一、CSS简介
　　　　 css是一种网页渲染技术，把文档结构和表现形式分离，使得网页更加的清爽。
  　　      css的必要条件：渲染特定的html标签。
　　　　div、span等容器：
　　　　　　div可以称为层或者块状元素，和p标签、h等标签具有一样的特点：单独占一行。
　　　　　　span称行内元素，和a标签、font标签、img等标签具有一样的特点：可以在一行中显示。
　　　　但是呢：css学习完后，没有绝对的“行内元素”和“块状元素”，可以通过display属性来进行转换【inline（行内）与block（块状）】
二、css写在哪呢？
　　　　1:.css可以写在标签内部的style属性中，这种称为内联样式。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
　　　　2.css可以写在hear下的style标签中，这种称为内部样式表。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 span{
 font-size: 80px;
 color: red;
 font-weight: bold;
 }
 </style>
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
　　　　3.css可以写在单独的css文件中，需要<link>标签来引入css文件，这种称为外部样式表
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
二、选择器
　　1.标签选择器：使用HTML标签名来作为选择器，作用在相同的标签上。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 span{
 font-size: 80px;
 color: red;
 font-weight: bold;
 }
 </style>
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
　　　2.类选择器：以 . + 名称来命名
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 .sp{
 color: red;
 }
 </style>
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
　　　　3.ID选择器：以#+名称来命名
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 #sp{
 color: red;
 }
 </style>
</head>
<body>
 
 一个字
 
</body>
</html></pre>
</div>
　　　　4.通配符选择器，直接以*号命名，一般建议写在css开头，会渲染所有的标签。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 *{
 margin: 0;
 padding: 0;
 }
 #sp{
 color: red;
 }
 </style>
</head>
<body>
 
 一个字
 
</body>
</html>　　　</pre>
</div>
　　　　5.符合选择器或者群组选择器，将多个选择器写在一起，使用相同的css样式来渲染元素。
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200815175929107-1559282598.png" alt="" loading="lazy">
 
 
 　　　　6.父子选择器。缩小目标范围,只作用在 “子级”元素上，由父选择器>子选择器构成，注意：最终是渲染符合子选择器的元素。父选择器和子选择器可以由，标签、id、class 等选择器构成。
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200815180556947-2065611900.png" alt="" loading="lazy">
　　　　7.伪类选择器hover，当鼠标放到对象上面时会出现hover的效果。
　　　　　　　　:before >>> 在匹配的元素中，添加内容---添加在原有内容的前面。
　　　　　　　　:after >>> 在匹配的元素中，添加内容---添加在原有内容的后面
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 /*:hover
 * 鼠标悬停时的效果
 */
 a{
 background-color: #008000;
 width: 300px;
 height: 42px;
 }
 a:hover{
 color: red;
 background-color: #DCDCDC;
 }

 /*:before
 * 在匹配的元素中，添加内容---添加在原有内容的前面
 * */
 li:before{
 content: "这是第";
 }
 /**
 * :after
 * 在匹配的元素中，添加内容---添加在原有内容的后面
 * */
 li:after{
 content: "个";
 }
 #div3{
 border: 1px solid red;
 border-radius: 5px;
 /* box-shadow: ;*/
 text-align: center;
 width: 80px;
 }
 #ul1{
 margin: 0;
 padding: 0;
 list-style: none;
 /*不显示*/
 display: none;
 }
 #div3:hover #ul1{
 display: block;
 }
 </style>
</head>
<body>
 <a>演示hover</a>

 <ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
 <div>*************************************************************</div>
 <div id="div3">
 内容
 <ul id="ul1">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 </ul>
 </div>
</body>
</html></pre>
</div>
 
三、css常用属性
　　1.尺寸：
　　　　宽度  width：100px或者100%；
　　　　高度 height：100px或者100%；
　　2.边框
  　　　　 border-top: 2px solid red;
        　　  border-right: 5px dashed black;
         　　 border-bottom: 10px double violet;
         　　 border-left: 3px dotted green;
　　　　　设置上下左右边框的样式不同，solid: 定义实线边框，dashed: 定义一个虚线边框，double: 定义两个边框。两个边框的宽度和 border-width 的值相同，dotted: 定义一个点线边框
　　
    　　 /*字体*/
        　　  /*颜色*/
          　　color: orange;
          /*字体大小*/
         　　 font-size: 20px;
          /*字体加粗*/
         　　 font-weight: bold;
          /*字体样式*/
          　　font-family: "微软雅黑";
          /*倾斜字体*/
         　　 font-style: italic;
          /*文本居中*/
        　　  text-align: center;
          /*行高：使文本垂直居中*/
         　　 line-height: 700px;
          /*文字装饰线*/
         　　 text-decoration:overline;
          /*背景*/
        　　  /*背景颜色*/
        　　  background-color: yellow;
          /*背景图片*/
         　　 background-image:url(img/img1.jpg) ;
          /*背景图片是否重复*/
         　　background-repeat:repeat-y;
          /*表格边框合并*/
        　　  border-spacing: 0px;
         　　 border-collapse: collapse;
　　/*转换成块状元素*/
         　　 display: block;
          /*背景图片定位*/
         　　 background-position: center top;
         　　 background-position:-30px  200px；
          /*背景图片放缩*/
          　　background-size: 100% 100%;
　　/*去掉列表项目符号*/
          　　ist-style: none;
          /*设置列表的项目符号图片*/
  　　　　 list-style-image: url(img/resizeApi.png);
　　　设置行内块状元素：兼具行内元素和块状元素的特点
　　　　　　display: inline-block;
四、盒子模型
　　注意：行内元素设置宽高无效，由内容大小确定。如span标签等。
　　1.外边距 margin
　　　　margin：50px；上下左右各外边距都为50px；
　　　　单独设置：
　　　　　　margin-left: 15px;
         　　　  margin-right:30px ;
         　　　  margin-top: 50px;
                      margin-bottom: 20px;
　　2.内边距 padding
　　　　padding: 30px; 设置上下左右内边距都为30px；
　　　　单独设置：
　　　　　　 padding-bottom: 30px;
                      padding-left: 20px;
                      padding-right: 30px;
                      padding-top: 10px;
　　3.盒子模型实际高度=(margin-top)+(border-top)+(padding-top)+height +(margin-bottom)+(border-bottom)+(padding-bottom)；
　　   盒子模型实际宽度=(margin-left)+(border-left)+(padding-left)+width+(margin-right)+(border-right)+(padding-right)；
　　　　　注意如果设置了box-sizing: border-box;，盒子宽度和高度就包含了border和padding，不再使用上面的公式计算高度和宽度。
　　
　　盒子模型外边距合并情况1：
　　　　1.两个div嵌套
　　　　2.两个div都没有设置边框
　　　　这样会使margin值合并，以margin值大的为准
　　实例：
　　　　首先设置存在边框效果：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 /*通配符选择器：设置默认样式*/
 *{
 margin: 0;
 padding: 0;
 }
 /*id 选择器*/
 #div1{
 margin-top:50px;
 width: 400px;
 height: 400px;
 background-color: orange;
 border: 1px solid red;
 }
 #div2{
 margin-top:20px;
 width: 200px;
 height: 200px;
 background-color: pink;
 border: 1px solid blue;
 }
 </style>
</head>
<body>
 <div id="div1">
 <div id="div2">

 </div>
 </div>
</body>
</html></pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200814232303127-1121108697.png" alt="" loading="lazy">
　　取消边框就会出现margin值合并，margin以大的为准：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 /*通配符选择器：设置默认样式*/
 *{
 margin: 0;
 padding: 0;
 }
 /*id 选择器*/
 #div1{
 margin-top:50px;
 width: 400px;
 height: 400px;
 background-color: orange;
 /* border: 1px solid red; */
 }
 #div2{
 margin-top:20px;
 width: 200px;
 height: 200px;
 background-color: pink;
 /* border: 1px solid blue; */
 }
 </style>
</head>
<body>
 <div id="div1">
 <div id="div2">

 </div>
 </div>
</body>
</html></pre>
</div>
效果图：
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200814232709212-646184015.png" alt="" loading="lazy">
　　当里面的div的margin-top大于外面的div时，没有边框，margin会以大的值为准。
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200814233012382-1233171600.png" alt="" loading="lazy">
　　解决这种问题的方法：
　　　　　　　　　　　1.选择避免这种情况。
　　　　　　　　　　　2.在父级div上添加padding-top=“xx px”；
盒子模型外边距合并情况2：
　　　　　　1.当两个div 垂直排列时，如果div1有 margin-bottom ，div2有margin-top，这时也会发生边距合并，并且以较大的值为准。
　　实例：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
 /*通配符选择器：设置默认样式*/
 *{
 margin: 0;
 padding: 0;
 }
 /*id 选择器*/
 #div1{

 width: 300px;
 height: 300px;
 background-color: green;
 border: 1px solid red;
 margin-bottom: 50px;
 }
 #div2{
 /* margin-top:120px; */
 width: 200px;
 height: 200px;
 background-color: pink;
 border: 1px solid blue;
 margin-top: 30px;
 }
 </style>
</head>
<body>
 <div id="div1"></div>
 <div id="div2"></div>
</body>
</html></pre>
</div>
　　上面的div设置了margin-bottom为50px，下面的div设置了margin-top为30px，按理它们之间的间距应该为80px，但是发生了间距合并，以margin值大的为准，所以它们的间距为50px。
<img src="https://img2020.cnblogs.com/blog/2102779/202008/2102779-20200814234226375-1110537827.png" alt="" loading="lazy">
　　　　该问题无法解决，只能去避免，找准参照物就可以更好的实现效果。 
来源：https://www.cnblogs.com/mengwenbiao/p/13507120.html

頁: [1]

琼殿技术论坛's Archiver

CSS基础学习day01