记事本：CSS

css更多的是一种用来修饰HTML的语言

CSS的三种引入方式

1、行内样式：一般不会这样写，如果想选择某一个，可以用之后内部样式中更加详细的选中方式

行内的优先级最高

<p style="size: 12px; color: blue">我是p标签</p>

2、内部样式：练习时使用

<style type="text/css">里面插入想要改变的内容样式</style>

<style type="text/css">
    p{
        color: green;
        font-size: 18px;
     }
</style>

【解释】

这里的p标签可以替换成各种标签，之后可以体现。

3、外部样式：工程中会使用

<link rel="stylesheet" type="text/css" href="./main.css">

导入式：

<style type="text/css">
        @import url('main.css');
</style>

基本选择器

标签选择器

<span>内容</span>

span{
    color: red;
    /*让鼠标变成小手的样式*/
    cursor: pointer;
}

ID选择器

<p id="p1">一个段落</p>

/*ID选择器 一般不设置css样式，通常与js有关*/
#p1{
    color: pink;
    font-size: 20px;
}

类选择器（class选择器）

<div class="w">
张三
</div>
<div class="w">
李四
</div>

.w{
    width: 110px;
    font-size: 14px;
    height: 100px;
    background-color: blue;
    border: 1px solid red;
}

通配符选择器

*{
    margin: 0;
}

*可以把边距变成0

属性选择器

<form>
        <label for="username">用户名</label>
        <label for="vip">vip</label>
        <label for="vivp">vivp</label>
        <input type="text">
        <input type="password">
    </form>

<style type="text/css">
    label[for]{
        color: red;
    }
    input[type='text']{
        font-size: 13px;
        background-color: red;
    }
    label[for^='vi']{
        color: yellow;
    }
</style>

高级选择器

<div class="father">
        <p>内容</p>
        <div class="son">
            <p>内容1</p>
            <span>内容2</span>
        </div>
        <h4 class="active">哈哈</h4>
    </div>

    <p>另一个内容</p>

/*后代选择器*/
.father .son{
     color: red;
}

/*并集选择器 重置样式 */
p, span{
   color: #666;
   font-size: 20px;
}

并集选择器一般在style中的前面，把系统不好看的格式换成需要的格式

/*交集选择器*/
 h4.active{
     color: #ff13db;
 }

 

伪类选择器

<div class="box">
    <ul>
        <li class="item">
            <a href="#">超链接</a>
        </li>
    </ul>
 </div>

<style type="text/css">
        /*
        行内标签：a span
        1、在遗憾显示
        2、不能设置宽高

        行内块：
        1、在一行内显示
        2、可以设置宽高

        块级标签：div p ul li
        1、独占遗憾
        2、可以设置标签
        3、如果不设置宽高，默认body100%宽度
        */
        .box ul li a:link{ 
            color: red;
        }
        .box ul li a:visited{
            color: blue;
        }
        .box ul li a:hover{
            color: #00ff00;
        }
        .box ul li a:active{
            color: #ff00eb;
        }
    </style>

link：是还没有点击过，显示的内容

visited：是访问过之后（第二次到第n次）要显示的内容

hover：是放在文字上显示的内容

active：是鼠标点击时会显示的内容

<ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>赵六</li>
    </ul>

<style>
        ul li:first-child{
            color: red;
        }
        ul li:last-child{
            color: green;
        }
    </style>

<style>
        ul li:nth-child(n){
            color: purple;
        }
</style>

这里不仅仅<li>标签可以使用，<p>标签同样可以使用

伪元素选择器

 

<p>内容</p>
<p>张三</p>
<p>李四</p>

<style>
        p::first-letter{
            font-size: 19px;
        }
        p::before{
            /*before要添加content属性*/
            content: 'alex';
        }
        p::after{
            /*after要添加也要加content属性*/
            /*在浮动中很重要*/
            content: 'hh';
        }
    </style>

css的继承性和层叠性

继承性：

<div>
   <p>张三</p>
</div>

<style>
        div{
            color: #FF0000;
            background-color: green;
            width:300px;
        }
    </style>

有某些属性可以继承——
  color、font-*、text-*、line-*
但某些盒子属性，定位元素无法继承

 

这里我们虽然定义的是div，但div的color属性会传递给<p>标签

而div的长度和版面的颜色却不能直接传递给<p>标签

 层叠性

层叠性就是把权重大的会显示，而权重小的则不会显示。

<p id="box" class="container">张三</p>

　　<style>
        /*1 0 0*/
        #box{
            color: green;
        }
        /*0 1 0 */
        .container{
            color: yellow;
        }
        /*0 0 1*/
        p{
            color: red;
        }
    </style>

id的权重大于class的权重大于标签的权重