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. 1.Redis的应用场景

    转自:http://www.runoob.com/redis/redis-tutorial.html Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在 ...

  2. Spring MVC 异常处理 - ExceptionHandler

    通过HandlerExceptionResolver 处理程序异常,包括Handler映射, 数据绑定, 以及目标方法执行时的发生的异常 实现类如下 /** * 1. 在 @ExceptionHand ...

  3. bat 笔记 二

    @echo off echo 等待 ping -n 5 127.1 >null cls echo 我爱嘉怡 pause >null 第一条利用echo关键字关闭路径面板 第二条利用echo ...

  4. Inteiilj IDEA 团队代码格式规范

    目录 Intellij IDEA code format Tabs and Indents Spaces Wrapping and Braces Imports 更新 Intellij IDEA co ...

  5. centos7 opencc 安装

    繁体字转换:http://xh.5156edu.com/jtof.php 转换的有问题http://tool.lu/zhconvert/ git网址:https://github.com/BYVoid ...

  6. cmd命令 从C盘转到D盘

        点开始 点运行.输入 CMD 回车.进入DOS提示符状态下.输入 cd\ 回车 表示进入 c:\> 也就是C盘根目录下.输入d: 回车 是进入D盘当前目录,并不一定是根目录.然后cd\ ...

  7. War(最短路+最大流)

    War http://acm.hdu.edu.cn/showproblem.php?pid=3599 Time Limit: 2000/1000 MS (Java/Others)    Memory ...

  8. 基于AspectJ的XML方式进行AOP开发

    -------------------siwuxie095                                 基于 AspectJ 的 XML 方式进行 AOP 开发         1 ...

  9. 为什么要学习php

    前言: 有的人说java是世界上最伟大的编程语言,也有人说php是最伟大的编程语言,对于这个问题的争论,貌似一直都没有停息过. 前段时间也看过一份编程语言使用排行的调查资料,java当仁不让的保持着排 ...

  10. gridiew列求和,表的列求和，表的记录数，时间段查询

    下面求的是gridview中第5列的值,并在lable1中显示 protected void Page_Load(object sender, EventArgs e)    {        int ...