【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

css:  
            color: pink;
html:
        < p>段落内容</p>

css:    
		.类名 {
                color: red;
html:
		<p class="类名">段落内容</p>

html:
< p class=“类名1  类名2”>段落内容<p>

    css:
        #pink {
            color: pink;
    html:
        <div id="pink">ID选择器</div>

        <div id="pink">ID选择器</div>
        <div id="pink">ID选择器</div>

css:
            color: blue;
        }

font-family: 宋体;

        body {
            font-family: ‘Microsoft YaHei’,宋体,楷体;
        }

        body {
            font-size: 16px;
        }

        .bold {
            font-weight: 400;
        }

       .bold {
            font-style: italic;
        }

        div {
            color: deeppink;
        div {
            color: #ff0000;//红色
        }

        div {
            text-align: right;
        }

        div {
            text-decoration: underline;
        }

        p {
            text-indent: 2em;
        }

        p {
            line-height: 26px;
        }

    <p style="color:red;font-family:仿宋;"> 青春不常在，抓紧谈恋爱</p>

    <style>
                color: red;
                font-family: 仿宋;
    </style>

style.css文档中:
    color: red;
    font-family: 仿宋;
}

.html文档中:
    <link rel="stylesheet" href="./style.css">

<body>
    <!-- div+enter/tab: 自动补齐标签-->
    <div></div>
    <!-- p*3 多个相同标签生成-->
    <!-- ul>li 父子级关系-->
        <li></li>
    <!-- div>span 父子级关系-->
    <div><span></span></div>
    <!-- div+p 兄弟级关系-->
    <div></div>
    <!-- .gray 默认是div标签中添加类gray选择器 -->
    <div class="gray"></div>
    <!-- p.gray 指定是在p标签中添加类gray选择器-->
    <p class="gray"></p>
    <!-- p.gray&2*3 指定生成3个带类gray选择器p标签,且类名自增[从1开始]-->
    <p class="gray1"></p>
    <p class="gray2"></p>
    <p class="gray3"></p>
    <!-- p{我是段落标签} 我们想生成的标签里面默认显示文字 -->
    <p>我是段落标签</p>
</body>

    <style>
        .one {
            /* 要写出 text-align: conter;   只要写tac 按下tab键即可生成 */
            /*    其他语法也同理 */
            text-align: center;
            text-indent: 2em;
            /* 若要快速生成宽和高 只要写 w100 或者h100 按下tab键即可生成 */
            width: 100px;
            height: 100px;
            /*   同理    按下lh25 按下tab键即可生成  行高*/
            line-height: 25;
            /*   同理    按下tdn按下tab键即可生成  装饰标签 */
            text-decoration: none;
    </style>

   <ul>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ul 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
    <li>我是ol 的孩子</li>
   </ol>

   <style>
    ul li {
        color: red;
   </style>

    .nav>a {
        color: red;
    <div class="nav">
    <a href="#">我是亲儿子</a>
    <p><a href="#">我是亲儿子</a></p>
    <a href="#">我是亲儿子</a>
    </div>

   <style>
    /* 要求1:把熊大和熊二都改成粉色 */
        color: red;
    /* 要求2:把熊大熊二和小猪一家都改成蓝色 */
    .pig {
        color: blue;
   </style>
</head>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
</body>

    a:link {
        color:  black;
        text-decoration: none;
    a:visited {
        color: red;
    a:hover {
        color:blue;
    a:active {
        color:pink;
    }

    /* 把获得光标的input表单元素选取出来 */
    input:focus {
        background-color: red;
    }

    <div>块元素-div</div>
    <h1>块元素-h</h1>
    <p>块元素-p</p>
    <ol>块元素-ol</ol>
    <li>块元素-li</li>

错误示范:
    <p><div>宋永红发文发问阿文发噶文案违规</div></p>

    <span>行内元素-span</span>
    <a href="#">行内元素-a</a>

    <!-- 行内元素a转换为块元素 -->
        /* <!-- 转换为块元素 --> */
        display: block;
        width: 200px;
        height: 200px;
        background-color: red;
    }

    div {
        /* 块元素转换成行内元素 */
        display: inline;
        width: 200px;//不起作用
        height: 200px;//不起作用
        background-color: red;
    }

    div {
        /* 块元素转换成行内块元素 */
        display: inline-block;
        width: 200px;
        height: 200px;
        background-color: red;
    }

盒子的高度:
height:
文字的行高:
line-height:

   <style>
    div {
        width: 200px;/*盒子宽度*/
        height: 50px;/*盒子高度*/
        line-height: 50px;/*行高,行高==盒子高度能达成文字垂直对齐*/
        text-align: center;/*文字水平居中*/
        background-color: red;/*盒子背景颜色*/
   </style>
</head>
<div>我要垂直居中</div>
</body>

background-color:transparent | color(|意为或者)

background-image: none | url(url)

默认(背景平铺):
background-repeat: repeat;
background: no-repeat;
沿着x轴平铺:
background: repeat-x;
沿着y轴平铺:
background: repeat-y;

background-position: x y;

background-position: left top;

水平20px,垂直居中,第2行效果等同于第3行:
background-position: 20px center;
background-position: 20px;
水平居中,垂直50px:
background-position: center 50px

background-attachment: scroll | fixed;

   <style>
    div {
        height: 500px;
        width: 700px;
        background-image: url(../Image/OIP-C\ \(1\).jpg);
        background-position: center top;
        background-attachment: fixed;
        color: red;
   </style>
</head>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
    <p>天王盖地虎,宝塔镇河妖</p>
</body>

background: 背景颜色 背景图片地址 背景平铺 背景图像固定 背景图片位置
background: black url(../Image/OIP-C\ \(1\).jpg) no-repeat fixed center top;

background: rgba(1,0,0,.5);

   <style>
    div {
        height: 500px;/*不冲突*/
        width: 700px;/*不冲突*/
        color: red;/*相同选择器,相同样式冲突,被覆盖掉了*/
    div {
        color: pink;/*就近原则*/
   </style>
</head>
    <div>长江后浪推前浪,后浪死在沙滩上</div>
</body>

   <style>
    div {
        color: red;
        font-family: 仿宋;
   </style>
</head>
        <p>龙生龙，凤生凤，老鼠的儿子打地洞</p>
</body>

   <style>
    /*不同选择器的同一元素div的样式冲突,执行选择器权重*/
    .text {
        color: blue;
    div {
        color: red;
   </style>
</head>
    <div class="text">你笑起来真好看</div>
</body>

   <style>
    li { /*0001*/
        color:red;
    ul li {  /*0001+0001=0010*/
        color: green;
   </style>
</head>

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

【黑马程序员pink名师讲CSS】学好CSS有这一篇就够了(CSS笔记)

文章目录

P62.css简介

P63.css的语法规范

P65.选择器总体概述

P66.标签选择器

P67.类选择器

P70.ID选择器

P71.通配符选择器

P72.字体样式

P78.文本属性

P84.css的三种引入方式

P92.Chrome调试工具

P93.Emmet语法

P98.后代选择器

P99.子选择器

P100.随堂练习

P101.并集选择器

P102.伪类选择器

P106.元素显示模式

P114.垂直居中

P115.背景样式

P129.css的三大特性