自学前端Day4(选择器、显示模式、背景、三大特性)

最新推荐文章于 2024-02-18 21:57:57 发布

路漫漫`

最新推荐文章于 2024-02-18 21:57:57 发布

阅读量133

点赞数

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

本文链接：https://blog.csdn.net/qq_39579087/article/details/107286611

版权

Web 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

目标：
target

Emmet 语法

快速生成HTML结构

Emmet

快速生成CSS样式

只需输入缩写即可，如：

w：width
ti2em：text-indent: 2em;
tdnone：text-decoration: none
…

复合选择器

后代选择器

如果想把下面ol中的li标签中的内容做更改，那么就要用后代选择器：

<ul>
    <li>ul中的li</li>
    <li>ul中的li</li>
    <li>ul中的li</li>
</ul>
<ol>
    <li>ol中的li</li>
    <li>ol中的li</li>
    <li>ol中的li</li>
</ol>

选择器：

ol li {
     color: blueviolet;
}

如果想改第二个ul中的li标签怎么办？

 <ul>
   <li>ul中的li</li>
   <li>ul中的li</li>
   <li>ul中的li</li>
</ul>
<ul class="target">
   哈哈哈哈哈
   <li>ul中的li</li>
   <li>ul中的li</li>
   <li>ul中的li</li>
</ul>

在里面加一个class即可

.target li {
            text-indent: 2em;
            color: chartreuse;
        }

子选择器

子选择器
后代选择器会把一个标签中的所有后代（儿子、孙子…）都选出来，但是当我们只想改div下的第一个a标签怎么办呢？

使用这个css会把所有a标签都更改
.target a {
    color: darkgoldenrod;
}

<div class="target">
    <a href="#">儿子</a>
    <ul>
        <a href="#">孙子</a>
    </ul>
</div>

使用子选择器可以达到这个目的：

只需改变css，其他不变
.target>a {
    color: darkgoldenrod;
}

并集选择器

可以将多组标签选择出来
并集选择器
例如现在想把span、p、a标签都选出来应该怎么做会更方便？

<span>aaaaaaaaa</span>
<div>bbbbbbbbbb</div>
<p>cccccc</p>
<ul class="x">
    <li>ddd1</li>
    <a href="#">ddd2</a>
    <li>ddd3</li>
</ul>

并集选择器如下：

<style>
    span, p, .x>li {
        color: darkorange;
    }
</style>

伪类选择器

链接伪类选择器

链接伪类选择器
其实就是针对a标签来说的：

没访问过的链接是啥样的
访问了之后是啥样的
鼠标放上去是啥样的
鼠标点了还没松开是啥样的

<style>
a:link {
    font-size: 30px; 
    color:deeppink;
    text-decoration: none; 
}
a:visited {
    color: yellow;
}
a:hover {
    color: forestgreen;
}
a:active {
    color: mediumspringgreen;
}
</style>

注意：

在开发时，通常先对所有a标签指定一个样式，然后在再针对a标签的各种状态来指定其它样式。

a {
    color: black;
    text-decoration: none;
}
a:hover {
	color: lightblue;
	text-decoration: underline;
}
a:active {
	color: mediumspringgreen;
}

foucs 伪类选择器

foucs
把光标点在哪个input上，对应的input就发生变化。

显示模式

块元素

行内元素

行内块元素

行内块元素11

总结

元素显示模式转换

比如说a标签，有的时候想让一整张图片都可以点击然后跳转，这时就要扩大a标签的范围。
如果按照之前的做法，给a标签加一个样式改变其高和宽是没有用处的，因为人家是一个行内元素。

行转块

这就需要把行内元素转换成块级元素，用：

display: block;

a {
   background-color: limegreen;
   height: 50px;
   width: 100px;
   display: block;
}

效果如下：
行变块

块转行

把div转换成行内元素

div{
	 background-color: palevioletred;
	 height: 50px;
	 width: 100px;
	 display: inline;
}

效果：
块转行

转行内块

span {
   height: 200px;
   width: 300px;
   display: inline-block;
   background-color: rgb(77, 124, 226);
}

效果：

一个练习

试着做出如下效果：

html:

<a href="#">手机</a>
<a href="#">电脑</a>
<a href="#">相机</a>
<a href="#">游戏机</a>
<a href="#">空调</a>
<a href="#">电视</a>

css:

a {
   background-color: #535759;
   height: 40px;
   width: 230px;
   display: block;
   color: white;
   text-decoration: none;
   font-size: 14px;
   text-indent: 2em;
}
a:hover {
   background-color: #ff6f00;
}

效果如下：

如何让文字在盒子的居中位置(高度)？

line-height = 盒子高度即可

背景

背景颜色

背景图片

背景平铺

当盒子太大时，图片会重复的显示？

即使有了背景图片也可以加上背景颜色，只不过会被背景图片覆盖

背景图片的位置

用img很难指定图片位置，但用background-position可以容易地做到。
可以使用方位名词

位置2
也可以使用精确名词

混合使用

背景图像固定

背景固定

body {
	       background-image: url(icon2.jpg);
	       background-repeat: no-repeat;
	       background-attachment: fixed;
   }

背景复合写法

前面介绍了：

body{
       background-image: url(icon2.jpg);
       background-repeat: no-repeat;
       background-attachment: fixed;
       background-position: center 20px;
       background-color: greenyellow;
   }

但这样写太麻烦了，因此引入复合写法：

background: greenyellow url(icon2.jpg) no-repeat fixed center 20px;

背景颜色半透明

半透明

背景总结

小练习

用到的知识点有：

<style>
   .nav a{
       display: inline-block;
       width: 120px;
       height: 58px;
       background-color: skyblue;
       text-align: center;
       line-height: 48px;
       color: white;
       text-decoration: none;
   }
   .nav .bg1 {
       background: url(images/bg1.png) no-repeat;
   }
   .nav .bg1:hover {
       background: url(images/bg11.png);
   }
   .nav .bg2 {
       background: url(images/bg2.png) no-repeat;
   }
   .nav .bg2:hover {
       background-image: url(images/bg22.png);
   }
</style>

<div class="nav">
     <a href="#" class="bg1">navgiate</a>
     <a href="#" class="bg2">navgiate</a>
     <a href="#" class="bg3">navgiate</a>
     <a href="#" class="bg4">navgiate</a>
     <a href="#" class="bg5">navgiate</a>
</div>

CSS三大特性

1. 层叠性

层叠性

2. 继承性

继承性
注意：

3. 优先级

优先级
a标签比较特殊，即使是继承了body的样式(继承的权重为0)，也不会被改变，只有单独的去改变它才行

注意

权重也能叠加，但不会进位：

<style>
权重是 0 0 0 1
li {
    color: red;
    font-size: 30px;
}
ul + li 的权重是 0 0 0 2
ul li {
    color: seagreen;
}
.nav + li 的权重是 0 0 1 1
.nav li {
	color: black;
}
</style>

body>
	<ul class="nav">
		<li>asd</li>
		<li>sadad</li>
		<li>erwr</li>
	</ul>
</body>