2021-05-06

css

字体大小
font-size:40px;
字体粗细
font-weight:700;
字体风格 倾斜
font-style: oblique
设置字体，逗号隔开
font-family: “KaiTi”,“黑体”；
首行缩进两个字体大小
text-indent:2em;
/* 颜色相关 /
/ 1 英文单词 /
color:orange;
/ 2 6位16进制,前两位红色,中间两位绿色,最后两位蓝色 /
color: #F25643;
/ 3 3位16进制 /
color: #f00;
/ 4 rgb ,可以写百分比和 0-255的整数*/
color: rgb(50%, 0%, 0%);
/* 5 rgba , 第四个是透明度 0 - 1 之间的小数,0是完全透明*/
color: rgba(255, 0, 0, 0.5);
/* 水平对齐,左中右 ,必须有一定的宽度才行 /
text-align: center;
/ 下划线 /
text-decoration: underline;
/ 删除线 /
text-decoration: line-through;
/ 上划线 /
text-decoration: overline;
/ 设置大小和字体 /
font: 30px ‘KaiTi’;
/ 设置文本颜色 /
color:yellow;
/ 设置边框为2px的蓝色实线 /
border: 2px solid blue;
/ 文本水平居中 /
text-align: center;
/ 高度 /
height: 100px;
/ 行高 /
line-height: 100px;
/ 背景颜色 /
background-color: green;
/ 添加下划线文本修饰 /
text-decoration: underline;
/ 添加鼠标样式为小手状 /
cursor: pointer;
/ 只设置直接子标签 用 > 表示 /
/ ul>a{ /
/ ul下所有的a标签 空格表示后代 /
ul a{
color: red;
}
/ 未访问 /
a:link{
color: red;
text-decoration: none;
}
/ 已访问 /
a:visited{
color: green;
}
/ 鼠标移入 /
a:hover{
/ 下划线 /
text-decoration: underline;
color: pink;
/ 相对定位 /
position: relative;
/ 距上1像素 /
top: 1px;
/ 距左1像素 /
left: 1px;
}
/ 选定状态,按着鼠标不松手 */
a:active{
color: purple;
}
p:hover{
color: red;

    }
     div{
        width: 900px;
        height: 1500px;
        /* 设置颜色 */
        background-color: greenyellow;
        /* 设置背景图片 */
        background-image: url(./img/1.jpg);
        /* 设置平铺 : no-repeat(不平铺) , repeat-x (x轴平铺) , repeat-y(y轴平铺) , repeat(x,y都平铺)  */
        background-repeat: no-repeat;
        /* 设置滚动和固定 scroll滚动,fixed固定 */
        background-attachment: scroll;
        /* 设置位置  x 和 y*/
        /* 10px是x的值,也就是距离y轴有10px */
        /* background-position: 10px 20px; */
        /* background-position: 10% 50%; */
        background-position: top right;
        /* 1 如果是px和% 百分比 必须先x后y
        2 如果是方位名词,就没有先后顺序
        3 如果只有一个方位名词,另一个默认是center居中 */
    }