经验总结

  1. 首页 > 生活 > >

day03-CSS( 二 )

生活百科day03-CSS


day03-CSS

文章插图
  • 字体样式
    • font-size：指定大小，可以按照像素大小
    • font-weight：指定是否是粗体
    • font-family：指定类型
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>字体样式</title><style type="text/css">div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏; /*选择的字体要是电脑上已经安装的字体*/}</style></head><body><div>hello,北京</div></body></html>
    day03-CSS

    文章插图
    • 3.4div和文本居中
    • div居中
    属性margin-left 和 margin-right 都设置为auto的话，表示左右居中
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>div居中显示</title><style type="text/css">div {/*margin-left和margin-right都设置为auto的话，表示左右居中*/margin-left: auto;margin-right: auto;border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;}</style></head><body><div>hello,北京</div></body></html>
    day03-CSS

    文章插图
    • 文本居中
    属性text-align，值为center时表示文本居中
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>文本居中显示</title><style type="text/css">div {margin-left: auto;margin-right: auto;border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏;/*文本居中*/text-align: center;}</style></head><body><div>hello,北京</div></body></html>
    day03-CSS

    文章插图
    3.5超链接去下划线属性text-decoration，值为none时表示无修饰
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>超链接去下划线</title><style type="text/css">a {/* decoration是修饰的意思*/text-decoration: none;}</style></head><body><a href="https://www.baidu.com">点击百度</a></body></html>
    day03-CSS

    文章插图
    3.6表格细线设置边框 : border: 1px solid black
    将边框合并: border-collapse: collapse;
    指定宽度： width
    设置边框： 给 td, th 指定即可 border: 1px solid black;
    1. table, tr, td 表示组合选择器
    2. 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
    例子
    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格细线</title><style type="text/css">/*设置边框 : border: 1px solid black将边框合并: border-collapse: collapse;指定宽度： width设置边框： 给 td, th 指定即可 border: 1px solid black;1. table, tr, td 表示组合选择器2. 就是 table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性*/table, tr, td {width: 300px;border: 1px solid black;border-collapse: collapse;}</style></head><body><table><tr><td align=center colspan="3">星期一菜谱</td></tr><tr><td rowspan=2>素菜</td><td>青草茄子</td><td>花椒扁豆</td></tr><tr><td>小葱豆腐</td><td>炒白菜</td></tr><tr><td rowspan=2>荤菜</td><td>油闷大虾</td><td>海参鱼翅</td></tr><tr><td>红烧肉</td><td>烤全羊</td></tr></table></body></html>

    经验总结扩展阅读


    上一篇：a类火灾应选用哪类灭火器

    下一篇：2023年9月24日适合坐游轮吗 2023年农历八月初十宜坐游轮吗