筱筱学前端Day4

最新推荐文章于 2024-07-26 15:05:55 发布

慕筱筱

最新推荐文章于 2024-07-26 15:05:55 发布

阅读量240

点赞数 1

分类专栏：前端入门学习文章标签：前端 html css

本文链接：https://blog.csdn.net/weixin_62772655/article/details/123062869

版权

前端入门学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

干货1——CSS样式表

英文全名: cascading style sheets(百度百科)=== cascading style sheet层叠样式表WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。1998年5月21日由w3C正式推出的css2.0
注：
1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值。
2）属性必须放在花括号中，属性与属性值用冒号连接。
3）每条声明用分号结束。
4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序,用空格隔开。
5）在书写样式过程中，空格、换行等操作不影响属性显示。

内部样式表

选择器（选择符）{属性：属性值；属性：属性值——声明；}
↓
要定义样式的对象
注：是在head中的。

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: red;
        }
        h2{
            color: yellow;
        }
        h3{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>111111</h1>
    <h2>222222</h2>
    <h3>333333</h3>
</body>
</html>

效果如下：
在这里插入图片描述

外部样式表

步骤如下（图片源于网络）：

图片源于网络
我们这样建立文档：
在这里插入图片描述

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <h1>111111</h1>
</body>
</html>

CSS代码如下：

h1{
    color: red;
}

结果如下：
在这里插入图片描述
若把link那一行换成如下代码：

<style>
        @import url(css/index.css);
</style>

可以得到一样的效果。

link和import之间的差别:
差别1:本质的差别: link属于XHTML标签，而@import完全是CSS提供的一种方式。
差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候), link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁)，网速慢的时候还挺明显。
差别3∶兼容性的差别: @import是CSS2.1提出的，所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。

行内样式表
解释如下（图片源自网络）：

举例如下：

<body>
    <h1 style="color: red;">111111</h1>
    <h2>222222</h2>
    <h3>333333</h3>
</body>

效果如下：
在这里插入图片描述

样式表的优先级

!important>行内>内部>外部

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="018CSS/index.css">
    <style>
        div{
            color: yellow;
        }
    </style>
</head>
<body>
    <div style="color: blue;">111111</div>
</body>
</html>

结果如下：
在这里插入图片描述
注：若此时给外部样式表如下加上!important结果将会是红色的。

div{
    color:red!important;
}

如果行内和外部都加!important那么结果还是遵从法则。若只给外部加上background-color那么背景色会显示这个颜色。
干货2——标签选择器
要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

元素选择符/类型选择符(element选择器）
如: div{width:100px; height:100px; background:red;}
语法:元素名称{属性:属性值;}如: div,p,h1,img,a,span,i,em,strong,b,ul,i,olli等
说明：
a)元素选择符就是以文档语言对象类型作为选择符，即使用结构中元素名称作为选择符。例如body、div、p;img,em,strong,span……l等。
b)所有的页面元素都可以作为选择符;
用法：
1)如果想改变某个元素得默认样式时，可以使用类型选择符;(如:改变一个div、p、h1样式)
2)当统一文档某个元素的显示效果时，可以使用类型选择符(如:改变文档所有p段落样式)

干货3——类选择器

class选择器/类选择器
语法:.class名{属性:属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是:
如:

<div class="top"></div>

.top{width:200px; height:100px; background:green;}
用法:class选择符更适合定义一类样式;

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ibm{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>111111</div>
    <div class="ibm">222222</div>
    <div class="ibm">333333</div>
    <div class="ibm">444444</div>
    <div>555555</div>
    <div>666666</div>
</body>
</html>

效果如下：
在这里插入图片描述
注：head中要加**.**,body中不用加。
若一个语句加上多个类选择器，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ibm{
            background-color: blue;
        }
        .use{
            color: red;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>111111</div>
    <div class="ibm use">222222</div>
    <div class="ibm">333333</div>
    <div class="ibm">444444</div>
    <div>555555</div>
    <div>666666</div>
</body>
</html>

效果如下：
在这里插入图片描述
若把.idm与.use交换位置，则222222那一行显示蓝色。
可见，类选择器遵循就近原则。
干货4——id选择器

语法:#id名{属性:属性值;}
说明：
A)当我们使用id选择符时,应该为每个元素定义一个id属性如:
<div id="box" ></div>
B) id选择符的语法格式是“#”加上自定义的id名如:#box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字:(所有的标记和属性都是关键字)
如: head标记
D)一个id名称只能对应文档中一个具体的元素对象。(唯一性)

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{
            background-color: yellow;
        }
        #box2{
            background-color: red;
        }
        #box3{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box1">111111</div>
    <div id="box2">111111</div>
    <div id="box3">111111</div>
</body>
</html>

结果如下：
在这里插入图片描述
注：id就像人的身份证一样，每个身份证对应一个人，每个人只有一个身份证。不可以让两个语句用同一个id（虽然也能出现这个效果，但将来用js的时候只能找到一个id，是不可行的）,也不可以让一个语句中有两个id!!!
干货5——通配符选择器

语法:*{属性:属性值;}
说明:通配选择符的写法是“*”，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;

注：通配符选择器可以去掉文字的边距等等，也很有用处。
用通配符选择器去边距前：
在这里插入图片描述
用通配符选择器去边距后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 外边距 */
            margin: 0;
            padding: 0;
            /* 内边距 */
        }
    </style>
</head>
<body>
    <h1>标题</h1>
    <div>111111</div>
    <ul>
        <li>111111</li>
        <li>222222</li>
        <li>333333</li>
    </ul>
</body>
</html>

在这里插入图片描述
干货6——群组和后代选择器

群组选择器

语法:选择符1，选择符2，选择符.3…属性:属性值;}
例:#top1,#nav1，h1{width:960px;}
说明:当有多个选择符应用相同的声明时，可以将选择符用“，”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
注：群组选择器可以提出公共代码，节约代码量。

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,.box,h1{
             background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        111111
        <p>222222</p>
    </div>
    <p class="box">111111</p>
    <h1>111111</h1>
</body>
</html>

效果如下：
在这里插入图片描述
若把倒数第6行的<p>222222<p>挪到<div>外单独放置，则它的背景色将不会是黄色，效果如下：

包含选择器/后代选择器

语法:选择符1选择符2{属性:属性值}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如:结构:

<ul class="list">
> <li></li>
> <li></li>
> <li></i>
> </ul>

样式:.list li{background:red;}
举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            background-color: blue;
        }
        p b{
            background-color: red;
        }
    </style>
</head>
<body>
    <div>
        666666
        <p>111111</p>
    </div>
    <p>
        <b>222222</b>
    </p>
    <div>
        <b>333333</b>
    </div>
</body>
</html>

效果如下：
在这里插入图片描述
干货7——伪类选择器

语法：
a:link{属性:属性值;}超链接的初始状态;
a:visited{属性:属性值;}超链接被访问后的状态;
a:hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
顺序：Link–visited–hover–active。
说明：
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为a:link,a:visited,a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如: a(colorred; ahover(color.green}表示超链接的初始和访问过后的状态一样，鼠标划过的状态和点击时的状态一样。

举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 初始状态 */
        a:link{
            color: aqua;
        }
        /* 访问之后 */
        a:visited{
            color:brown;
        }
        /* 鼠标移上 */
        a:hover{
            color: chartreuse;
        }
        /* 点击激活 */
        a:active{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">百度</a>
</body>
</html>

效果如下：
在这里插入图片描述
注：若初始时和点击后颜色不改变（很多情况都这样）则style里可以直接写

a{
    background-color:black;
    color:white;
}

通常情况下鼠标移上和点击时效果也是一样的，这时就只写一个a:hover{…}就足够了。
干货8——选择器的权重
当多个选择器选中的是同一个元素，且都为他们定义了样式，若属性发生了冲突，会选择权重高的来执行。
选择器的权重表如下（图源自网络）：在这里插入图片描述
注：权重的数值只是为了区分权重大小，并不是数量可以弥补的，不同权重的选择器间差距就如同维度不同，高级的选择器相对低级的选择器是降维打击式的。
以上内容是筱筱根据b站视频总结而成，学习前端的第四天，加油٩(๑òωó๑)۶