简单的CSS文件

<style type="text/css">

    a{

        color:rebeccapurple;

        font-size: larger;

        font-weight: 900;

    }

    p{

        background-color: gold;

        font-size: larger;

        font-weight: 900;

    }

</style>

CSS的四种引用方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--内嵌式-->

    <!--<style>-->

        <!--p {-->

            <!--background-color: blue;-->

        <!--}-->

    <!--</style>-->

    <!--导入式-->

    <!--<style>-->

        <!--@import "index.css";-->

    <!--</style>-->

    <!--链接式-->

    <link rel="stylesheet" href="index.css">

</head>

<body>

<!--行内式-->

<div style="color:red;background-color: aqua">HELLO</div>

<p>HELLO WORLD</p>

</body>

</html>

选择器

基本选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*标签选择器*/

        p{

            background-color: rebeccapurple;

        }

        /*id选择器*/

        #p2{

            background-color: rebeccapurple;

        }

        /*class选择器*/

        .p_ele{

            color: gold;

        }

        /*通用选择器*/

        *{

            background-color: green;

        }

    </style>

</head>

<body>

    <p class="p_ele">PPP1</p>

    <p id="p2">PPP</p>

    <p class="p_ele">PPP3</p>

    <div>DIV</div>

    <span>SPAN</span>

</body>

</html>

组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*后代选择器*/

       .inner p{

           color: red;

       }

        .outer p{

            color: red;

        }

        /*子代选择器*/

       .outer > p{

           color: red;

       }

        /*多元素选择器*/

        .inner p,.p4{

            color: red;

        }

        /*毗邻选择器 */

       .outer + p{

           background-color: red;

       }

        /*兄弟选择器*/

        .outer ~ p{

            color: red;

        }

         ul.item li{

             color: red;

         }

         div.c1{

             color: red;

         }

    </style>

</head>

<body>

     <div class="c1">c1</div>

     <div class="outer">

         <p>P1</p>

         <div class="inner">

             <p>P3</p>

         </div>

         <p>P2</p>

         <a href="">click</a>

     </div>

     <a href="">aaa</a>

     <p>P5</p>

     <p class="p4">P4</p>

     <ul class="item">

         <li>11</li>

         <li>11</li>

         <li>11</li>

         <li>11</li>

     </ul>

    <ol class="item">

        <li>222</li>

        <li>222</li>

        <li>222</li>

        <li>222</li>

    </ol>

    <ul>

        <li>222</li>

        <li>222</li>

        <li>222</li>

        <li>222</li>

    </ul>

</body>

</html>

web前端 CSS基础的更多相关文章

  1. Web前端开发基础 第一天（Html和CSS）

    学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户 ...

  2. 网络统计学与web前端开发基础技术

    网络统计学与web前端开发基础技术 学习web前端开发基础技术(网页设计)需要了解:HTML.CSS.JavaScript三种语言.下面我们就来了解一下这三门技术在网页设计中的用途: HTML是网页内 ...

  3. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  4. 现代前端技术解析：Web前端技术基础

    ​ 最近几年,越来越多的人投入到前端大军中:时至至今,前端工程师的数量仍然不能满足企业的发展需求:与此同时,互联网应用场景的复杂化提高了对前端工程师能力的要求,一部分初期前端工程师并不能胜任企业的工作 ...

  5. Web前端之基础知识

    学习web前端开发基础技术须要掌握:HTML.CSS.Javascript 1.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,能够包括文字.图片.视频等. 2.CSS样式 ...

  6. Web前端-Ajax基础技术(下)

    Web前端-Ajax基础技术(下) 你要明白ajax是什么,怎么使用? ajax,web程序是将信息放入公共的服务器,让所有网络用户可以通过浏览器进行访问. 浏览器发送请求,获取服务器的数据: 地址栏 ...

  7. Web前端-Ajax基础技术(上)

    Web前端-Ajax基础技术(上) ajax是浏览器提供一套的api,用于向服务器发出请求,接受服务端返回的响应,通过javascript调用,实现通过代码控制请求与响应,实现网络编程. ajax发送 ...

  8. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  9. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

随机推荐

  1. linux内存

    在Linux的世界中,从大的方面来讲,有两块内存,一块叫做内存空间,Kernel Space,另一块叫做用户空间,即User Space.它们是相互独立的,Kernel对它们的管理方式也完全不同 驱动 ...

  2. Qt 报错LINK2019：无法解析的外部符号

    这里用的都是Qt 自己的东西,但是还是抱错,所以怀疑是没有包含进去,尝试了清理项目,重新编译等,还是不行 用到一个最好的办法,就是把构建的文件夹整个删除,在重新编译就可以了 如图所示,把debug和r ...

  3. Qt 绘制汽车仪表 指针旋转锯齿问题

    在前面几篇中出现的问题 http://blog.csdn.net/z609932088/article/details/53946245 这个是在QWidget下绘制的,出现了指针有锯齿的问题 后面开 ...

  4. 如何用Fiddler 拦住RestAssured发出的请求

    用RestAssured 发出的请求并不能直接被fiddler 拦截,可以在初始化的时候做出如下配置: RestAssured.proxy("localhost", 8888); ...

  5. %matplotlib inline

    整理摘自 https://zhidao.baidu.com/question/1387744870700677180.html %matplotlib inline是jupyter notebook里 ...

  6. css3 移入移出动画

    css: /*css3 鼠标移入移出动画 底部出现阴影层文字叙述*/ *{;} .div1{width:300px;height: 300px;text-align: center; backgrou ...

  7. Linux IO乱序

    原创翻译,转载请注明出处. 在一些平台,所谓的内存映射I/O在保序执行这方面是没有保障的.在这些平台,驱动写入器负责保证I/O写操作按照预期的顺序写到设备内存映射地址. 代表性的做法是通过读取一个安全 ...

  8. Java中IO——NIO

    一.引入 当引入一些新功能的时候,那说明之前的设计可能还需要完善. 1.阻塞式 在传统的IO输入输出中,如果我们从流中去读数据,而数据源中没有数据时,程序就会阻塞该线程.阻塞式线程的一种基本状态,可以 ...

  9. Java集合（2）——深入理解ArrayList、Vector和LinkedList

    回顾 Java集合主要分为两个体系结构,Collection和Map.这篇博客主要介绍Collection子接口List下的三个经常使用的实现类:ArrayList.Vector和LinkedList ...

  10. 【Python】PYTHON九九乘法表

    python2.7 for i in range(1,10):  for j in range(1,i+1):    print j,'x',i,'=',j*i,'\t',  print '\n'pr ...