css01

时间：2021-02-16 12:11:33 收藏：0 阅读：0

css选择器

1.css组成：选择器+一条或多条声明
<style></style>

    <h4>css组成：选择器+一条或多条声明</h4>
    <style>
        p{
            color:red;
            font-size: 12px;
        }
    </style>
</head>
<body>
<p>陋室铭</p>

    <style>
        p{
            color:red;
            font-size: 12px;
        }
        div{
            color:gray;
        }
    </style>
</head>
<body>
<p>陋室铭</p>
<p>醉翁亭记</p>
<p>采菊东篱下</p>
<div>刘禹锡</div>
<div>欧阳修</div>
<div>陶渊明</div>

2.类选择器

.类名。定义样式，结构调用类。

    <style>
        .red{
            color: red;
        }
    </style>
</head>
<body>
<ul>
    <li class="red">李香兰</li>
    <li>王羲之</li>
    <li>louise</li>
</ul>
<div class="red">
    jane
</div>

   <style>
       .red{
           width:100px;
           height: 100px;
           background-color: red;
       }
        .green{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="red">
</div>
<div class="green"></div>
<div class="red"></div>

3.多类名选择方式

<style>
     .red{
         color:red;
     }
     .font35{
         font-size: 35px;
     }
 </style>
 <div class="red font35">不以物喜，不以己悲</div>

    <style>
        .box{
            width:100px;
            height: 100px;
        }
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box red"></div>
<div class="box green"></div>
<div class="box red"></div>

4.id选择器

样式通过#定义，结构id调用。只能调用一次别人不能使用。经常和js搭配使用。

<style>
    #bule{
        color:blue;
    }
</style>
<body>
<div id="blue">俄比隆</div>

5.通配符选择器

使用*，选取页面中所有的元素

css字体属性

标题需要单独设置。   
 <style>
        body{
            font-size: 15px;
        }
        h2{
            font-family:‘微软雅黑‘;

        }
        p{
            font-family: ‘Times New Roman‘;
        }
    </style>
<body>
    <h2>清朝</h2>
    <p>康熙</p>
    <p>鳌拜</p>
    <p>索尼</p>
    <p>班布</p>
    <p>苏克哈沙</p> 
</body>
字体粗细：

<style>
    body{
        font-size: 15px;
        font-weight: lighter;
    }
标题不加粗

 h2{
            font-family:‘微软雅黑‘;
            font-weight:400

        }

2.文字样式

3.文本属性

    <style>
        p{
            text-align:center;

text-decoration: none; <!--取消链接的下划线-->

        }

    </style>
<body>
    <p>hi</p>
</body>

    <style>
        p {
            /*text-indent: 20px;* em当前元素大小/
            text-indent: 2em; 
        }
    </style>

4.行间距

行间距=上间距+文本高度+下间距

   <style>
      div{
          line-height: 25px;
      }
    </style>
<body>
    <div>中国人</div>
</body>

5.css引入

<link rel="stylesheet" href="1.css">
<body>
    <div>中国人</div>

1.css

div{
    color:red;
}