HTML与CSS学习 day4

最新推荐文章于 2024-07-14 10:34:53 发布

只只m

最新推荐文章于 2024-07-14 10:34:53 发布

阅读量65

点赞数

分类专栏：笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_42778611/article/details/114685412

版权

笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 body {
          font-size: 20px;
      }

字体粗细
normal默认样式不加粗
bold 加粗
light 变细
font-weight: 800; 后面的数字确定文字的大小 400=normal 700=bold
实际开发中使用较多

  font-weight: 800;

字体样式
font-style: italic; italic字体倾斜

normal使倾斜的字体恢复正常

em {
        font-style: normal;
    }
    <em>我不是倾斜的字体</em>

css字体复合属性
复合属性简写的形式节约代码
顺序不能颠倒严格遵循顺序简写
必须保留font-size和font-family属性否则font不起作用

font: font-style font-weight font-size/line-height font-family;
font : normal 700 16px 'Microsoft yahei';

<!-- 想要div文字变倾斜 加粗 自号设置为16像素 并且是微软雅黑 -->
<style>
    div {
        /* font-style: italic;
        font-weight: 700;
        font-size: 16px;
        font-family: 'MicroSoft YaHei'; */
        /* 复合属性 简写的形式 节约代码 */
        /* 顺序不能颠倒 严格遵循顺序简写 */
        /* font: font-style font-weight font-size/line/height font-family; */
        font : normal 700 16px 'Microsoft yahei';
    }
</style>
<body>
    <div>
        道阻且长,行则将至
    </div>

css文本属性
**color: #0004ff;**开发中最常用这种

<style>
    div {
        /* color: blue; */
        /* color: #0004ff; */
        color: rgb(0, 4, 255);
    }
</style>
<body>
    <div>你说蓝色是你最爱的颜色</div>
</body>

对齐文本

left 左对齐
center 居中
right 右对齐

 text-align:center;

装饰文本
underline 下划线
overline 上划线
none 默认无装饰线
line-through 删除线

 text-decoration: none;

缩进文本
em代表文字距离 2em代表缩进2个文字大小的距离

 p {
     /* text-indent: 20px; */
     /* em代表文字距离 2em代表缩进2个文字大小的距离 */
     text-indent: 2em;
   }

行间距
line-height

  p {
        line-height: 25px;
    }

在这里插入图片描述

文本属性总结
CSS行内样式
适用于简单修改

 <p style="color: red;">本要求和实践路径。 </p>

外部样式

   <link rel="stylesheet" href="style.css">

在这里插入图片描述

总结
emmet语法

父子级关系 ul>li 按tab
同级关系 div+p 按tab
.demo$*5 tab 快速生成不同属性

<div></div>
    <!-- div*5 按tab -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- 父子级关系 ul>li 按tab -->
    <ul>
        <li></li>
    </ul>
    <!-- 同级关系  div+p 按tab -->
    <div></div>
    <p></p>
    <!-- .demo tab -->
    <div class="demo"></div>
    <!-- #del tab -->
    <div id="del"></div>
    <!-- .demo$*5 tab 快速生成不同属性 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <div class="demo4"></div>
    <div class="demo5"></div>
    <!-- div{文字} tab  -->
    <div>我是一只咸鱼</div>
    <!-- div{文字}*5 -->
    <div>咸鱼翻身</div>
    <div>咸鱼翻身</div>
    <div>咸鱼翻身</div>
    <div>咸鱼翻身</div>
    <div>咸鱼翻身</div>
    <!-- div{$}*5 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

在这里插入图片描述

后代选择器

<style>
        ol li {
            color: red;
        }

        ul li a {
            color: rgb(65, 225, 100);
        }

        .nav li {
            color: saddlebrown;
        }

        .nav li a {
            color: rgb(139, 19, 79);
        }
    </style>
</head>

<body>
    <ol>
        <li>我是一只小鸟</li>
        <li>我是一只小鸟</li>
        <li>我是一只小鸟 </li>
    </ol>
    <ul>
        <li>我是一只小鸟</li>
        <li><a href="#"> 我是一只小鸟</a></li>
        <li>我是一只小鸟</li>
    </ul>
    <ul class="nav">
        <li>我是一只小鸟</li>
        <li><a href="#"> 我是一只小鸟</a></li>
        <li><a href="#"> 我是一只小鸟</a></li>
    </ul>
</body>

子选择器

元素一>元素二

<style>
        div>a {
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

在这里插入图片描述

并集选择器
元素之间用 ， 隔开最后一个元素不需要加 ，
逗号可以理解为和的意思

 元素一，
 元素二，
 元素三 { 
 }

只只m

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML与CSS学习 day4

字体大小 body { font-size: 20px; }字体粗细normal默认样式不加粗bold 加粗light 变细font-weight: 800; 后面的数字确定文字的大小 400=normal 700=bold实际开发中使用较多 font-weight: 800;字体样式font-style: italic; italic字体倾斜normal使倾斜的字体恢复正常em { font-style: norm.
复制链接

扫一扫