css小记（上）

1、在标签上设置style属性：
　　background-color: #2459a2;
　　height: 48px;
　　...

2、编写css样式：
　　1. 标签的style属性
　　2. 写在head里面 style标签中写样式
- id选择区
　　#i1{
　　background-color: #2459a2;
　　height: 48px;
　　}

- class选择器 ******

　　.名称{
　　...
　　}

<标签 class='名称'> </标签>

- 标签选择器
　　div{
　　...
　　}


所有div设置上此样式

- 层级选择器（空格） ******
　　.c1 .c2 div{

　　}
- 组合选择器（逗号） ******
　　#c1,.c2,div{

　　}

- 属性选择器 ******
　　对选择到的标签再通过属性再进行一次筛选
　　.c1[n='alex']{ width:100px; height:200px; }

PS:
- 优先级，标签上style优先，编写顺序，就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1 {
            background-color: red;
            height: 45px;
        }

        #i2 {
            background-color: red;
            height: 45px;
        }

        #i3 {
            background-color: aqua;
            height: 45px;
        }

        .c1 {
            background-color: aquamarine;
            height: 40px;
        }

        div {
            background-color: grey;
            height: 40px;
        }

        .c1 .c2 div {
            background-color: red;
            height: 45px;
        }

        .c3, #i5 {
            background-color: blue;
            height: 45px;
        }

        .c4[type="text"] {  background-color:darkgreen;width: 100px;  height: 200px;  }
/*.c1[n='alex']{ width:100px; height:200px; }*/

    </style>
</head>
<body>
    <div id="i1">dylan</div>
    <div id="i2">dylan</div>
    <div id="i3">dylan</div>
    <div class="c1">dylan</div>
    <div class="c1">
        <div class="c2">
            <div>dylan</div>
        </div>
    </div>
    <div>dylan</div>
    <div class="c3">dylan</div>
    <div id="i5">dylan</div>

    <input class="c4" type="text" >
    <input class="c4" type="password">
<!--<input class="c1" type="text" n="alex">-->
    <!--<input class="c1" type="password">-->


</body>
</html>

 3、css样式也可以写在单独文件中
　　<link rel="stylesheet" href="commons.css" />

.c2{
    font-size:58px;
    color: aqua;
}
.c1{
    background-color: red;
    color: white;
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/commons.css" />
</head>
<body>
    <div class="c1 c2" style="color: pink">asdf</div>

</body>
</html>

4、 注释
　　/* */

5、边框

     - 宽度，样式，颜色  (border: 4px dotted red;)
     - border-left
height，         高度 
width，          宽度 像素，百分比
text-align:ceter, 水平方向居中
line-height，垂直方向根据标签高度
color、     字体颜色
font-size、 字体大小
font-weight 字体加粗
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 48px;
    width: 80%;
    border: 1px solid red;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    font-weight: bold;
">dylan</div>

</body>
</html>

6、 float
　　让标签浪起来，块级标签也可以堆叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="width: 20%;background-color: red;float: left">1</div>
    <div style="width: 20%;background-color: red;float: left">2</div>

</body>
</html>

7、 display
　　display: none; -- 让标签消失
　　display: inline;
　　display: block;
　　display: inline-block;
　　具有inline,默认自己有多少占多少
　　具有block，无法设置高度，宽度，padding margin
　　******
　　行内标签：无法设置高度，宽度，padding margin
　　块级标签：设置高度，宽度，padding margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div style="background-color: red;display: inline;">www</div>-->
<!--<span style="background-color: red;display: block;">www</span>-->
<span style="display: inline-block;background-color: red;height: 50px;width: 70px;">dyaln</span>
<a style="background-color: red">AAAAAAAAZ</a>
</body>
</html>

 

posted @ 2019-03-29 23:08  Dylan123  阅读(79)  评论(0)    收藏  举报