简单的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. shiro笔记

    控制某一角色拥有此选项 上图 标签为shiro:hasRole表示 此时只有admin角色才拥有 系统用户管理和角色管理两个tab 页 上图 标签为shiro:hasPermission表示 此时只有 ...

  2. HDU 4714 Tree2cycle（树状DP）（2013 ACM/ICPC Asia Regional Online ―― Warmup）

    Description A tree with N nodes and N-1 edges is given. To connect or disconnect one edge, we need 1 ...

  3. 第十一次ScrumMeeting会议

    第十一次ScrumMeeting 时间:2017/11/18 4:00-4:30 地点:主203 人员:全体人员 照片: 工作情况 名字 今日计划 明天的工作 遇到的困难 蔡帜 讨论策划详情\确定WB ...

  4. [boost-3] 函数对象

    boost库学习: 函数对象,成为‘高阶函数’,可以呗传入到其他函数或者从其他函数返回的一类函数. Boost.Bind可替换来自c++标准中的std::bind1st()和std::bind2dn( ...

  5. 【PHP】- session_cache_limiter(private,must-revalidate)是什么意思

    session_cache_limiter(private,must-revalidate)是什么意思 表义一: 指定会话页面所使用的缓冲控制方法: 当session_cache_limiter('p ...

  6. Chromium多进程资源加载

    webkit笔记,主要来自 朱永盛 <WebKit技术内幕> 学习笔记,转载就注明原著,该书是国内仅有的Webkit内核的书籍,学习的好导师,推荐有兴趣的朋友可以购买 多进程 资源的实际加 ...

  7. 除了基本类型,其余类型基本上大部分new出来 java.sql 包下面要不需要new

    除了基本类型,其余类型基本上大部分new出来 java.sql 包下面要不需要new

  8. 【bzoj4517】[Sdoi2016]排列计数 组合数+dp

    题目描述 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是稳定的 满足条 ...

  9. $.ajax()方法参数总结

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和d ...

  10. [NOI.AC省选模拟赛3.30] Mas的童年 [二进制乱搞]

    题面 传送门 思路 这题其实蛮好想的......就是我考试的时候zz了,一直没有想到标记过的可以不再标记,总复杂度是$O(n)$ 首先我们求个前缀和,那么$ans_i=max(pre[j]+pre[i ...