css01

2021-03-01 20:29

阅读:483

标签:需要   元素   声明   sheet   mes   rgba   ext   family   通过   

  • css选择器
1.css组成:选择器+一条或多条声明
    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>louiseli>
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>
    字体粗细:
     h2{
                font-family:‘微软雅黑‘;
    font-weight:400 }

2.文字样式

3.文本属性

    style>
        p{
            text-align:center;
text-decoration: none; 

}

    style>
body>
    p>hip>
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;
}

 

css01

标签:需要   元素   声明   sheet   mes   rgba   ext   family   通过   

原文地址:https://www.cnblogs.com/youngyounglady/p/14399077.html


评论


亲,登录后才可以留言!