简单的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. [PocketFlow]解决在coco上mAP非常低的bug

    1.问题 继上次训练挂起的bug后,又遇到了现在评估时AP非常低的bug.具体有多低呢?Pelee论文中提到,用128的batchsize大小在coco数据集上训练70K次迭代后,AP@0.5:0.9 ...

  2. Windows server 2012 R2开机进入cmd，关闭后黑屏问题

    原因分析: 因为自己在卸载IIS的时候,不小心卸载了.net framework,系统没有了图形界面(由完整模式Full变为了核心模式core),需要重新恢复.net framework4.5. 解决 ...

  3. BZOJ 4029 HEOI2015 定价 数位贪心

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4029 题意概述:对于一个数字的荒谬程度定义如下:删除其所有的后缀0,然后得到的数字长度为a ...

  4. POJ 2162 Document Indexing（模拟）

    Description Andy is fond of old computers. He loves everything about them and he uses emulators of o ...

  5. mysqldump: Got error: 1135: Can't create a new thread (errno 11); if you are not out of available memory, you can consult the manual for a possible OS-dependent bug when trying to connect 解决办法

    在进行数据库备份的时候发现服务器报 mysqldump: Got error: 1135: Can't create a new thread (errno 11); if you are not o ...

  6. JavaSE复习（八）反射和注解

    反射 框架设计的灵魂 框架:半成品软件.可以在框架的基础上进行软件开发,简化编码 反射:将类的各个组成部分封装为其他对象,这就是反射机制 好处: 可以在程序运行过程中,操作这些对象. 可以解耦,提高程 ...

  7. 山科 STUST OJ Problem B: 编写函数：String to Double (II) (Append Code)

    这道题没啥别的毛病,我的错误在于看不懂题. 另外还有一点是注意浮点数存在-0 #include <stdio.h> #include <ctype.h> #include &l ...

  8. 学习MVC中出现的一个BUG

    BUG描述:No Entity Framework provider found for the ADO.NET provider with invariant name 'System.Data.S ...

  9. JavaScript中常用转义字符

    \b   退格 \f   换页 \r   回车 \n   换行 \"   双引号 \'  单引号 \t  Tab字符 \\  反斜杠 \xnn  十六进制代码nn表示的字符 \unnnn 十 ...

  10. LeetCode -- Merge Two Sorted Linked List

    Question: Merge two sorted linked lists and return it as a new list. The new list should be made by ...