ansi ext pan 字体样式 平铺 eat 文本 大小
一、
#ID{
width: 宽度 px;
height: 高度 px;
background-color:red; 背景颜色的两种加法
background:rgba(x,x,x,x) rgba 颜色 最后一个值为透明度 1 为不透明,0 为全透明。
background:url(图片. jpg) np-rereat; 背景图添加 repeat 是平铺
background-image:url(图片. jpg); 背景图添加
background-size;100%; 背景图拉伸 100% 几乎不会用到 因为会失真。
}
#ID{
font-family: 字体名字; 改字体
font-size:10px; 改字体大小,单位像素
color: 颜色; 改字体颜色
font-styel:italic; 字体样式 italic 斜体(就是 I 那个倾斜) normal 正常 默认正常
text-decoration:underline; 文本修饰属性 underline 下划线 overline 上划线 line-through 删除线 none 无,可以用于去掉下划线比如 <a> 标签的。
overflow:hidden; 元素溢出内容属性 visible 不修剪 会呈现在元素框之外 默认 hidden 修剪并隐藏溢出内容 scroll 加滚动条 auto 自动 如果溢出就加滚动条
text-align:center; 水平对齐 center 居中 left 左对齐 默认 right 右对齐
vertical-align 垂直对齐
line-height: 行高 垂直居中可以用行高进行
text-indent 缩进单位像素
}
.btn{
border:black solid 10px; 边框 黑色 solid 实线 dotted 虚线 线宽、
}
.btn:hover{ 当鼠标移到这个 class 为 btn 的 div 上的时候
background-color:red; 背景色变红
color:green; 字体变绿
cursor:pointer 鼠标变小手
transiti:1s; 变化在 1 秒内完成
transfor:rotate(45deg); 旋转 45°
box-shadow:4px 5px 6px 阴影效果 向下 5px 向右 5px 虚化 5px 阴影色为黑色
二、课上联系
- #d1 {
- width: 200px;
- height: 200px;
- /*background-color:red;*/
- background: rgba(255, 0, 0, 0.5);
- background: url(img / tu.jpg) no - repeat;
- /*默认平铺,no-repeat不平铺。*/
- /*background-image:url(img/tu.jpg);*/
- background - size: 100 % ;
- /*图片尺寸拉伸不常用,容易失真。*/
- /*background-attachment:scroll;*/
- overflow: scroll;
- }#d2 {
- width: 200px;
- height: 200px;
- font - family: 宋体;
- font - size: 50px;
- color: red;
- font - style: italic;
- /*斜体*/
- font - weight: 900;
- /*加粗100-900*/
- text - decoration: line - through;
- /*删除线。underline下划线 overline上划线 none,无,去超链接下划线*/
- }
- a {
- text - decoration: none;
- }.btn {
- width: 100px;
- height: 40px;
- border: 1px dotted black;
- text - align: center;
- /*水平居中*/
- line - height: 40px;
- /*垂直居中*/
- }.btn: hover {
- background - color: black;
- color: white;
- cursor: pointer;
- transition: 1s;
- transform: rotate(10deg);
- /*转动*/
- box - shadow: 5px 6px 7px red;
- /*虚化*/
- }
三、网页效果
HTML CSS 层叠样式表 二
来源: http://www.bubuko.com/infodetail-2097317.html