20220210-css

最新推荐文章于 2024-08-03 23:03:36 发布

wudi小乐

最新推荐文章于 2024-08-03 23:03:36 发布

阅读量171

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_48439892/article/details/123385207

版权

title: css
date: 2022/02/10
author: xiaole

1css的引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外联式 -->
    <link rel="stylesheet" href="./my.css">
    <!-- 内嵌式 -->
    <style>
        /* css注释 */
        p{
            color:red
            font-size: 300px;
            background-color:green;
            width:400px;
            height:400px;
        }

    </style>
</head>
<body>
    <p>这是一个p标签</p>
   <a href="">这是a标签</a>
   <!-- 行内式 -->
   <div style="color: green; font-size: 30px;">这是div标签</div>
</body>
</html>

2四种选择器

01标签选择器

p{
color:red;
}

02类选择器

<p class="one size">111</p>
.one{
color:red;
}
.size{
font-size: 66px;
}

03id选择器

id只能唯一

<p id="one">111</p>
#one{
color:red;
}

04通配符选择器

选择所有的标签

*{

}

3文字基本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 宋体找不到就雅黑，雅黑找不到，就非衬线字体 */
            font-family: 宋体，微软雅黑，sans-serif;
            /* font简写 font: style weight sieze/line-heighy family;*/
            font:italic 700 66px/2 宋体;
            /* font:italic 700 66px 宋体; */
            /* 下划线 */
            text-decoration: underline;
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;
            /* 无修饰线 */
        text-decoration: none;
        }
        p{
            font-size: 30px;
              /* normal-bold 400到700*/
            font-weight: 700;
            /* normal-italic 不倾斜到倾斜 */
            font-style: italic;
            /* 首行缩进 */
            text-indent: 2em;
            /* 字体大小 */
            font-size: 40px;
        }
      h1{
          /* text-align: left; */
          /* text-align: right; */
        text-align: center;
      }
      body{
          text-align: center;
      }
      .a{
          /* 50px行距 */
          line-height: 50px;
          /* 1.5倍行距 */
          line-height: 1.5;
      }
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <!-- 默认字号是16 -->
    <p>段落文字</p>
    <div>这是一个div标签</div>
    <img src="../1.jpg" alt="" width="50px">
    <div class="a">aefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfewwfasdfdsafaefweafawefawefsdfsdfew不wfasdfdsafaefweafawefawefsdfsdfewwfasdfdsaf</div>
</body>
</html>

更多浏览个人博客：