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. ABAP-BarCode-2-Excel打印二维码

    以前用Excel打印过二维码看板标签,将实现过程备注下. 1.安装控件 安装文件:TBarCodeOffice.exe 2.控件注册 打开Excel,找到[选项] 在打开的界面选择[加载项],在活动应 ...

  2. Python之风湿理论值函数即变量

    一,风湿历练:函数即变量,这样执行程序是不会报错的 def foo(): print ("from foo") bar() def bar(): print "form ...

  3. python, Django csrf token的问题

    环境 Window 7 Python2.7 Django1.4.1 sqlite3 问题 在使用Django搭建好测试环境后,写了一个提交POST表单提交留言的测试页面. 如图: 填写表单,点击“提交 ...

  4. tensorflow Process finished with exit code 137 (interrupted by signal 9: SIGKILL) 错误

    Process finished with exit code 137 (interrupted by signal 9: SIGKILL) 在使用tensorflow自带的数据集做手写数字识别的时候 ...

  5. python 学习备忘

    list列表排序 def listdir(path): #返回一个排序后的目录list files=os.listdir(path) files.sort(key=lambda x:str(x[:-4 ...

  6. JavaScript 累加求和练习 函数

    输入一个数,求从1加到这个数的和 主要代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  7. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  8. 使用httplib打开链接

    [使用httplib打开链接] urllib打开网页时,不会自动跳转,而http会自动跳转,所以使用httplib去打开链接,以获取内容. 参考:https://docs.python.org/2.7 ...

  9. Cannot create inner bean '(inner bean)#67f903b5' of typ

    严重: Context initialization failedorg.springframework.beans.factory.BeanCreationException: Error crea ...

  10. Web标准：六、html列表

    Web标准:六.html列表 知识点: 1.ul无序和ol有序列表 2.改变项目符号样式或用图片定义项目符号 3.横向图文列表 4.浮动后父容器高度自适应 5.IE6的双倍边距bug   1)ul无序 ...