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. Redis 通用操作2

    01, 一次设置多个键值 => mset key1 value1 key2 value2 key3 value3 ...... 02, 一次获取多个值 => mget ke1 key2 k ...

  2. 常用html设置：

    省略 居中 1. 省略 ellipsis: text-overflow:ellipsis: 要求容器必须是固定的,要不然无法做省略. table的省略 table{ table_layout:fixe ...

  3. ABAP-年月期间搜索帮助

    selection-screen begin of block block1 with frame title text-. parameters:p_mon1 like s031-spmon, p_ ...

  4. pyplot图像组件

    pyplot图像组件 ax子对象的组件内容 Title 图表标题 plt.title() Axis 坐标范围,x轴,y轴 plt.axis() label 坐标轴标注 plt.xlabel() plt ...

  5. 条件语句；for循环 嵌套复习

    //打印数字,0,1,8,10,12,每一个数单独占一行 //在全部数字打印完毕之后在打印数字的个数和所有数的和 int count = 0; int sum = 0; for (int i = 0; ...

  6. Containerpilot 配置文件示例

    { consul: "localhost:8500", logging: { level: "INFO", format: "default" ...

  7. electron 大体结构

    1.Electron支持的平台: OS XWindowsLinux 2.一个标准的electron app包含的结构: Windows 或是 Linux中:electron/resources/app ...

  8. QT隐式数据共享

    QT中许多C++类使用了隐式数据共享,最小化资源拷贝.当作为参数传递时,实际只传递了指针,这是底层完成的,程序员无需担心,即使是在多线程中,从Qt4开始: 记住,尽量使用const迭代器,vector ...

  9. 安装tftp服务器进行文件传输

    1. 安装: sudo apt-get install tftp-hpa tftpd-hpa ps: tftpd是服务器,tftp是客户端,客户端能发送和获取,服务器不能动. 2. 配置文件: sud ...

  10. 利用redis完成自动补全搜索功能（二）

    前面介绍了自动完成的大致思路,现在把搜索次数的功能也结合上去.我采用的是hash表来做的,当然也可以在生成分词的时候,另外一个有序集合来维护排序, 然后2个有序集合取交集即可.这里介绍hash的方式来 ...