这篇是对今天的学习进行总结，今天的学习内容不是很多，但是含金量很大，所以我会认真的总结介绍，也希望大家跟我一起学习认识。
-
文字阴影
主要是给文字添加阴影效果，使得文字更加着重和增强显示效果。
<style>
/* 水平位置 垂直位置 模糊距离 相同颜色 */
.CON {
/* text-shadow: 10px 0 5px red; */
/* text-shadow: 0px 10px 0px blue; */
text-shadow: -5px 0px cyan, 5px 0px red;
}
</style>
<body>
<div class="CON">今天哟是元气满满的一天</div>
</body>这是代码所展现的效果。 当我们改变阴影的
-
文字阴影的应用
我们看到许多游戏官网的首页的标题标签会展现出一些特别的效果。所以我们学简单的学习了一下，然后展现出一定的效果。因此我就把这些的代码和显示的效果展现出来。
<style>
/* 设置一下背景颜色 */
body {
background-color: gray;
}
.CON {
/* 字体大小 */
font-size: 60px;
/* 字体阴影 */
text-shadow: -1px 0px 10px cyan, 1px 0px 10px cyan, 0px 0px 10px cyan;
/* 字体颜色 */
color: #fff;
font-family: 楷体;
}
</style>
</head>
<body>
<div class="CON">今天哟是元气满满的一天!</div>
</body>
- 这里会有一些关于css的书写规范的小建议，来我们一起看一下。
1.建议使用小写,大写会有其他的作用
2.属性定于必须另起一行
3.属性定义后必须以分号结尾
第二类选择器
-
复合选择器
有的时候想要设计一种效果的样式，但是所要设计的样式的标签我们给予了不同的类名，这就是需要我们使用复合选择器来设计效果。
<style>
.con {
color: green;
}
.con1 {
color: pink;
}
/* 两个字体都加粗 字体大小都是32 */
/* 并集选择器 */
.con,
.con1 {
font-weight: 700px;
font-size: 32px;
}
/* * {
font-weight: 700px;
font-size: 32px;
} */
</style>
<body>
<div class="con">一一一</div>
<span class="con1">二二二</span>
</body>代码里面我们给予两个不同颜色，但是对于同一种字体大小和粗细我们所展现出来的是一样的。
-
后代选择器
是对父级元素的后代进行css的样式设计。
<style>
/* 后代选择器>用来选择元素的子孙后代 做精准选择
中间需要用空格隔开! */
ul li div span {
color: pink;
}
</style>
<body>
<ul>
<li>
<div>
<span>三三三</span>
</div>
</li>
<li>
<span>四四四</span>
</li>
</ul>
</body>
-
子代选择器
又称子元素选择器，主要是对父元素后的特定子元素进行样式设计。
<style>
/* 某元素的亲儿子
使用>来表示子元素选择器!
*/
li>span {
color: pink;
}
</style>
<body>
<ul>
<li>
<div>
<span>三三三</span>
</div>
</li>
<li>
<span>四四四</span>
</li>
</ul>
</body>
显示模式
-
标签选择器的显示模式display
我们的标签显示模式有三种：行内元素，块元素和我们的行内块元素，每种元素具有不同的特点和效果。具有的一些特点和注意事项我也都写在了代码里，大家可以自己仔细的观察和认识了解一下。
<style>
div {
width: 200px;
height: 200px;
}
span {
width: 100px;
height: 100px;
}
img {
width: 200px;
height: 200px;
}
</style>
<body>
<!-- p div span li ul ol dl dt dd a input img hr br em b strong i u ins s del h1-h6 -->
<!-- div 块级元素 -->
<!-- 1.独占一整行 2.可以设置宽高 -->
<div>hello world</div>
<!-- 行内元素 -->
<!-- 1.不独占一行 2.不可以设置宽高 宽高由内容撑开-->
<span>今天周五,明天要考试!</span>
<span>明天睡不了觉了!</span>
<!-- 行内块元素 -->
<!-- 1.不独占一行 2.可以设置宽高 -->
<img src="../a.png" alt="">
<!-- 块级元素 p div h1-h6 li ul ol hr ...-->
<!-- 行内元素 span a 文本格式化八个标签 -->
<!-- 行内块元素 img input button -->
</body>块元素的显示效果：
行内元素：
行内块元素：
大家一定要区分这三种显示模式，避免达不到需要的效果。
-
显示模式的转换
为的是方便使模式之间的转换来更好的使网页渲染效果达到预期的效果。
<style>
div {
width: 200px;
height: 200px;
background-color: rebeccapurple;
/* dispaly 显示转换 */
display: inline-block;
}
span {
width: 200px;
height: 200px;
background-color: blue;
display: block;
}
</style>
<body>
<!-- 块级 block 行级 inline 行内块元素 inline-block -->
<div>行内块</div>
<div>行内块元素</div>
<span>行内元素</span>
<!-- 标签的嵌套关系 -->
<!-- 块级元素可以放任何元素 -->
<!-- 行内元素只能放文本和其他的行内元素 -->
<!-- 特殊情况 -->
<p>段落1
<p>段落2</p>
</p>
<a href="https://blog.csdn.net/weixin_64991351/article/details/139640826?spm=1001.2014.3001.5502"><img src="../a.png" alt=""></a>
</body>
这里的话图片的地方是个a链接标记。
背景
-
背景样式
每个网页都会有一定的背景无论是纯色的还是使用的图片都需要一定的背景来让我们对网页更加的喜欢，从而达到网页制作者想要达到的效果。这里我设计了简单的样式供大家进行学习参考，更多的是要注意一些表示方法。
<style>
div {
text-align: center;
width: 750px;
height: 550px;
/* 背景颜色 transparent */
background-color: transparent;
/* 背景图片 */
background-image: url(../a.png);
/* 背景重复 repeat-x 水平 -y垂直重复*/
background-repeat: repeat;/*重复*/
border: 1px solid #ccc;
/* 背景定位 position是两个值 方位单词left right bottom top 数值正向是右下 负向是左上 px
center = center center*/
background-position: center;/*居中对齐*/
}
</style>
<body>
<div></div>
</body>
特别的我们可以根据背景图的定位来找到自己所需要的图。
标签：总结,color,元素,学习,HTML,background,0px,选择器,200px From： https://blog.csdn.net/weixin_64991351/article/details/139688241对于今天的学习总结就到这里，虽然今天学习的东西不是很多但是需要吸收消化的比较多，所以我么认真的看一下本篇文章。