CSS 

  层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低的。 而css就可以分别为网页的各个层次设置样式。  

  CSS的样式表由一个一个的样式构成,一个样式又由选择器和声明块构成。

  语法:

    – 选择器 {样式名:样式值;样式名:样式值 ; }
    – p {color:red ; font-size:12px;}

方法一:

  内联样式

 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
   </head>
<body>
          <p style="color:red;font-size:40px;">锄禾日当午,汗滴禾下土</p>
<p style="color:red;font-size:40px;">谁知盘中餐,粒粒皆辛苦</p>
</body>
</html>

  可以将CSS样式编写到元素的style属性当中将样式直接编写到style属性中,这种样式我们称为内联样式内联样式只对当前的元素中的内容起作用,内联样式不方便复用内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用。所以我们就有了CSS。

  内部样式

 <!doctype html>
<html>
<head>
<meta charset="utf-8" /
<style type="text/css">
p{
color:red;
font-size:40px;
} </style> </head>
<body>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
</body>
</html>

  这样就解决了数量很庞大的标签项目的样式设定。但是如果我们在其他页面也使用内部样式那?

  外部样式表

  先将上述p标签的样式复制下来,然后在新建一个文本文件,将样式拷贝进文本文件中,然后右键另存为sytle.css

  然后我们编写了一个外部的CSS文件,然后通过link标签来将外部的CSS文件引入到当前页面中,这样外部文件中的css样式表将会应用到当前页面中。

 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="style.css" /> </head>
<body
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
<p>谁知盘中餐,粒粒皆辛苦</p>
</body>
</html>

  将CSS样式统一编写到外部的样式表中,完全使结构和表现分离,可以是样式表可以在不同的页面中使用,最大限度的使样式可以进行复用,将样式统一写在样式表中,然后通过link标签引入,可以利用浏览器的缓存,加快用户访问的速度提高了用户体验,所以在开发中我们最推荐使用的方式就是外部的CSS文件。href=css的路径。

  css的注释

  CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中。

 <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css"> /*
CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中 CSS的语法: 选择器 声明块 选择器:
- 通过选择器可以选中页面中指定的元素,
并且将声明块中的样式应用到选择器对应的元素上 声明块:
- 声明块紧跟在选择器的后边,使用一对{}括起来,
声明块中实际上就是一组一组的名值对结构,
这一组一组的名值对我们称为声明,
在一个声明块中可以写多个声明,多个声明之间使用;隔开,
声明的样式名和样式值之间使用:来连接 */ p{
color:red;
font-size:50px;
} </style> </head>
<body> <p style="color:red">天天下雨,我已经半个月没见太阳了</p> </body>
</html>

  块元素和内联元素

  div就是一个块元素,所谓的块元素就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行。

  p h1 h2 h3 ... 都是块元素。

  div这个标签没有任何语义,就是一个纯粹的块元素,并且不会为它里边的元素设置任何的默认样式,div元素主要用来对页面进行布局的。 

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="background-color:red ; width: 200px;">
我是一个div
</div>
<p>我是一个p标签</p>
<p>我是一个p标签</p> </body>
</html>  

  span是一个内联元素(行内元素):所谓的行内元素,指的是只占自身大小的元素,不会占用一行
  常见的内联元素:a img iframe span
  span没有任何的语义,span标签专门用来选中文字,
  然后为文字来设置样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span>我是一个span</span>
<span>我是一个span</span> <span>我是一段文字</span> </body>
</html>

  块元素主要用来做页面中的布局,内联元素主要用来选中文本设置样式,
  一般情况下只使用块元素去包含内联元素,而不会使用内联元素去包含一个块元素
  a元素可以包含任意元素,除了他本身
  p元素不可以包含任何块元素

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
  <p><span>我是一个span</span></p> <a href="#"></a> <a href="#">
<div style="background-color:red ; width: 200px;">
我是一个div
</div>
</a>
</body>
</html>

  在HTML5中,内联元素和块元素这两个概念已经取消了。但是我们在这里便于理解还是使用老的概念。

  常用的CSS选择器

    元素选择器
    作用:通过元素选择器可以选则页面中的所有指定元素
    语法:标签名 {}

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
p{
color: red;
} h1{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
</body>
</html>

  这种选择器缺点显而易见,如果单独想设置某一个P标签的样式。就会更改整体P标签的样式。

    id选择器
     通过元素的id属性值选中唯一的一个元素
     语法:
     #id属性值 {}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
#p1{
font-size: 20px;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p>锄禾日当午</p>
<p>锄禾日当午</p>
<p id="p1">锄禾日当午</p>
</body>
</html>

  虽然解决了不能单独分配样式的问题,但是相同的带来另外一个问题就是不能分组去分配样式。如果想多个分配样式必须把每一个P标签分配一个ID。  

  类选择器
  通过元素的class属性值选中一组元素
  语法:
  class属性值{}

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
.p2{
color: red;
}
      .hello{
          font-size: 50px;
       } </style>
</head>
<body>
<p class="p2 hello">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>

    我们可以为元素设置class属性,
    class属性和id属性类似,只不过class属性可以重复
    拥有相同class属性值的元素,我们说他们是一组元素
    可以同时为一个元素设置多个class属性值,多个值之间使用空格隔开

    选择器分组(并集选择器)
    通过选择器分组可以同时选中多个选择器对应的元素
    语法:选择器1,选择器2,选择器N{}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css"> #p1 , .p2 , h1{
background-color: yellow;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p id="p1">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>

      复合选择器(交集选择器)
        可以选中同时满足多个选择器的元素
        语法:
        选择器1选择器2选择器N{}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
       span.p3{
background-color: yellow;
     }
     </style>
</head>
<body>
        <p class="p3">锄禾日当午</p>
     <span class="p3">汗滴禾下土</span>
</body>
</html>

      对于id选择器来说,不建议使用复合选择器

     通配选择器
     他可以用来选中页面中的所有的元素
     语法:*{}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title>
<style type="text/css">
*{
color: red;
}
</style>
</head>
<body>
<h1>悯农</h1>
<p id="p1">锄禾日当午</p>
<p class="p2">锄禾日当午</p>
</body>
</html>

       后代元素选择器

       选中指定元素的指定后代元素
         语法:
        祖先元素 后代元素{}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div span{
color: greenyellow;
}
</style>
</head>
<body>
<div>
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
</div>
<span>我是body中的span元素</span> </body>
</html>

   只要是div块元素后代的span标签都会应用选择器,而不是div块元素后代的span标签不会应用选择器。而且后代元素选择器也可以交叉使用ID选择器,class选择器 例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
        #d1 span{
color: greenyellow;
   }
     </style>
</head>
<body>
       <div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
  </div> </body>
</html>

也可以单独选择一个后代元素进行应用(第几个后代就在后面加几个标签)例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
        #d1 p span{
font-size: 50px;
}
     </style>
</head>
<body>
       <div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
  </div>
</body>
</html>

        子元素选择器
          选中指定父元素的指定子元素
          父元素 > 子元素
         * IE6及以下的浏览器不支持子元素选择器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div > span{
background-color: yellow;
}
</style>
</head>
<body>
<div id="d1">
<span>我是div标签中的span</span>
<p><span>我是p标签中的span</span></p>
     </div>
</body>
</html >

只选定子元素进行应用。

练习:

CSSdinner

前端开发HTML&css入门——CSS&选择器练习的更多相关文章

  1. 要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  2. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

  3. [转载]Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    http://brackets.io/ Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维 ...

  4. Web前端开发实战6:CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  5. 前端开发【第二篇: css】

    css概述 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...

  6. 前端开发CSS3——使用方式和选择器

    CSS是Cascading Style Sheets(层叠样式表)的简写,用于修饰文档的语言,可以修饰HTML.XML.SVN.每个语言都有每个语法的规则:CSS声明.CSS声明块.CSS选择器.CS ...

  7. 前端开发中常用的CSS选择器解析(一)

    你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略cs ...

  8. 前端开发HTML&css入门——CSS的文本格式化

    长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位, * 一个像素就相当于我们屏幕中的一个小点, * 我们的屏幕实际上就是由这些像素点构成的 * 但是这些像素点,是不能 ...

  9. 前端开发之-------------合理利用CSS的权重----------------

    什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨 ...

随机推荐

  1. 指定文件或文件夹直接提交到svn指定目录

    我这里先说两种方法第一种:1.先将那个目录checkout下来2.将要添加的文件或者文件夹放到这个目录中3.右击文件执行svn菜单中的add命令4.右击文件执行svn菜单中的commit命令第二种:如 ...

  2. 函数式接口和Lambda表达式

    函数式接口(一般标有@FunctionalInterface)就是只定义一个抽象方法的接口. 一个接口,如果满足函数式接口的定义,那么即使不标注为 @FunctionalInterface, 编译器依 ...

  3. laravel Route::resource() 资源路由

    格式: Route::resource('/order', 'OrderController', ['as' => 'admin']); 框架自动创建路由及其对应控制器中的方法: 请求方式 路由 ...

  4. 【转】UNITY中相机空间,投影空间的正向问题

    原文链接1:https://www.cnblogs.com/wantnon/p/4570188.html 原文链接2:https://www.cnblogs.com/hefee/p/3820610.h ...

  5. python调用c++/c 共享库,开发板上编译的一些坑!

    1.对于python,ctypes只能load动态库,但现在我的对象是一个静态库,而且我没有源代码,静态库在编译过程中没有加--fPIC参数,所以我也没办法将其编译为动态库,有没有什么方法在pytho ...

  6. delphi 跨版本DLL调用嵌入窗体实现

    delphi 能实现把别的DLL的窗体句柄查到后,贴到PANL之中,此类文章网上不少,而如果是delphi不同版本开发的DLL互调时,一些控件内部的定义有所区别,因为无法(至少目前我觉得理论上不可行) ...

  7. 阶段3 1.Mybatis_06.使用Mybatis完成DAO层的开发_7 Mybatis中使用代理Dao的执行过程分析

    另外一种情况,不写Mybits的dao实现类的情况. 切换工程到CRUD的工程.这里面是不写dao实现类的方式 进入到GetMaper里面.这里是创建代理对象 去找SqlSession的实现类Defa ...

  8. Unity Audio Source Properties

    Audio Clip 音频剪辑 将播放声音的剪辑文件 Mute 静音 Bypass Effects 直通效果 应用音频源的快速“直通”过滤效果.一个简单的方法来打开/关闭所有特效 Output 产量  ...

  9. 【ABAP系列】SAP S/4 HANA的SMARTFORMS如何切换到非word编辑器

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP S/4 HANA的SMA ...

  10. anaconda3,将python版本回退(python3.7---python3.5)

    2019/6 安装anaconda3时,安装了默认的最新版本,但是由于不能兼容tensorflow,我又配置了一个python3.5的环境: 可惜这里真的不晓得咋回事,在python3.5中进入jup ...