简单的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. 「题目代码」P1034～P1038（Java）

    P1034 C基础-求同存异 import java.util.*; import java.io.*; import java.math.BigInteger; public class Main ...

  2. 【个人训练】The Cow Lexicon（POJ-3267）

    继续大战dp.2018年11月30日修订,更新一下现在看到这个题目的理解(ps:就现在,poj又503了). 题意分析 这条题目的大意是这样的,问一字符串内最少删去多少的字符使其由给定的若干字符串构成 ...

  3. pytest 测试报告

    测试报告 运行测试用例后,为了保存结果,我们需要生成测试报告,同时可以把运行的测试报告发送相关人员查阅,这时需要安装一个插件(pytest-html) pytest-html插件安装 pip inst ...

  4. 定时爬虫抓当日免费应用：Scrapy + Tkinter + LaunchControl

    花了个周末学了下Scrapy,正好一直想买mindnode,于是顺手做了个爬虫,抓取爱范儿每天的限免应用信息. Thinking 大概思路就是使用LaunchControl每天定时(比如早上9点50, ...

  5. [USACO18DEC]Fine Dining

    题面 \(Solution:\) 一开始想的是先跑一遍最短路,然后拆点之后再跑一遍,比较两次dis,然后发现拆点后会有负环(可能是我没想对拆点的方法),于是就放弃了拆点法. 我们考虑强制让每头牛选择走 ...

  6. CodeForces Round #521 (Div.3) E. Thematic Contests

    http://codeforces.com/contest/1077/problem/E output standard output Polycarp has prepared nn competi ...

  7. Linux挂载Win共享文件夹 一

    1, Win下选中文件夹,属性设置为共享,红圈中的为共享路径,挂载时//ip/共享路径 2, 3,Linux需要安装这两个软件 rpm -qa | grep samba-client rpm -qa ...

  8. Flink History Job

    history job的写入1. org.apache.flink.runtime.jobmanager,Object JobManagerrunJobManager中指定使用MemoryArchiv ...

  9. node和gulp实现前端工程自动化(附：gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  10. QueryHelper插件类(hql)

    package cn.itcast.core.util; import java.util.ArrayList; import java.util.List; public class QueryHe ...