css 称为层叠样式单 它是一种专门描述结构文档的表现方式的文档,主要用于网页风格设计,包括字体大小、颜色、以及元素的精确定位等。 在传统的 web 网页设计里,使用 CSS 能让单调的 HTML 网页更富有表现力。
学习将一个文字进行上下左右居中处理/*文字的水平居中*/text-align: center;/*让我们的行高和我们的div的高度保持一致,可以将我们的文字处于正正好好的居中位置*/line-height: 150px;//这个高度保持和我们的div的高度保持一致即可
复制代码
background 图片的实现
/*设置的背景图片默认是平铺的效果 就是如果多的话 就是会慢慢的变多*/ background-image: url("./女.png"); /*這個屬性是默认不进行平铺*/ background-repeat: no-repeat;//还可以控制平铺的方向是向上或者是向下进行平铺都是可以决定的
复制代码
背景图片的设置
background: url("../../img/lag.png") no-repeat -70px 0px;#设置的是我们的不平铺的状态 no-repeat之后的是设置我们的x 和我们的y轴即可
复制代码
css 的全局的样式的设置
//修改全局的样式* { // 只可以在这里设置我们的margin和我们的padding其他的参数我们都不用进行设置 //因为如果设置其他的属性的话 会导致 margin: 0; padding: 0;}
复制代码
后代选择器
后代选择器具体的选择（li 标签的使用）
.content .header ul li:not(:last-child):not(:nth-child(1)) 指明不是第一个也不是最后一个样式
复制代码
input 边框的处理
outline:none;//可以去除掉我们的input的本身的边框颜色border:设置我们的边框的颜色一般属性配合使用
复制代码
设置文字的居中
text-align: center;height 60px;line-height: 60px;
复制代码
设置我们的内外边框
padding: 0 15px;这个是设置我们的上下 和我们的左右的边框的距离顺序是 从上开始 然后顺时针开始移动
复制代码
ul 的一些操作
#去除 点点text-decoration: none;
复制代码
伪类选择器
XXXX:hover 被hover操作之后的样式在我们的下边进行展示 XXX:focus 当我们的对其进行焦点处理的时候 也就是选中的时候XXXX:active 就是我们将我们的鼠标点击的时候按住才会发生的动作
复制代码
外边框的加入
border-bottom: 3px solid rgb(164, 215, 245);
复制代码
position 的定位
#将我们的父级元素设置我们的 position: relative;#然后对我们的子级元素设置我们的 position: absolute;这样的话 我们的位置就是可以以父级元素进行变动的
#将我们的元素的位置设置为 releative之后的话 这个位置的移动就是根据自己原来的位置进行移动
复制代码
文章居中的操作
这段文字居中的原因就是因为我们通过计算出来
如果要计算的话 我们可以将我们的文字的位置设置为relative然后调节我们的 top属性的位置/* */line-height: 1.8em;//居中的公式/* 50% ‐ 行高 * 总行数/2 */;top: calc(50% - 4 * 1.8em);
复制代码
评论