HTML+CSS基础知识3

最新推荐文章于 2024-05-17 14:32:46 发布

aaa小葵

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量922

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_74033027/article/details/127674160

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML+CSS基础知识3

15.css选择器

id选择器

css：#elem{} ---- html：id="elem"

命名规范：字母 _ - 数字（命名的第一位不能是数字）

class选择器

css: .elem{}----html: class="elem"

注：claas选择器可以复用

可以添加多个class样式

多个样式的时候，样式的优先根据css中的顺序决定，而不是class属性中的顺序

标签+类的写法

标签选择器

css：div{}—html：<div>
群组选择器

css：div，p，span{}

通过逗号来给多个不同选择器添加相同的样式

通配选择器

css：*{}

针对所有标签，会给所有标签都添加样式

去掉所有默认样式时会使用

层次选择器

后代 M N{ }

父子 M>N{ }

兄弟 M~N{ } 当前M下面的所有N标签

相邻 M+N{ } 当前M下面相邻的N标签

#ul1 li{background-color: brown;}

在这里插入图片描述

 #ul1>li{background-color: brown;}

在这里插入图片描述

<ul id="ul1">
        <li>reading</li>
        
            <ul>
                <li>哈哈哈哈</li>
            </ul>
       
        <li>reading</li>
    </ul>
    <ol>
        <li>reading</li>
        <li>reading</li>
      
    </ol>

 div~h2{background-color: blueviolet;}

在这里插入图片描述

div+h2{background-color: blueviolet;}

在这里插入图片描述

<div>这是一个块</div>
    <p class="text">这是一个段落</p>
    <h2 id="title">这是一个标题</h2> -->
    <!-- <h2>reading</h2>
    <div>reading</div>
    <h2>reading</h2>
    <p>reading</p>
    <h2>reading</h2>
    <h2>reading</h2>
    <h2>reading</h2>
    <h2>reading</h2>

属性选择器

在这里插入图片描述
M[attr] { }

= :完全匹配

div[class]{ }
/*选中标签中所有带有class属性的标签*/

*= :部分全选匹配

div[class*=box]{ }
/*选中标签中所有带有class=box属性的标签*/
div[class=box]{ }
/*只能选中标签为class=box的内容
如果标签中有class=box-top，则不可被选中*/

^= :起始匹配

div[class^=box]{ }
/*选中标签中box在前的属性标签，如class=box-top*/

$=:结尾匹配

div[class$=box]{ }
/*选中标签中box在末尾的属性标签，如class=top-box*/

[] [] []:组合匹配

div[class][id]
/*选中带有class和id的属性标签*/
<div class="box" id="tili"> </div>

伪类选择器

格式：M：伪类{ }

css伪类用于向某些元素添加特殊效果，一般用于初始样式添加不上的时候，用伪类来添加；

：link 访问前的样式（只能添加给a标签）

：visited 访问后的样式（只能添加给a标签）

：hovor 鼠标移入时的样式（可以添加给所有标签）

：active 鼠标按下时的样式（可以添加给所有标签）

注：如果四个伪类都生效，一定要注意顺序：L V H A ;一般网站只这样去设置：a{} a:hover{}

<style>
        a:link{background-color: aquamarine;}
        a:visited{background-color: blue;}
        a:hover{background-color: blueviolet;}
        a:active{background-color: brown;}
</style>

：after、：before

通过伪类的方式可以给元素添加一段文字，使用content属性

<style>
     div:after{content: "world"; color: rgb(164, 112, 227);}
 </style>

在这里插入图片描述
：checked、：disabled

<style>
        :checked{width: 50px; height: 50px;}
    </style>
</head>
<body>
    <form action="#">
        <input type="checkbox">西瓜
        <input type="checkbox">苹果
    </form>
</body>
</html>

在这里插入图片描述
也可以直接将checked属性和disabled属性加在元素后面，会自动选择带有该属性的标签进行操作

<style>
:checked{width: 50px; height: 50px;}
</style>

<form action="#">
        <input type="checkbox">1
        <input type="checkbox">2
        <input type="checkbox" checked>3
        <input type="checkbox" disabled>4
    </form>

在这里插入图片描述
:focus

<style>
      :focus{background-color: rgb(244, 161, 161);}
    </style>

 <form action="#">
      <input type="text">
    </form>

在这里插入图片描述
注：focus、checked、disabled都是只针对表单标签

结构形伪类选择器

:nth-of-type()/:nth-child()

<style>
        li:nth-of-type(2n){background-color: rgb(116, 174, 231);}
 </style>

在这里插入图片描述
:first-of-type/:first-child—第一项被选中

:last-of-type/:last-child----最后一项被选中

:only-of-type/:only-child—唯一有的一项被选中

-of-type和-child的区别：

<style>
    li:nth-of-type(3){background-color: rgb(116, 174, 231);}
    li:nth-child(3){background-color: rgb(116, 174, 231);}
</style>
.....
<ul>
        <li></li>
        <li></li>
        <div></div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

li:nth-of-type(3)可以选中li标签中的第三个li标签，为第三个li标签

li:nth-child(3)识别的第三行li标签下的第三个子标签，即为div标签，则无变化
在这里插入图片描述

16.css的继承

文字相关的样式可以被继承 color、font-size……

布局相关的样式无法被继承border、width、height……

（默认结构样式不会继承，但是可以通过inherit可以设置继承样式）

 <style>
        div{width: 100px;height: 100px;color: rgb(31, 31, 217);
        border: red solid 3px;
        font-size: large;}
       p{border: inherit;}
    </style>

<body>
    <div>
        <p>6666666</p>
    </div>
</body>

在这里插入图片描述

17.css优先级

相同样式优先级：当设置相投样式时，后面的优先级较高，但不建议出现重复设置样式的情况

 <style>
        div{color: blue;}
        div{color: brown;}
 </style>

在这里插入图片描述

内部样式与外部样式：内部样式与外部样式优先级相同，如果都设置相同样式，那么后写的引入方式优先级高

<!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">
    <!-- <link rel="stylesheet" href="./优先级.css"> -->
    <title>Document</title>
    <style>
        div{color: brown;}
    </style>
     <link rel="stylesheet" href="./优先级.css">
</head>
<body>
    <div>
        555
    </div>
</body>
</html>

在这里插入图片描述

单一样式优先级：style行间>id>class>tag标签>*通配>继承

注：style行间权重–1000

id权重—100

class权重—10

tag权重----1

   <style>
        .class{color: aqua;}
        #div{color: rgb(203, 45, 108);}
        *{color: black;}
    </style>

在这里插入图片描述

！important

用来提升优先级，但是不能提前继承属性的优先级
```
div{color:red !important}
```

标签+类与单类

标签＋类>单类的优先级

 <style>
      div.box{color:red}
      .box{color:blue}
</style>
/*优先显示红色*/

群组优先级

 <style>
        div,p{color: blue;}
        div{color: red;}
    </style>
/*div标签显示红色，p标签显示蓝色*/
<style>
        div{color: red;}
        div,p{color: blue;}
    </style>
/*div标签显示蓝色，p标签显示蓝色*/

层次优先级

1.权重比较

ul li .box p input{ }-----1+1+10+1+1

.hello span #elem{}-----10+1+100

(但是就算有一百个ul加起来也比不过一个.box，这个是层级的比较，类似于ul官小，即使一百个小官员也比不过一个大官员)

2.约分比较

ul li .box p input{}----li p input{}

.hello span #elem{}—#elem{}

把级别相同的约掉

18.css盒子模型

组成：content（物品）/padding（填充物）/border（包装盒）/margin（盒子与盒子之间的距离）
content：内容区域 width和height组成
padding：内边距（内填充）

只写一个值：30px–上下左右

写两个值：20px 50px–上下/左右

写四个值：30px 20px 50px 60px—上右下左

单一样式只能写一个值

padding-left/right/top/bottom

margin：外边距（外填充）

只写一个值：30px–上下左右

写两个值：20px 50px–上下/左右

写四个值：30px 20px 50px 60px—上右下左

margin-left/right/top/bottom

注：

1.背景色填充到margin以内的区域，包括border，不包括margin

2.文字在content区域添加

3.padding不能为复数，而margin可以为复数

box-sizing：盒尺寸，可以改变盒子模型的展示形态

默认值：content-box：width、height–>content

使用border-box:width/height–>comtent padding border

（同样是200乘200的面积，使用box-sizing可以将这些面积分配给三个值，不使用则默认只给content区域）

使用场景：不用再去计算一些值/解决一些100%的问题

 input{width: 100%;padding: 50px; box-sizing: border-box;}

在这里插入图片描述

盒子模型的一些问题

1.margin叠加问题：

当给两个盒子同时添加上下外边距的时候就会出现叠加的问题，只有上下有，左右是没有这个叠加问题的

解决方案：1.BFC规范

2.只给一个元素添加间距

2.margin传递问题

出现在嵌套的结构中，只针对margin-top
在这里插入图片描述
解决方案：

1.BFC规范

2.给父容器加边框

3.margin换成padding

     #box1{width: 200px;height: 100px;background-color: brown;border: black 1px solid;}
     #box2{width: 100px;height: 100px;background-color: blue;margin-top: 100px;}
/*给父容器添加边框*/

 #box1{width: 200px;height: 100px;background-color: brown;padding-top: 100px;}
 #box2{width: 100px;height: 100px;background-color: blue;}
/*把margin换成padding*/

在这里插入图片描述

盒子模型之扩展

margin：auto可以左右自适应–可以设置居中，但是上下自适应不行！

div{width: 100px; height:100px
            ;background: rgb(219, 181, 30);
    margin-left: auto; margin-right: auto;}
或者
div{width: 100px; height:100px
            ;background: rgb(219, 181, 30);
        margin：0 auto;}

width、height不设置的时候，系统会自动去计算容器大小，节省代码

 <style>
        #div1{width: 80px;height: 80px;background: greenyellow;}
        #div2{width: 80px;height: 20px;background: red;
            border: blue solid 2px;}
    </style>

在这里插入图片描述

   <style>
        #div1{width: 80px;height: 80px;background: greenyellow;}
        #div2{height: 20px;background: red;
            border: blue solid 2px;}
    </style>

在这里插入图片描述
盒子模型嵌套练习：

<!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>
        #div1{width: 350px;height: 350px;border:dotted 1px black ;padding:27px}
        #div2{border:solid 5px rgb(70, 184, 249);padding: 20px;}
        #div3{background: rgb(242, 175, 201);padding: 41px;}
        #div4{border: 1px dashed white;padding: 3px;}
        #div5{border: 1px dotted white;padding: 49px;}
        #div6{background: yellowgreen;border: solid 5px yellow;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4">
                    <div id="div5">
                        <div id="div6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>
/*利用padding来嵌套*/

<!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>
        #div1{width: 350px;height: 350px;border:dotted 1px black ;padding:27px}
        #div2{border:solid 5px rgb(70, 184, 249);padding: 20px;}
        #div3{background: rgb(242, 175, 201);padding: 41px;}
        #div4{border: 1px dashed white;padding: 3px;}
        #div5{border: 1px dotted white;padding: 49px;}
        #div6{background: yellowgreen;border: solid 5px yellow;width: 100px;height: 100px;}
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            <div id="div3">
                <div id="div4">
                    <div id="div5">
                        <div id="div6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>
/*利用padding来嵌套*/

在这里插入图片描述

19.css标签分类

按类型

block（块）：div、p、ul、li、h2…

1.独占一行

2.支持所有样式

3.不写宽的时候和父容器的宽相同

4.所占区域是个矩形

inline（内联）:span、a、em、strong、img……

1.挨在一起的

2.有些样式不支持，例如：width、height、margin（部分）、padding（部分）–图片是替换元素，是特例

3.不写宽的时候，宽度由内容决定

4.所占区域不一定是矩形

5.内联标签之间会有空隙 —换行产生
在这里插入图片描述
inline-block：input、select……

1.挨在一起，但支持宽高

2.所占区域是个矩形

3.具有块和内联的共性

注：布局一般用块标签，修饰文本一般用内联标签

按内容

Flow：流内容

Metadata:元数据

Sectioning:分区

Heading:标题

Phrasing:措辞

Embedded:嵌入的

Interactive:互动

W3C : https://www.w3.org/TR/html5/dom.html
在这里插入图片描述

按显示

替换元素：浏览器根据元素的标签和属性，来决定元素的具体内容显示
在这里插入图片描述
非替换元素：将内容直接告诉浏览器，将其显示出来

20.显示框类型

display:block inline inline-block none……

display:none是不粘空间的隐藏（相当于消失）

visibility：hidden是占空间的隐藏

  <style>
        #div1,#div2{background: rgb(134, 149, 219);width: 50px;height: 50px;display: inline;}
        span{width: 50px;height: 50px;background: aqua;display: block;}
    </style>
</head>
<body>
    <div id="div1">块</div>
    <div id="div2">块</div>
    <span>内联1</span>
    <span>内联2</span>
</body>

在这里插入图片描述

21.标签的嵌套规范

块标签能够嵌套内联

<div>
    <span></span>
    <a herf="#"></a>
</div>

块不一定能嵌套块

块嵌套块

<div>
    <div></div>
</div>

错误示范：

<p>
    <div></div>
</p>

内联标签不能嵌套块标签

错误示范：

<span>
    <div></div>
</span>

特殊：a标签不能再嵌套a，但是可以嵌套block和span

<a herf="#">
        <div></div>
</a>

22.溢出隐藏

overflow

visible：默认

hidden：隐藏溢出部分

scroll：会出现滚动条

auto：会根据文本内容多少来出现滚动条

对应特定x轴和y轴：overflow-x overflow-y

<style>
        div{width: 200px;height: 200px;border: black 1px solid;overflow: hidden;}
    </style>

在这里插入图片描述

 <style>
        div{width: 200px;height: 200px;border: black 1px solid;overflow: scroll;}
    </style>

在这里插入图片描述

23.透明度与手势

透明度

opacity：0(透明)~1(不透明) 0.05（半透明）

占空间、内部所有子内容也会透明、作用于被指定部分的全部

div{opacity:0.5;}

rgba（）：0~1

可以让指定的样式透明，而不影响其他样式

div{background:rgba(255,0,0,0.5);}

在这里插入图片描述

手势

当鼠标移入指定区域，会展示不同的鼠标效果

cursor：default（默认箭头）、move、help

要实现自定义手势：准备图片，图片格式必须为 .cur/.ico ，再在后面加上auto

div{cursor:url(./img/cursor.ico),auto}

24.最大、最小宽高

min-width、min-height

max-width、max-height

div{min-height:200px;}
/*能自适应高度，最小高度为200px，当文本内容超出200px，会自动延长，使得文本不出框，当文本内容很少的时候不会改变框200px的大小*/
div{max-height:200px;}
/*自适应高度，最大高度为200px，文本过多或超区出框，文本内容很少会自动减小框的大小*/

百分号的换算：%–以父容器的大小进行换算，如果父容器没有规定高度，子容器没有意义，子容器只和上一级的父容器有关，和上上级都没关系

/*容器自适应浏览器屏幕*/
html,body{height: 100%;width: 100%;}
            div{height: 100%;width: 100%;background-color: aquamarine;}

25.css标签默认样式

没有默认样式：div、span
在这里插入图片描述
带有默认样式：body、ul、h1、a、p、ol

26.css reset 重置样式

方式一：通配改变所有–缺点：稍微影响性能

*{margin：0；padding：0；}
/*可以用通配将所有的标签的默认样式都去掉*/

方式二：对应标签添加

body,p,h1,ul{margin：0；padding：0；}

常用：

ul{list-style:none;}
/*将列表前方的点去掉*/

 a{text-decoration: none;color: aqua;}

在这里插入图片描述

   #img1{display: block;}
/*直接使用display改变图片的内联属性*/
   #img2{vertical-align: bottom;}
/*图片本身属于内联，内联元素的默认对齐方式是按照文字基线对齐vertical-baseline（默认），可以用vertical-bottom使得和底线对齐*/

在这里插入图片描述

27.Photoshop使用

组成：菜单项

工具栏

辅助面板

快捷键：Ctrl+r：显示隐藏标尺

在标尺上可以通过工具托追回去，也可以在视图菜单中选择清除所有参考

alt+滚轮：对图片进行放大缩小

图片格式：JPG–色彩丰富的背景图等、jif–动图、png–可以做成半透明的、psd

ps切图：

矩形选框

Ctrl+c；Ctrl+n；Ctrl+v

微调：alt–减；shift–加

存储为web格式

使用切片工具
行高
利用ps测量进行网页制作小练习

<!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>
        /* *{margin: 0px;padding: 0px;} */
        #div1{width: 360px;height: 60px;border: rgb(217,224,238) solid 1px;margin: 0px;padding: 0px;}
        #div1{border-top: 5px solid rgb(255,132,0);margin: 0px;padding: 0px;;}
        img{width: 327px;height: 240px;display: block; padding-left: 12px;padding-top: 12px;}
        ul{list-style: none;line-height: 38px;}
        a{color: #000;text-decoration: none;font-size: 16px;font-weight: normal;margin: 0px;padding: 0px;}
        #div2{width: 360px;height: 299px;border: rgb(217,224,238) solid 1px;margin: 0px;padding: 0px;}
        #div3{width: 360px;height: 170px;border: rgb(217,224,238) solid 1px;margin: 0px;padding: 0px;}
        p{line-height: 20px;}
        a:hover{color: rgb(255,132,0);text-decoration: underline;}
        ul li{ background: url(./未标题-7.png) no-repeat 5px center;padding-left: 29px;}
    </style>
</head>
<body>
    <div id="div1">
        <h2>财之道</h2>
    </div>
    <div id="div2">
        <img src="./未标题-6.png" alt="">
        <ul>
            <li>
                <p>
                    <a href="#">创投沙龙财之道:才知道财富有门道</a>
                </p>
            </li>
        </ul>
    </div>
    <div id="div3">
        <ul>
            <li><a href="#">618收尾?全民“报复性”消费了吗?</a></li>
            <li><a href="#">眼科赛道火热，未来发展几何？</a></li>
            <li><a href="#">预制菜能否抓住80、90后的胃?</a></li>
            <li><a href="#">一颗蛋融资6亿背后,麦田里的投资人</a></li>
        </ul>
    </div>
</body>
</html>

在这里插入图片描述
企业切图流程

利用工具快速获取样式

蓝湖：https://lanhuapp.com

28.float浮动

文档流：文档中可显示对象在排列时所占用的位置—块是从上到下，内联是从左到右

float浮动：（left、right、none）加浮动的元素会脱离文档流，会延迟父容器靠左或者靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列

<style>
        body{border: 1px black solid;}
        #div1{width: 100px;height: 100px ;background: rgb(206, 141, 141);float: left;}
        #div2{width: 50px;height: 50px ;background: rgb(108, 187, 232);float: left;}
    </style>

在这里插入图片描述
float注意点：

只会影响后面元素
内容默认提升半层–可以用来制作图文混合
默认宽根据内容决定，和父容器无关
换行排列，当浮动元素放不下会自动折行排列
主要给块元素加–形成左右排列，但也可以给内联元素加

 div{float: left;}
   span:last-of-type{float: left;}

在这里插入图片描述

清除浮动：clear–只会操作块，不会设置内联

上下排列–clear：both、left、right
在这里插入图片描述
嵌套排列：

固定宽高–不能把高度固定死，不适合做自适应的效果

父元素浮动–父容器浮动也会影响到后面元素

overflow：hidden–如果有子元素想溢出会影响到后面元素

display：inline-block–父容器会影响到后面的元素

设置空标签–会多添加一个标签

after伪类–推荐，是空标签的加强版，目前各大公司的做法

/*利用空标签*/ 
<style>
.clear{clear: both;}
 </style>
<div id="div1">
        <div id="div2"></div>
        <div class="clear">5555</div>
    </div>

在这里插入图片描述

/*利用after伪类*/ 
 <style>
        .clear::after{content: "";clear: both;display: block;}
    </style>

 <div id="div1" class="clear">
        <div id="div2"></div>
    </div>

在这里插入图片描述

float浮动制作小练习：

<!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>
        *{margin: 0%;padding: 0%;}
        ul{list-style: none;}
        a{text-decoration: none;color: black;}
        img{display: block;} 
        h2,h3{font-size: 16px;}

        .l{float: left;}
        .r{float: right;}
        .clear:after{content: "";clear: both;display: block;}

        #main{width: 366px;px;margin: 20px auto;}
        h2{height: 23px;line-height: 23px;padding-left: 12px;
         font-size: 16px; font-weight: bold;background: url(./ddddd.png) no-repeat 6px 4px,url(./未标题-7.png) repeat-x;}
        .picture{width: 99px;border: 1px rgb(194, 196, 199) solid;}
        img{padding: 2px;width: 100px;height: 80px;}
        .content{width: 240px;margin-left: 13px;}
        ul{overflow: hidden;margin-top: 13px;}
        li{margin-bottom: 22px;}
        h3{font-size: 12px;line-height: 24px;}
        p{line-height: 20px;font-size: 12px;}
    </style>
</head>
<body>
    <div id="main">
        <h2>外媒评论精选</h2>
        
        <ul>
            <li class="clear">
                <div class="l picture">
                    <a href="#"><img src="./未标题-2.png" alt=""></a>
                </div>
                <div class="l content">
                    <a href="#"><h3>《加勒比海盗》</h3></a>
                    <p>斤斤计较军军军军军军军军军军军军……<a href="#">[详情]</a></p>
                </div>
            </li>
        </ul>
        <ul>
            <li class="clear">
                <div class="l picture">
                    <a href="#"><img src="./未标题-3.png" alt=""></a>
                </div>
                <div class="l content">
                    <a href="#"><h3>《加勒比海盗》</h3></a>
                    <p>斤斤计较军军军军军军军军军军军军……<a href="#">[详情]</a></p>
                </div>
            </li>
        </ul>
        <ul>
            <li class="clear">
                <div class="l picture">
                    <a href="#"><img src="./未标题-4.png" alt=""></a>
                </div>
                <div class="l content">
                    <a href="#"><h3>《加勒比海盗》</h3></a>
                    <p>斤斤计较军军军军军军军军军军军军……<a href="#">[详情]</a></p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>