1  css引入方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--内嵌式引入-->

    <!--<style>-->

        <!--a{-->

            <!--color:rebeccapurple;-->

            <!--font-size:30px;-->

            <!--font-weight:;-->

        <!--}-->

        <!--p{-->

            <!--ackground-color:gold;-->

        <!--}-->

    <!--</style>-->

    <!--连接式-->

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

    <!--导入式-->

    <!--<style>-->

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

    <!--</style>-->

</head>

<body>

<p>I am P!</p>

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

<div>CIV</div>

<div>DIV2</div>

<!--行内式-->

<!--<div style="color: red;background-color:darkgreen">DIV3</div>-->

</body>

</html>
    a{

        color:rebeccapurple;

        font-size:30px;

        font-weight:;

    }

    p{

        background-color:gold;

    }

2  基本选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        <!--标签选择器-->

        <!--p{-->

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

        <!--}-->

        <!--id选择器-->

        <!--#p2{-->

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

        <!--}-->

        <!--class选择器-->

        <!--.fang{-->

            <!--background:rebeccapurple;-->

        <!--}-->

        <!--通用选择器-->

        <!--*{-->

            <!--background:rebeccapurple;-->

        <!--}-->

    </style>

</head>

<body>

    <p class="fang">ppp1</p>

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

    <p class="fang">ppp3</p>

    <div>DIV</div>

    <span>SPAN</span>

</body>

</html>

3  组合选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        <!--后代选择器-->

        <!--.he p{-->

            <!--color:red;-->

        <!--}-->

<!---->

        <!--.yi p{-->

            <!--color:red;-->

        <!--}-->

        <!--子代选择器-->

        <!--.yi > p{-->

            <!--color:red;-->

        <!--}-->

        <!--多元素选择器-->

        <!--.he p,.p4{-->

            <!--color:red;-->

        <!--}-->

        <!--毗邻选择器-->

        <!--.yi + a{-->

            <!--color:red;-->

        <!--}-->

        <!--兄弟选择器-->

        <!--.yi ~ p{-->

            <!--color:red;-->

        <!--}-->

        <!--多个选择器组合到一起使用-->

        <!--ul.yan li{-->

            <!--color:red;-->

        <!--}-->

        <!--div.jie{-->

            <!--color:red;-->

        <!--}-->

    </style>

</head>

<body>

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

    <div class="yi">

        <p>p1</p>

        <div class="he">

            <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="yan">

        <li>111</li>

        <li>111</li>

        <li>111</li>

        <li>111</li>

    </ul>

    <ol class="yan">

        <li>222</li>

        <li>222</li>

        <li>222</li>

        <li>222</li>

    </ol>

    <ul>

        <li>333</li>

        <li>333</li>

        <li>333</li>

        <li>333</li>

    </ul>

</body>

</html>

前端之css笔记1的更多相关文章

  1. 前端之css笔记3

    一 display属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 前端之css笔记2

    1 属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  3. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  4. 前端：jQuery笔记

    前端:jQuery笔记 此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送 摘要: 一.简介 在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收 ...

  5. CSS笔记--选择器

    CSS笔记--选择器 mate的使用 <meta charset="UTF-8"> <title>Document</title> <me ...

  6. 前端学习:学习笔记(JS部分）

    前端学习:学习笔记(JS部分) 前端学习:JS学习总结(图解)    JS的简介 JS基本语法 JS内置对象 JS的函数 JS的事件 JS的BOM JS的DOM JS的简介 新建步骤 <body ...

  7. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  8. 前端之css

    前端之css 本节内容 css概述及引入 css选择器 css常用属性 1.css概述及引入 CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数 ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. oracle跟踪sql语句

    oracle跟踪sql语句 select * from v$sql 查询客户端电脑名称的ID select terminal, SID,SERIAL#  from v$session where  ( ...

  2. Winform 窗体关闭事件

    //窗体关闭前事件 private void FrmMain_FormClosing(object sender, FormClosingEventArgs e) { DialogResult res ...

  3. 通过maven 上传jar 到nexus3，cong nexus3下载jar

    nexus是一种常见的maven私服软件. 网上介绍的都是nexus2的使用,下面是最新版nexus3的使用方式. 首先需要从官网下载nexus3的包,很卡. 下载好以后解压会有两个文件夹:nexus ...

  4. SpringBoot application.yml文件不生效

    yml格式对缩进有严格的要求,检查你的yml配置文件是否有不合格的缩进项. 正确的格式如下: server: port: 8881 port前必须有空格,  port后的冒号 后面也需要有空格

  5. xslt基础学习

    今天下午工作完成没事,登w3c的网站学习了一下xslt的基础知识,主要是因为工作中xml用的比较多,xslt也有用到,所以在这里学习一下. XSLT:一种用于转换 XML 文档的语言. XSLT 用于 ...

  6. 程序员教程-9章-C程序设计

    目录结构: 9.1 C语言基础 9.1.1 数据类型 1 基本数据类型 2 数组.字符数组与字符串 3 枚举类型 4 结构体.共用体和typedef 9.1.2 运算符与表达式 9.1.3 输入/输出 ...

  7. cprogram作业

    刘金福 SA17225205 第三次作业 url:http://blog.csdn.net/liu896749150/article/details/78176433 学号:SA17225404 姓名 ...

  8. Haskell语言学习笔记（50）Extra

    Extra 安装 extra 模块. $ cabal install extra Installed extra-1.6 Prelude> :m +Extra Prelude Extra> ...

  9. scrollTop实现图像循环滚动（实例1）

    <html><head><title>scrollTop实现图像循环滚动(实例1)</title><meta http-equiv="C ...

  10. 抽象类（abstract class）

    package com.bjsxt.oop.abstractClass; //抽象类 public abstract class Animal { //因为父类的方法总是被重写 那就没写的必要了 但是 ...