1  css引入方式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <!--内嵌式引入-->
  8.     <!--<style>-->
  9.         <!--a{-->
  10.             <!--color:rebeccapurple;-->
  11.             <!--font-size:30px;-->
  12.             <!--font-weight:;-->
  13.         <!--}-->
  14.  
  15.         <!--p{-->
  16.             <!--ackground-color:gold;-->
  17.         <!--}-->
  18.     <!--</style>-->
  19.  
  20.     <!--连接式-->
  21.     <!--<link rel="stylesheet" href="index.css"-->
  22.  
  23.     <!--导入式-->
  24.     <!--<style>-->
  25.         <!--@import "index.css";-->
  26.     <!--</style>-->
  27. </head>
  28. <body>
  29.  
  30. <p>I am P!</p>
  31.  
  32. <a href="">click</a>
  33.  
  34. <div>CIV</div>
  35.  
  36. <div>DIV2</div>
  37.  
  38. <!--行内式-->
  39. <!--<div style="color: red;background-color:darkgreen">DIV3</div>-->
  40. </body>
  41. </html>
  1.     a{
  2.         color:rebeccapurple;
  3.         font-size:30px;
  4.         font-weight:;
  5.     }
  6.  
  7.     p{
  8.         background-color:gold;
  9.     }

2  基本选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.  
  8.         <!--标签选择器-->
  9.         <!--p{-->
  10.         <!--background-color:rebeccapurple;-->
  11.         <!--}-->
  12.  
  13.         <!--id选择器-->
  14.         <!--#p2{-->
  15.             <!--background-color:rebeccapurple;-->
  16.         <!--}-->
  17.  
  18.         <!--class选择器-->
  19.         <!--.fang{-->
  20.             <!--background:rebeccapurple;-->
  21.         <!--}-->
  22.  
  23.         <!--通用选择器-->
  24.         <!--*{-->
  25.             <!--background:rebeccapurple;-->
  26.         <!--}-->
  27.  
  28.     </style>
  29. </head>
  30. <body>
  31.  
  32.     <p class="fang">ppp1</p>
  33.     <p id="p2">ppp2</p>
  34.     <p class="fang">ppp3</p>
  35.  
  36.     <div>DIV</div>
  37.  
  38.     <span>SPAN</span>
  39.  
  40. </body>
  41. </html>

3  组合选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.  
  9.         <!--后代选择器-->
  10.         <!--.he p{-->
  11.             <!--color:red;-->
  12.         <!--}-->
  13. <!---->
  14.         <!--.yi p{-->
  15.             <!--color:red;-->
  16.         <!--}-->
  17.  
  18.         <!--子代选择器-->
  19.         <!--.yi > p{-->
  20.             <!--color:red;-->
  21.         <!--}-->
  22.  
  23.         <!--多元素选择器-->
  24.         <!--.he p,.p4{-->
  25.             <!--color:red;-->
  26.         <!--}-->
  27.  
  28.         <!--毗邻选择器-->
  29.         <!--.yi + a{-->
  30.             <!--color:red;-->
  31.         <!--}-->
  32.  
  33.         <!--兄弟选择器-->
  34.         <!--.yi ~ p{-->
  35.             <!--color:red;-->
  36.         <!--}-->
  37.  
  38.         <!--多个选择器组合到一起使用-->
  39.         <!--ul.yan li{-->
  40.             <!--color:red;-->
  41.         <!--}-->
  42.  
  43.         <!--div.jie{-->
  44.             <!--color:red;-->
  45.         <!--}-->
  46.     </style>
  47. </head>
  48. <body>
  49.  
  50.     <div class="jie">c1</div>
  51.  
  52.     <div class="yi">
  53.         <p>p1</p>
  54.         <div class="he">
  55.             <p>p3</p>
  56.         </div>
  57.         <p>p2</p>
  58.         <a href="">click</a>
  59.     </div>
  60.  
  61.     <a href="">aaa</a>
  62.     <p>p5</p>
  63.  
  64.     <p class="p4">p4</p>
  65.  
  66.     <ul class="yan">
  67.         <li>111</li>
  68.         <li>111</li>
  69.         <li>111</li>
  70.         <li>111</li>
  71.     </ul>
  72.  
  73.     <ol class="yan">
  74.         <li>222</li>
  75.         <li>222</li>
  76.         <li>222</li>
  77.         <li>222</li>
  78.     </ol>
  79.  
  80.     <ul>
  81.         <li>333</li>
  82.         <li>333</li>
  83.         <li>333</li>
  84.         <li>333</li>
  85.     </ul>
  86.  
  87. </body>
  88. </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. JS计算时间差值

    var d = '2016 04 30 11:28:04'; var currentDate = new Date();//当前时间 var endDate = new Date(d); //结束时间 ...

  2. android -chrome 调试

    在chrome上 输入 chrome://inspect/ 连接手机,配置 监听8000,和8080端口 cordova默认是8000端口 如果出现白屏:原因:google在首次加载时,要进行服务器连 ...

  3. 前端-CSS-9-文本和字体-背景颜色

    字体属性 div{ width: 300px; height: 100px; /*background-color: red;*/ border: 1px solid red; /*设置字体大小 px ...

  4. UI5-文档-4.12-Shell Control as Container

    现在我们使用shell控件作为应用程序的容器,并使用它作为新的根元素.shell通过在桌面屏幕上引入一个所谓的信箱,来负责应用程序对设备屏幕大小的视觉调整. Preview The app is no ...

  5. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  6. Nginx安装部署以及配置文件解析

    Nginx 中的 Location 指令 是NginxHttpCoreModule中重要指令.Location 指令,是用来为匹配的 URI 进行配置,URI 即语法中的”/uri/”,可以是字符串或 ...

  7. JPEG和Variant的转换

    unit Unit1; interface uses   Windows, Messages, SysUtils, Classes, Graphics, Controls,       Forms, ...

  8. Hibernate的一个问题object references an unsaved transient instance - save the transi5

    1 我做了一对多和多对一的双向关联关系,在User这一方@ManyToOne已经设置了级联Cascade,这样在测试程序中保存User时,Group也应该自动保存,为什么会抛出以下的异常: (我是按着 ...

  9. ubuntu 16.04 完整安装 phantomjs

    摘自 stackoverflow sudo apt-get install nodejssudo apt-get install nodejs-legacysudo apt-get install n ...

  10. c#数和二叉树

    树(Tree)是 n(n≥0)个相同类型的数据元素的有限集合.树中的数据元素叫结点(Node).n=0 的树称为空树(Empty Tree):对于 n>0 的任意非空树 T 有: (1)有且仅有 ...