CSS常见样式

背景 background复合属性
字体 font复合属性

字体

body {
    /*字体系列，从前往后使用 'microsoft yahei'微软雅黑  'simsun'宋体 */
    font-family:'Times New Roman', Times, serif;
    
    /*大小*/
    font-size: 16px;
    
    /*斜体*/
    font-style: italic;/*斜体 默认是normal */
    
    /*加粗bold 变细lighter 正常normal*/
    font-weight: bold;
    
    /*也可以合起来写
    一般顺序是 font-style font-weight font-size ont-family*/
    /* font: 16px 'Times New Roman', Times, serif; */
}

元素尺寸控制

height 设置元素的高度。
width 设置元素的宽度。
line-height 设置行高。
min-width 设置元素的最小宽度。
min-height 设置元素的最小高度。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。

<div style="height: 220px;width:440px">
    <p>我们的内容</p>
</div>

盒子模型

Margin(外边距) 清除边框外的区域，外边距是透明的。
Border(边框) 围绕在内边距和内容外的边框。
Padding(内边距) 清除内容周围的区域，内边距是透明的。
Content(内容) 盒子的内容，显示文本和图像。

<div style="height: 220px;width:440px">
    <p style="margin-top:22px;">我们的内容</p>
</div>

表格border

border可以用于设置一个或多个以下属性的值： border-width, border-style, border-color。

border-width-----》宽度

border-style------》类型

dotted-------》虚线

double-------》双实线

ridge---------》浮雕

thick----------》厚的

solid-----------》固体

inset----------》凹陷

outset---------》凸起

border-color-------》颜色

border-collapse

用来决定表格的边框是分开的还是合并的。在分隔模式下，相邻的单元格都拥有独立的边框。在合并模式下，相邻单元格共享边框。

参数：collapse------->合并

separate---------》分开

margin外边距和padding内边距

margin 属性为给定元素设置所有四个（上右下左）方向的外边距属性。

也就是 margin-top，margin-right，margin-bottom，和 margin-left 四个外边距属性设置的简写。

参数 auto-------》居中
简写：当只指定一个值时，该值会统一应用到全部四个边的外边距上。
指定两个值时，第一个值会应用于上边和下边的外边距，第二个值应用于左边和右边。
指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的外边距。
指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的外边距。

/* 应用于所有边 */
margin: 1em;
margin: -3px;

/* 上边下边 | 左边右边 */
margin: 5% auto;

/* 上边 | 左边右边 | 下边 */
margin: 1em auto 2em;

/* 上边 | 右边 | 下边 | 左边 */
margin: 2px 1em 0 auto;

padding CSS 简写属性控制元素所有四条边的内边距区域。

padding 属性接受 1~4 个值。取值不能为负。

当只指定一个值时，该值会统一应用到全部四个边的内边距上。

指定两个值时，第一个值会应用于上边和下边的内边距，第二个值应用于左边和右边。

指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的内边距。

指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的内边距。

/* 应用于所有边 */
padding: 1em;

/* 上边下边 | 左边右边 */
padding: 5% 10%;

/* 上边 | 左边右边 | 下边 */
padding: 1em 2em 2em;

/* 上边 | 右边 | 下边 | 左边 */
padding: 5px 1em 0 2em;

Display

inline: 现在在一行
block: 块元素是一个元素，占用了全部宽度，在前后都是换行符
flex: flex布局, 见后面参考

<div>
    <li style="display: inline;">Tea</li>
    <li style="display: inline;">Milk</li>
</div>

<div>
    <span style="display: block;">span1</span>
    <span style="display: block;">span2</span>
</div>

Overflow

overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值

<div id="overflowTest">
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
    <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
</div>

<style scoped>
#overflowTest {
    background: #4CAF50;
    color: white;
    padding: 15px;
    width: 80%;
    height: 100px;
    overflow: scroll;
    border: 1px solid rgb(150, 18, 18);
}
</style>

浮动

控制元素左移还是右移

left
right

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性

<div>
    <span style="display: block;">span1</span>
    <span style="display: block;">span2</span>
</div>

<div id="overflowTest" style="clear:both">
</div>

对齐

我们以常见的剧中为例:

<div >
    <p>我是垂直居中的。</p>
</div>

如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center

设置行高到div 就整体剧中了

圆角

border-radius: 10px;

悬浮阴影

margin: auto;
border: 2px solid #6fa833;
padding: 10px;
border-radius: 5px 5px 5px 5px !important;
box-shadow: 0 0 0 1px #5f5a4b, 1px 1px 6px 1px rgb(10 10 0 / 50%);

改变选中字符串的颜色

::selection {
    color: #fff;
    background: #fe7300;
}

固定

position:fixed;

图片

这里以class=rolebg的标签上的img属性为例

.rolebg img{
    width: 100%;
    height: 100%;
    /* 让图片平铺显示 */
    object-fit: cover;
}

图片多余的地方隐藏

overflow: hidden;

动态翻转

需要设置原标签的对齐位置以及翻转时间

#author_profile{
    /*以底部对齐翻转*/
    transform-origin: bottom;
    /*翻转过程2秒*/
    transition: 2s;    
}

再基于某个标签对这个标签形成翻转

需要设置透视深度

反转的度数

扭曲度数

/*
当class=postBody的标签变成了焦点，对id=author_profile的标签进行操作
*/
.postBody:hover #author_profile{
              /*透视深度1000px     X轴反转度数       X轴扭曲度数   变化为1.5倍*/
    transform:perspective(1000px) rotateX(30deg) skewX(-20deg) scale(1.5);
}

文本显示

/*等于0表示不显示*/
opacity: 0;

/*等于1表示显示*/
opacity: 1;

/*
当class=postBody的标签变成了焦点，对id=content的标签进行操作
*/
.postBody:hover #content{
    /*文本显示*/
    opacity: 1;
    /*文本标签Y轴向下滑动120像素*/
    transform: translateY(120px)
}

posted @ 2024-01-30 16:19 厚礼蝎阅读(4) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

戈伍昂的领悟