简单的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. 梳理 Opengl ES 3.0 （二）剖析一个GLSL程序

    OpenGL ES shading language 3.0 也被称作 GLSL,是个 C风格的编程语言. Opengl ES 3.0内部有两种可编程处理单元,即Vertex processor和Fr ...

  2. remix-ide的三种使用方式

    如何实现一个hello word语句输出 这里写图片描述 {{uploading-image-404522.png(uploading...)}} 代码演示运行方式 VS code IDE,代码编写, ...

  3. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

  4. 软工实践Beta冲刺(4/7)

    队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...

  5. esayui combotree 只能选择子节点

    esayui combotree 只能选择子节点用onBeforeSelect:参数是node,节点被选中之前触发,返回false取消选择动作. 网上找了好多都没一个可用的,要想知道他是子节点还是根节 ...

  6. 算法(1)K-diff Pairs in an Array

    写在前面:研究操作系统,习惯了用C,但是在做算法题甚至构建大型系统时,C真的是噩梦.还是用C++比较好,基本算法很成熟,并可基于此实现更复杂的算法.那就边写算法边捡起来好久不用的C++吧! 题目:数组 ...

  7. js canvas captcha

    js canvas captcha https://thejackalofjavascript.com/building-a-captcha-using-html5-canvas/ https://a ...

  8. jsp实用过滤器写法

    使用过滤器来给servlet设置编码 public class CharacterEncodingFilter implements Filter{ @Override public void des ...

  9. big 解题报告

    big 题目描述 你需要在\([0,2^n)\)中选一个整数\(x\),接着把\(x\)依次异或\(m\)个整数\(a_1\sim a_m\). 在你选出\(x\)后,你的对手需要选择恰好一个时刻(刚 ...

  10. AOJ.602 大家来找茬

    大家来找茬 Time Limit: 1000 ms Case Time Limit: 1000 ms Memory Limit: 64 MB Total Submission: 627 Submiss ...