Web笔记

字体样式
/* font-size:字体大小 字号 默认16px /
font-size: 12px;
/ 字体 */

font-family: “宋体”;

/* 字体粗细 */
font-weight :bold;
font-weight :400(400正常大小,700加粗效果);

/* 字体样式font-style 默认值normal,italic倾斜 /
font-style :italic;
/ 连写 顺序style weight size family字号和字体必须同时设置 */
font:italic 700 20px ‘宋体’;

/* css的层叠性,属性名相同时 后面写的样式会把前面的覆盖掉。属性名相同时 */

文本样式
font-size:20px;
/* text-indent:32px; px具有局限性,引入了em这个单位*/
text-indent: 2em;

文本对齐方式
    .box1 {
      /* 对齐方式text-align   */
    text-align: center;
    }
      .box2 {
        width :300px;
        height :400px;
        background-color: antiquewhite; 
        text-align: center;
      }

  </style>


</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <img src="./map.jpg" alt="">
  <p>我是文字</p>
文本修饰
/* 清除a链接默认样式 (默认样式有下划线蓝色字体 )/
/ text-decoration:none; 去下划线*/
/* text-decoration: line-through; /
/ text-decoration: underline;下划线 /
/ overline上划线 /
/ 清楚a链接默认样式 */

text-transform
   ul li:nth-child(1){
     text-transform: lowercase;
   }
   ul li:nth-child(2){
     text-transform: uppercase;
   }`

## 行高
1
 line-height:50px;
}

div {
 width:400px;
 height:200px;
 background-color:pink;
 text-align:center;
 <!-- 单行文本借助行高垂直居中 -->
 line-height:200px;

}

背景相关
 /* height: 3000px;
  background-color: blue;

  background-image: url(./map.jpg);
  background-repeat:no-repeat;
  background-attachment: fixed; */

/* background-size: cover */


文本溢出
/* overflow: auto;y轴滚动 */


/* hidden  scroll(x轴滚动) */
= ## 列表样式
li {
/* 去除li默认样式 */
list-style: none;
list-style: circle;
list-style: decimal;
}

元素显示模式转换
  display: inline-block;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值