css基础

CSS

CSS就是Cascading Style Sheet的缩写，中文译作“层叠样式表”或者是“级联样式表”，是用于控制网页外观处理并允许将网页的表现与内容分离的一种标记性语言，CSS不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)，是Web网页开发技术的重要组成部分。

那么接下来，继续看下，使用CSS有什么好处吧。

css的基本语法：selector{property:value;} 选择器{属性：值}

CSS的引入

CSS样式有三种不同的使用方式，分别是行内样式，嵌入样式以及链接式。我们需要根据不同的场合不同的需求来使用不同的样式。

行内样式

就是写在元素的style属性中的样式，这种样式仅限于元素内部起作用。当个别元素需要应用特殊样式时就可以使用内联样式。但不推荐大量使用内联样式，因为那样不利于后期维护。

<div align="center">行内样式</div>
<div
     align="center"
     title="鼠标悬停时 我显示">行内样式</div>

image-20220505224409465

嵌入式

是把CSS样式写在HTML文档内部head标签中的style标签里。浏览器加载HTML的同时就已经加载了CSS样式了。当单个文档需要特殊，单独的样式时，可以使用内部样式表。

    <style>
          div{
              color: white;
              background-color: #369;
              text-align: center
          }
      </style>
</head>
<body>
<div>嵌入式</div>

image-20220505225049359

但是这样做导致所有的div标签被渲染。

image-20220505225157101

链接式

就是把CSS样式写在HTML文档的外部，一个后缀为 .css 的外部样式表中，然后使用时在head标签中，使用link标签的href属性引入文件即可。当CSS样式需要应用在很多页面时，外部样式表是最理想的选择。在使用外部样式表的情况下，我们可以通过改变一个文件来改变这所有页面的外观。

    <link rel="stylesheet" href="https://www.cnblogs.com/ivanlee717/p/a.css">
</head>
<body>
<div>链接式</div>

div{
    color: rgb(245, 99, 99);
    background-color: aqua;
    text-align: center;
}

image-20220506095346458

CSS的选择器

基本选择器

image-20220506095949250

组合选择器

后代子代选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*后代选择器*/
        .c1 .c2{
            color: coral;
            text-align: center;
        }
        /*子代选择器*/
        .c3 .c5{
            color: orangered;
        }
        /* 父子级之间用大于号“>”连接*/
        .c3 > .c5{
            color: lightpink;
        }
        .c3 .c4 .c5{
            color: #4cae4c;
        }
    </style>
</head>
<body>
<!--后代选择器-->
<div class="c1">
    <div class="c2">c1.c2.ivan1</div>
</div>
<div class="c2">c2.ivan2</div>
<!--子代选择器-->
<div class="c3">
    <div class="c4">
        <div class="c5">c3.c4.c5.ivan3</div>
    </div>
    <div class="c5">c3.c5.ivan4</div>
</div>
</body>
</html>

image-20220506104138545

与或选择器

与选择器：遇到有相同id或者类的不同标签，用与选择器

image-20220506104857738

或选择器：如果不同的标签，不同的类名的渲染内容有重复部分，使用或选择器

image-20220506105333387

image-20220506105447674

兄弟选择器

指的是在同一级的情况下，修改当前同一级的标签的样式

属性选择器
E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
                td[class~=”name”] { color:#f00; }
E[attr^=val]    匹配属性值以指定值开头的每个元素                    
                div[class^="test"]{background:#ffff00;}
E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

在没有特殊属性的情况下，通过属性直接去查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      [type]{
          border: #2aabd2 solid 2px;
      }
      [index]{
          color: red;
          font-style: oblique;
      }
      [href*='png']{
          color: darkgoldenrod;
      }
    </style>
</head>
<body>
<input type="text">
<div index="1">ivan1</div>
<div index="2">ivan2</div>
<div index="3">ivan3</div>
<ul>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/1.png">1.png</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/2.png">2.png</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/3.png">3.png</a></li>
    <li><a href="https://www.cnblogs.com/ivanlee717/p/4.png">4.png</a></li>
</ul>
</body>
</html>

image-20220506111637620

伪类选择器

样式继承

CSS的样式表继承指的是，特定的CSS属性向下传递到子孙元素。总的来说，一个HTML文档就是一个家族，然后html元素有两个子元素，相当于它的儿子，分别是head和body，然后body和head各自还会有自己的儿子，最终形成了一张以下的家族谱。

image-20220506220927777

在上图中，可以看到，body的子元素有三个，h1、p和ul，ul也有几个子元素，p也有1个子元素，那么li和a就都是body的后代元素。有时可能我们在body里面设置了一些属性，结果，body下面所有的后代元素都可能享受到，这就是样式继承。就像一句俗语一样，“龙生龙，凤生凤，老鼠的儿子会打洞”。样式继承，可以给我们的网页布局带来很多的便利，让我们的代码变得更加简洁，但是，如果不了解，或者使用不当，也有可能会给我们带来很多不必要的麻烦。

因此，如果了解了哪些样式是会继承到后代元素的，那么就可以避免这些问题的发生了。

文本相关属性
font-family font-size letter-spacing line-height
font-style font-variant text-align text-indent
font-weight font text-transform word-spacing
color direction
列表相关属性
list-style-image list-style-position list-style-type list-style
表格和其他相关属性
border-collapse border-spacing caption-side empty-cells
cursor

优先级

CSS的属性操作

文本属性

/*
属性值：
normal：设置字体样式为正体。默认值。 
italic：设置字体样式为斜体。这是选择字体库中的斜体字。
oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
*/

/*
属性值：
normal：设置字体为正常字体。相当于数字值400
bold：设置字体为粗体。相当于数字值700。
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
注意：
font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
*/

/*
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），磅[点]（ pt ）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版已经修复。*/

/*
font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
如果css中没有声明当前内容使用的字体族的时候，默认：
	中文：  宋体 [ win7以后默认是 微软雅黑 ]
	英文：  Arial
*/

// 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。

<style>
        .c1{
            color: red;
        }
        .c1{
            color: #369;
        }
        .c1{
            color: RGB(0,0,255);
        }
</style>

另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写来表达。

<style>
   #i1{
       font-family: 新宋体;
       font-size: 32px;
       font-weight: bolder;
       font-style: italic;
       color: #2e6da4;
      }
</style>
<div id="i1">/*
    属性值：
    normal：设置字体为正常字体。相当于数字值400
    bold：设置字体为粗体。相当于数字值700。
    bolder：设置字体为比父级元素字体更粗的字体。
    lighter：设置字体为比父级元素字体更细的字体。
    number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
    注意：
    font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
    */</div>

image-20220507100009178

/*
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。
*/

上图显示的就是默认的左对齐方式，但是一般为里美观，使用justify模式使得两边对齐text-align :justify

image-20220507100151235

// 字体行高即字体最底端与字体内部顶端之间的距离。值可以是normal、px、number、%。

image-20220507100247337

行高 = 字体大小 + 上半行距 + 下半行距

<style>
       #i1{
           text-align: justify;
           height: 100px;
           width: 100px;
           background: yellow;
          }
    </style>
</head>
<body>
<div id="i1">ivanlee</div>

image-20220507100659820

开辟了一块100*100的区域，但是由于默认行高远小于100px，所以它的有效部分仅仅是上面一小块，如果设置行也为100pxline-height:100px,本身字体大小不变，但是行距会增加，使得这个div区域变成了一行

image-20220507100836459

如果篇幅太长就会导致溢出

image-20220507101024390

vertical-align 属性设置元素的垂直对齐方式。

<img src="" alt=""><span>yuan</span>

插入一个<span>标签的用法

<span> 用于对文档中的行内元素进行组合。
<span> 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。
<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。是一个内联标签

<img src="https://www.cnblogs.com/ivanlee717/p/xxxxxxxx" alt=""><span>ivanleeg</span>

image-20220507101823497

通过vertical-align可以调节上下高度

  1. 通过数值调节

    span{
    vertical-align: -10px;  向下
}

    image-20220507102110221

  2. 还可以通过其他选项

// 使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，line-through四种。

默认的某个超链接标签是带有下划线的

image-20220507102609695

   <style>
        a{
            text-decoration: none;
        }
        span{
            text-decoration: line-through;
        }
        #i1{
            text-decoration: underline;
        }
        #i2{
            text-decoration:overline;
        }
    </style>
</head>
<body>
<a href="">clickme</a>
<!--<img src="https://img0.baidu.com/it/u=3227835040,3411152351&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400" alt="">-->
<span>span_ivanlee</span>
<span id="i1">under_ivan</span>
<span id="i2">over_ivan</span>
</body>

image-20220507103003188

背景属性

div{
    width: 800px;
    height: 600px;
    background-image: url("https://xxxxxx");
}

image-20220507104058977

image-20220507110925784

#i1{
           width: 500px;
           height: 500px;
           border: red 1px solid;
           background-image: url("https://xxxx");
           background-position: center;
           background-repeat: no-repeat;
       }
    </style>
</head>
<body>
<div id="i1">ivanlee</div>
  可以简写为：
#i1{
           width: 500px;
           height: 500px;
           border: red 1px solid;
           background: url("https://gxxxxxx") no-repeat center;
       }
    </style>
</head>
<body>
<div id="i1">ivanlee</div>
设置页面背景
body{
    background: url("https://xxxx") no-repeat fixed;
    background-size: cover;
}

image-20220507161433925

边框属性

列表属性

CSS中提供了一些列表属性可以用来：

(1)、设置不同的列表项标记为有序列表

(2)、设置不同的列表项标记为无序列表

(3)、设置列表项标记为图像

display属性

isplay可以指定元素的显示模式，它可以把行内元素修改成块状元素，也可以把别的模式的元素改成行内元素。diisplay常用的值有四个。

语法：

/*
display: block;		 	// 声明当前元素的显示模式为块状元素
display: inline;		// 声明当前元素的显示模式为行内元素
display: inline-block; 	 // 声明当前元素的显示模式为行内块状元素
display: none;			// 声明当前元素的显示模式为隐藏 
*/

示例1: span和div标签的转换：通过改变内联还是块标签

 div{
           display: inline;
           background: yellow;
       }
       span{
           display: block;
           background: greenyellow;
       }
        </style>
</head>
<body>
    <div>div</div>
    <span>span</span>
</body>

image-20220507232551872

示例2: display:none&& visibility: hidden

#i1{
    margin: 0px auto;  水平居中的表示法
    width: 400px;
    height: 400px;
    background-image: url("https://xxxxxx);
}
#i2{
    margin: 0px auto;
    width: 400px;
    height: 400px;
    background-image: url("https://xxxx");
}
#i3{
    margin: 0px auto;
    width: 400px;
    height: 400px;
    background-image: url("https://ixxxx0");
}

image-20220507233622476

对#i2添加display:none

image-20220507233714381

下面的图会填补到上面的位置，但如果是添加visibility: hidden

image-20220507233849931

就会把中间部分空出来

示例3:正常情况下两个div标签是上下排版

image-20220509202724304

通过添加display:inline-block

.c1{
    width: 500px;
    height: 500px;
    border: red 2px dashed;
    background: url("https://img2.baidu.com/it/u=1661792766,1280973336&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=700") no-repeat center;
    display: inline-block;
}
.c2{
    width: 500px;
    height: 500px;
    border: green 2px dashed;
    background: url("https://img0.baidu.com/it/u=1528237360,3200992857&fm=253&fmt=auto&app=138&f=PNG?w=500&h=336") no-repeat center;
    margin: 2px 0 0 0;
    display: inline-block;
}

image-20220509202926642

也可以达到并排的效果。

盒子模型

盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。HTML页面上的每个元素都可以看成一个个方盒子，这些盒子由元素的content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

image-20220508204302264

内边距，也叫“内补白”，表示页面中元素的边框与内容的距离。内边距的值不能是负值，相当于table标签的cellpadding属性。

内边距可以设置多个值：

/*
当padding只有一个值的时候表示同时控制上下左右的内边距。
当padding只有两个值的时候表示分别控制上下、左右的内边距。
当padding有三个值的时候表示分别控制上、左右、下的内边距。
当padding有四个只的时候表示分别控制上、右、下、左的内边距。
*/

image-20220508204807626

现在加入padding数据，padding: 30px;并同时放置一个块大小相同的区块做比较

image-20220508205412576

内边距也可以进行单独设置：

/*
padding-top 			设置上边的外边距
padding-bottom 		设置下边的外边距
padding-left			设置左边的外边距
padding-right			设置右边的外边距
*/
padding-bottom: 20px;
padding-left: 30px;
padding-top: 10px;

​ 可以看到上图边框和页面的边距是有空隙的，margin: -5px 0 0 -10px;看到第一个块已经贴边了

?? float渲染

position属性

就像photoshop中的图层功能会把一整张图片分层一个个图层一样，网页布局中的每一个元素也可以看成是一个个类似图层的层模型。层布局模型就是把网页中的每一个元素看成是一层一层的，然后通过定位属性position对元素进行定位摆放，最终实现网页的布局。

定位属性position有4个值，分别是静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。默认就是static。所以我们略过。

元素设置了定位以后，还要依靠4个方位属性来进行定位摆放。

方位属性：

/*
top：让元素相对于指定目标的顶部偏移指定的距离。
  例如： top：10px; 表示距离顶部10像素
right：让元素相对于指定目标的右边偏移指定的距离。
  例如： right：10px; 表示距离顶部10像素
bottom：让元素相对于指定目标的底部偏移指定的距离。
  例如： bottom：10px; 表示距离顶部10像素
left：让元素相对于指定目标的左边偏移指定的距离。
  例如： left：10px; 表示距离顶部10像素
*/
相对定位

相对定位就是在正常文档流中，元素相对于自身位置使用left、right、top、bottom属性进行定位偏移。

      .c1{
            width: 200px;
            height: 200px;
               }
        .c2{
            width: 200px;
            height: 200px;
            position: relative;
            left: 200px;
            top: 200px;
        }
        .c3{
            width: 200px;
            height: 200px;
            background-color: lightblue;
        }

image-20220509210658941

绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。

绝对定位

绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。

.c3{
    width: 500px;
    height: 500px;
    background: url("https://img1.baidu.com/it/u=2783072085,1211792775&fm=253&fmt=auto?w=500&h=500") no-repeat center;
    position: absolute;
    left: 500px;
    top: 500px;
}

image-20220510104740022

轮播界面：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ivanlee</title>
    <link rel="shortcut icon" href="https://www.cnblogs.com/ivanlee717/p/ab_favicon.ico">
    <style>
        body {
            background: url("https://t7.baidu.com/it/u=3952710175,1594792330&fm=193&f=GIF");
            background-size: cover;
        }
        *{
            margin: 0;
            padding: 0;
        }
        .lunbo {
            width: 500px;
            height: 500px;
            border: 2px dotted rebeccapurple;
            margin: 100px auto;
            position: relative;
            /*相对定位方便查找比例*/
        }
        li{
            /*取消标签前面的序号*/
            list-style: none;
        }
        .lunbo .img img{
            /*使得三张图都完全放在边框内*/
            position: absolute;
            top: 0;
            left: 0;
        }
        /*设置优先级，使得按钮优先级跟高，放在最上面*/
        .lunbo .btn li{
            z-index: 20;
        }
        .lunbo .img li{
            z-index: 10;
        }
        .lunbo .btn div{
            /*设置左右切换按钮的背景样式*/
            width: 50px;
            height: 50px;
            background: rgba(111,111,111,0.5);
            color: white;
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            margin-top: -25px;
            /*边框圆润度*/
            border-radius: 20%;
        }
        .lunbo .btn .left_btn{
            position: absolute;
            left: 0;
            top: 50%;
        }
        .lunbo .btn .right_btn{
            position: absolute;
            right: 0;
            top: 50%;
        }
        </style>
</head>
<body>
<div class="lunbo">
    <ul class="btn">
        <li class="left_btn"><div> < </div></li>
        <li class="right_btn"><div> > </div></li>
    </ul>
    <ul class="img">
        <li ><a href=""><img  src="https://xxxxxx?w=500&h=500" alt=""></a></li>
        <li ><a href=""><img  src="https://imxxxG?w=500&h=500" alt=""></a></li>
        <li ><a href=""><img src="https://www.cnblogs.com/ivanlee717/p/xxxxxxxxxxxxxxxxw=500&h=500" alt=""></a></li>
    </ul>
</div>
</body>
</html>

image-20220510230220526

固定定位

固定定位与绝对定位有点相似，但是固定定位是使用left、right、top、bottom属性相对于整个浏览器的窗口进行定位，而不再相对于某个HTML页面元素了，所以当元素使用了固定定位以后，就算页面的滚动条滚动了，固定定位的元素也不会变化位置。也就是说固定定位是相对于窗口的定位，不受文档流的影响了。

.return{
    width: 100px;
    height: 50px;
    background: rgba(255,0,123,0.5);
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    position: fixed;
    right: 20px;
    bottom: 20px;
}
<div class="return"> 返回顶部</div>

image-20220510231101284

image-20220510231234075

标签 ,

发表回复