CSS入门之渡一教育笔记一

2019-06-26  本文已影响0人  渺渺兮余木

CSS3详细文档

第一课

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
</head>
<body>
        <!--1.行间样式-->
    <div style="
        width: 100px;
        height: 100px;
        background-color: #f00;
                ">
    </div>
</body>
</html>

2.页面级CSS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
    <style  type="text/css">
        div{
            width:100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
    
<body>
<!--    页面级-->
    <div>
    </div>
    
</body>
</html>

3.外部CSS文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body>
    <!--    1.选择器  一一对应关系, 一个元素只能有一个id,并且两个元素id不能一样
              #only{
                      width: 100px;
                      height: 100px;
                      background-color: #0f0;
                        }-->
    <div id="only">123</div>
    <!--    2.class选择器 多对多关系
                          .firstDiv{
                            height: 100px;
                            width: 100px;
                            color: #0FD9E6;
                            }-->
    <div class="firstDiv secondDiv"></div>
    <div class="firstDiv"></div>
    <!--    3.标签选择器 所有div均会出现以下样式-->
    <!--    div{
                bavkground-color:#fff;
            }-->
    <!--    4.通配符 所有标签均有该样式,包括<html>标签-->
    <!--    *{
                background-color: yellow;
             }-->
</body>
</html>
/*属性选择器     例:有id的使用该样式*/
[id]{
    background-color: red;
}
[id="demo"]{
  background-color:red;
}

css权重

/*放到里面*/
.firstDiv{
    height: 100px!important;
    width: 100px;
    color: #0FD9E6;
}
/*放在上面*/
P!important{
    background-color: antiquewhite;
}

css权重

!important-----------Infinity
行间样式---------------1000
id------------------------- 100
class|属性|伪类---------- 10
标签选择器|伪元素--------1
----------------------------进制为256

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div>
        <span>123</span>
    </div>
    <span>456</span>
</body>
</html>
/*派生选择器   div为父级 span为子级*/
div span{
    background-color: antiquewhite;
}

第二种

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body>
    <div class="first">
        <div class="second">
            <em>1234</em>
        </div>
    </div>
    <span>456</span>
</body>
</html>
/*父子级不一定是标签,也可以是class,可混合用*/
.first .second em{
    background-color: red;
}

直接子元素选择器

/*直接子元素选择器   只有div下第一代em才会使用该样式*/
div > em{
    background-color: blue;
}

并列选择器

<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body>
    <div class="second">123</div>
    <p class="second">456</p>
</body>
</html>
/*并列选择器 不加空格*/
div.first{
    background-color: blue;
}

权重计算,确定样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <div class="classdiv" id="idDiv">
        <p class="classP" id="idP">1234</p>
    </div>
</body>
</html>
/*权重计算*/
/*权重 100 + 1*/
#idP P{
    background-color: red;
}
/*权重 1 + 10 + 100*/
div .classP#idP{
    background-color: aqua;
}
/*所以颜色为aqua*/
/*权重一样,以后面为准*/

分组选择器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>myFirstHTML</title>
<!--关联外部样式表-->
<link href="one.css" rel="stylesheet" type="text/css">
</head>
    
<body> 
    <div class="classDiv">1</div>
    <strong class="classStrong">2</strong>
    <span class="classSpan">3</span>
</html>
/*分组选择器*/
.classDiv,.classStrong,.classSpan{
    background-color: red;
}
div,
span,
strong{
    background-color: blue;
}

伪类选择器

/*伪类选择器之hover*/
div:hover{
    background-color: orange;
}
上一篇 下一篇

猜你喜欢

热点阅读