CSS 层叠样式表(Cascading Style Sheets)(级联样式表)

1 选择器

　　1.1 写法

　　选择器是一个选择标签的过程. 选择器{属性:值;...}

　　1.2 基础选择器

　　　　标签选择器

　　　　类选择器

　　　　ID选择器

　　　　通配符选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         /*标签选择器*/
  8.         span{
  9.             font-size:200px;
  10.         }
  11.         /*类选择器*/
  12.         .G{
  13.             color: #;
  14.         }
  15.         .o{
  16.             color: #;
  17.         }
  18.  
  19.         .e{
  20.             color: #;
  21.         }
  22.         .l{
  23.             color:#;
  24.         }
  25.         /*id选择器*/
  26.         #o{
  27.             color: orange;
  28.         }
  29.         #g{
  30.             color: #;
  31.         }
  32.  
  33.     </style>
  34. </head>
  35. <body>
  36.     <span class="G">G</span>
  37.     <span class="o">o</span>
  38.     <span id="o">o</span>
  39.     <span id="g">g</span>
  40.     <span class="l">l</span>
  41.     <span class="e">e</span>
  42. </body>
  43. </html>

基础选择器

　1.3 符合选择器

　　　　交集选择器:标签.类/ID选择器  div.box

　　　　后代选择器:选择器 选择器 div.box div.div1

　　　　子代选择器:选择器>选择器 div.box>div.div1

　　　　并集选择器:标签,标签 div.box div.div1 p,p

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     /*    "."是交集
  8.         " "是后代
  9.         ","是并集*/
  10.         div.div1 ul.box li,div.div1 p{
  11.             color:red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="div1">
  17.         我是div中元素
  18.         <p>
  19.             我是div中的p
  20.             <ul class="box">
  21.                 <li>我是li中元素</li>
  22.             </ul>
  23.             <ul>
  24.                 <li>我是li中元素</li>
  25.             </ul>
  26.         </p>
  27.     </div>
  28.  
  29.     <div>
  30.         我是另一个div中元素
  31.         <p>我是div中的p标签</p>
  32.     </div>
  33. </body>
  34. </html>

test1

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.     /*    "."是交集
  8.         " "是后代
  9.         ","是并集*/
  10.         div.box p.p1, div.box div.div1 p,p{
  11.             color:red;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <div class="box">
  17.         我是div中元素
  18.         <p>
  19.             我是div中的p
  20.             <p class="p1">
  21.                 我是div中的p
  22.             </p>
  23.         </p>
  24.         <p>
  25.             <div class="div1">
  26.                 <p>我是p</p>
  27.             </div>
  28.         </p>
  29.     </div>
  30.  
  31.     <div>
  32.         我是另一个div中元素
  33.         <p>我是div中的p标签</p>
  34.     </div>
  35. </body>
  36. </html>

Test2

1.4 font属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.      p{
  8.             color:red;
  9.             font-weight: ;
  10.             font-style: italic;
  11.             font-size:16px;
  12.             line-height: 40px;
  13.             font-family: 微软雅黑;
  14.         }
  15.         div{
  16.             font:italic  16px/40px 微软雅黑 ;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div>
  22.         我是另一个div中元素
  23.         <p>我是div中的p标签</p>
  24.     </div>
  25. </body>
  26. </html>

1.5 小练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .content{
  8.             width:800px;
  9.             margin: auto;
  10.         }
  11.         .content h1{
  12.             font: 28px 微软雅黑;
  13.             text-align: center;
  14.         }
  15.         .content .box{
  16.             text-align: center;
  17.  
  18.         }
  19.         .spanTime .spanNews{
  20.             font-size: 14px;
  21.         }
  22.         .spanTime{
  23.             color:rgb(,,);
  24.         }
  25.         .spanNews{
  26.             color:#;
  27.         }
  28.         .box input[type=text]{
  29.             color:red;
  30.         }
  31.         .box input[type=button]{
  32.             color:green;
  33.             font-weight: ;
  34.         }
  35.         .content p{
  36.             text-indent: 2em;
  37.             line-height: 24px;
  38.         }
  39.  
  40.         .content p span{
  41.             color:blue;
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="content">
  47.         <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
  48.         <div class="box">
  49.             <span class="spanTime">2014年07月16日20:</span> <span class="spanNews">     新浪体育 评论中大奖（11人参与）</span>
  50.             <a href="#"> 收藏本文</a>
  51.             <input type="text" value="请输入查询条件" >
  52.             <input type="button" value="搜索">
  53.         </div>
  54.         <hr>
  55.         <p>新浪体育讯　7月16日是燕京啤酒<span>[微博]</span>2014中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
  56.  
  57.         <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
  58.  
  59.         <p>据记者多方了解的情况，李虎<span>[微博]</span>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
  60.  
  61.         <p>这样的情况并没有影响到丽江嘉云昊队<span>[微博]</span>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<strong>根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</strong></p>
  62.     </div>
  63. </body>
  64. </html>

集腋成裘-02-css基础-01的更多相关文章

  1. CSS基础(01)

    1. Css基础 1.1 CSS(层叠样式表 Multiple Styles)   CSS 是 Cascading Style Sheets(层叠样式表)的简称. CSS 语言是一种标记语言,它不需要 ...

  2. CSS基础01

    1.line-height:设置每行的高度,默认是会以文字的高度来决定 2.text-align:设置文本的对齐方式 3.vertical-align: sub 垂直对齐文本的下标. super 垂直 ...

  3. css基础--常用css属性02

    上篇地址:css基础--常用css属性01 本文参考菜鸟教程和w3school 1  浮动和清除浮动 在上篇的第十一节--定位中说道: CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 普通流和 ...

  4. # 095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 03 封装总结 01 封装知识点总结

    095 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  5. 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）

    094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  6. 093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 03 static关键字（下）

    093 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  7. 092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 02 static关键字（中）

    092 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  8. 091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 01 static关键字（上）

    091 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  9. 090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 04 使用包进行类管理（2）——导入包

    090 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

  10. 089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 使用包进行类管理（1）——创建包

    089 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...

随机推荐

  1. shell编程 之 test命令

    shell编程里的测试test命令基本可以分为3种数据类型,每种都不一样.个人更倾向于理解为条件语句的写法规则,就是test加条件加判断语句. 1 数值类型 基本可以分为6个判断:-eq等于,-ne不 ...

  2. 【Math for ML】向量微积分(Vector Calculus)

    I. 向量梯度 假设有一个映射函数为\(f:R^n→R^m\)和一个向量\(x=[x_1,...,x_n]^T∈R^n\),那么对应的函数值的向量为\(f(x)=[f_1(x),...,f_m(x)] ...

  3. 使用Swagger自动生成API文档

    ⒈添加pom依赖 <!-- Swagger核心包,用于扫描程序生成文档数据 --> <dependency> <groupId>io.springfox</g ...

  4. 测试cpu的简单工具-dhrystone【转】

    转自:https://blog.csdn.net/feixiaoxing/article/details/9005587 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  5. 题解-poj3682King Arthur's Birthday Celebration

    Problem poj-3682 题目大意:抛一次硬币有\(p\)的概率得到正面,当有\(n\)次正面时停止,抛第\(i\)次的花费为\(2i-1\),求抛的期望次数和期望花费 Solution 本来 ...

  6. 题解 SP26045 【GCDMAT2 - GCD OF MATRIX (hard)】

    承接一下洛咕上的题解,这里基本就是谈谈优化,放个代码的 我们发现这里的常数主要来自于除法,那么我们优化除法次数,把所有的 \(n/1...n/s\) (\(s=\sqrt n\))存下来,然后归并排( ...

  7. sonar——"entrySet()" should be iterated when both the key and value are needed

    When only the keys from a map are needed in a loop, iterating the keySet makes sense. But when both ...

  8. Cinder模块学习

    理解 Cinder 架构 - 每天5分钟玩转 OpenStack(45)   从本节开始我们学习 OpenStack 的 Block Storage Service,Cinder 理解 Block S ...

  9. 【转】RESTful Webservice创建

    RESTful Web Services with Java   REST stands for REpresentational State Transfer, was first introduc ...

  10. 【原创】运维基础之OpenResty(Nginx+Lua)+Kafka

    使用docker部署 1 下载 # wget https://github.com/doujiang24/lua-resty-kafka/archive/v0.06.tar.gz# tar xvf v ...