1、注释

　　　　注解：CSS中注释/*这里是注释的文字*/   HTML中注释<!--这里是注释的文字-->

　　2、外部式css样式，写在单独的一个文件中

　　　　注解：

  1. 外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
  2.  
  3. <link href="base.css" rel="stylesheet" type="text/css" />
  4.  
  5. 注意：
  6.  
  7. 、css样式文件名称以有意义的英文字母命名，如 main.css。
  8.  
  9. 、rel="stylesheet" type="text/css" 是固定写法不可修改。
  10.  
  11. 、<link>标签位置一般写在<head>标签之内。

　　

　　3、类选择器、ID选择器

　　注解：

　　　　1）、类选择器

  1. 类选择器在css样式编码中是最常用到的，如右侧代码编辑器中的代码:可以实现为“胆小如鼠”、“勇气”字体设置为红色。
  2.  
  3. 语法：
  4.  
  5. .类选器名称{css样式代码;}
  6. 注意：
  7.  
  8. 、英文圆点开头
  9.  
  10. 、其中类选器名称可以任意起名（但不要起中文噢）
  11.  
  12. 使用方法：
  13.  
  14. 第一步：使用合适的标签把要修饰的内容标记起来，如下：
  15.  
  16. <span>胆小如鼠</span>
  17. 第二步：使用class="类选择器名称"为标签设置一个类，如下：
  18.  
  19. <span class="stress">胆小如鼠</span>
  20. 第三步：设置类选器css样式，如下：
  21.  
  22. .stress{color:red;}/*类前面要加入一个英文圆点*/

　　　　2)、ID选择器

　　　　为标签设置id="ID名称"，而不是class="类名称"。ID选择符的前面是井号（#）号，而不是英文圆点（.）。

　　　　

　　　　什么时候用id，什么时候用class?
　　　　W3C标准这样规定的，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。这样，一般网站分为头，体，脚部分，因为考虑到它们在同一个页面只会出现一次，所以用id，其他的，比如说你定义了一个颜色为red的class，在同一个页面也许要多次用到，就用class定义。另外，当页面中用到js或者要动态调用对象的时候，要用到id，所以要根据自己的情况运用。自己的语言

　　　　id选择器和class选择器的区别

　　　　ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。

　　　　可以理解为:id是身份证，是唯一的，不可能一个人有两个身份证 也不可能两个身份证代表一个人。

　　　　　　　　　 class是名字，一个人(样式)可以有多个名字，多个名字可以代表一个人

　　　　

　　3、子选择器、包含(后代)选择器

　　　　">"只需要作用于“儿子”，而“空格”则是子子孙孙都被作用了

  1. 请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
  2.  
  3. 总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

　　

　　4、通用选择器

　　　　注解：通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：

　　

　　5、分组选择器

　　　　注解：

　　　　　　　　当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：

  1. 　　　　　　　　　　　　h1,span{color:red;}

　　　　　　　　它相当于下面两行代码：

  1. 　　　　　　　　　　　　h1{color:red;}
  2. 　　　　　　　　　　　　span{color:red;}

　　

　　6、CSS中元素的分类

　　　　注解：1、块状元素                       ,<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

　　　　　　　　  块状元素都自带换行效果；

　　　　　　　　  特点：

　　　　　　　　　　①、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

　　　　　　　　　　②、元素的高度、宽度、行高以及顶和底边距都可设置。

　　　　　　　　　　③、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

　　　　　　　　　如何将一个元素设置为块状元素？

　　　　　　　　　　①、设置display:block就是将元素显示为块级元素    --->     a{display:block;}

　　　　　　　　　　

　　　　　　　2、内联元素(又叫行内元素)    ,<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

　　　　　　  　　内联元素都是定义行内小区域且不换行，但如果没有内容就没有意义，不占空间；

　　　　　　　　　特点：

　　　　　　　　　　①、和其他元素都在一行上；

　　　　　　　　　　②、元素的高度、宽度及顶部和底部边距不可设置；

　　　　　　　　　　③、元素的宽度就是它包含的文字或图片的宽度，不可改变。

　　　　　　　　  如何将一个元素设置为块状元素？

　　　　　　　　　　①、通过代码display:inline将元素设置为内联元素    ---->     div{display:inline;}

　　　　　　   3、内联块状元素。              ,<img>、<input>

　　　　　　　　　内联块状元素除了不换行，即使没有内容也会占空间。

　　　　　　　　　就是同时具备内联元素、块状元素的特点

　　　　　　　　　特点：

　　　　　　　　　　①、和其他元素都在一行上；

　　　　　　　　　　②、元素的高度、宽度、行高以及顶和底边距都可设置。　　　　　

　　　　　　　　  如何将一个元素设置为内联块状元素？

　　　　　　　　　　①、代码display:inline-block就是将元素设置为内联块状元素  -->      a{display:inline-block;}

　　7、盒模型：边框

　　　　注解：盒子模型的边框就是围绕着内容及补白的线，这条线可以设置它的粗细、样式和颜色(边框三个属性)。

　　　　　　　　设置方法：

　　　　　　　①、div{    border:2px solid red; }

　　　　　　　②、div{    border-width:2px; border-style:solid;  border-color:red; }

  1. 注意：
  2. 、border-style（边框样式）常见样式有：
  3. dashed（虚线）| dotted（点线）| solid（实线）。
  4. 、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
  5. border-color:#;//前面的井号不要忘掉。
  6. 、border-width（边框宽度）中的宽度也可以设置为：
  7. thin | medium | thick（但不是很常用），最常还是用象素（px）。

　　　　　　当border:的时候是给边框四条线都设置样式

　　　　　　如果给规定的一边的边框设置:

  1. div{border-bottom:1px solid red;}
  2. 同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
  3. border-top:1px solid red;
  4. border-right:1px solid red;
  5. border-left:1px solid red;

　　8、盒模型：填充

  1. 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
  2.  
  3. div{padding:20px 10px 15px 30px;}
  4. 顺序一定不要搞混。可以分开写上面代码：
  5.  
  6. div{
  7.    padding-top:20px;
  8.    padding-right:10px;
  9.    padding-bottom:15px;
  10.    padding-left:30px;
  11. }
  12. 如果上、右、下、左的填充都为10px;可以这么写
  13.  
  14. div{padding:10px;}
  15. 如果上下填充一样为10px，左右一样为20px，可以这么写：
  16.  
  17. div{padding:10px 20px;}

　　

　　9、盒模型：边界

  1. 盒模型--边界
  2. 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
  3.  
  4. div{margin:20px 10px 15px 30px;}
  5. 也可以分开写：
  6.  
  7. div{
  8.    margin-top:20px;
  9.    margin-right:10px;
  10.    margin-bottom:15px;
  11.    margin-left:30px;
  12. }
  13. 如果上右下左的边界都为10px;可以这么写：
  14.  
  15. div{ margin:10px;}
  16. 如果上下边界一样为10px，左右一样为20px，可以这么写：
  17.  
  18. div{ margin:10px 20px;}
  19. 总结一下：padding和margin的区别，padding在边框里，margin在边框外。

　　

　　10、CSS 布局模型

　　　　注解：CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
　　　　　　在网页中，元素有三种布局模型：
　　　　　　　　①、流动模型（Flow）
　　　　　　　　②、浮动模型 (Float)
　　　　　　　　③、层模型（Layer）

　　

　　　　①、流动模型(Flow)，默认的网页布局模式

　　　　　　特点：

　　　　　　　　①、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，

　　　　　　　　　　因为在默认状态下，块状元素的宽度都为100%。

　　　　　　　　　　实际上，块状元素都会以行的形式占据位置。

　　　　　　　　②、内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）

　　　　　　

　　　　②、浮动模型(Float)

  1. div{
  2.     width:200px;
  3.     height:200px;
  4.     border:2px red solid;
  5. }
  6. #div1{float:left;}           //id为div1的模块在左边
  7. #div2{float:right;} 　　　　　//id为div2的模块在右边

　　　　

　　　　③、层模型(Layer)

　　　　　　层模型有三种形式：

　　　　　　1、绝对定位(position: absolute)

  1. 下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
  2.  
  3. div{
  4.     width:200px;
  5.     height:200px;
  6.     border:2px red solid;
  7.     position:absolute;
  8.     left:100px;
  9.     top:50px;
  10. }
  11. <div id="div1"></div>

　　　　　　2、相对定位(position: relative)

  1. 如下代码实现相对于以前位置向下移动50px，向右移动100px;
  2. #div1{
  3.     width:200px;
  4.     height:200px;
  5.     border:2px red solid;
  6.     position:relative;
  7.     left:100px;
  8.     top:50px;
  9. }
  10. <div id="div1"></div>

　　　　　　3、固定定位(position: fixed)

  1. fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。
    由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，
    或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，
    这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
  2. #div1{
  3.     width:200px;
  4.     height:200px;
  5.     border:2px red solid;
  6.     position:fixed;
  7.     left:100px;
  8.     top:50px;
  9. }

　　　　　　4、相对绝对混合使用

  1. #box1{
  2.     width:200px;
  3.     height:200px;
  4.     position:relative;
  5.  
  6. }
  7. #box2{
  8.      position:absolute;
  9.     top:20px;
  10.     left:30px;
  11.  
  12. }
  13.  
  14. <div id="box1">
  15.     <div id="box2">相对参照元素进行定位</div>
  16. </div>

　　11、盒模型代码缩写

  1. 盒模型外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
  2.  
  3. margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
  4. 通常有下面三种缩写方法:
  5.  
  6. 、如果top、right、bottom、left的值相同，如下面代码：
  7. margin:10px 10px 10px 10px;
  8. 可缩写为：
  9. margin:10px;
  10. 、如果top和bottom值相同、left和 right的值相同，如下面代码：
  11. margin:10px 20px 10px 20px;
  12. 可缩写为：
  13. margin:10px 20px;
  14. 、如果left和right的值相同，如下面代码：
  15. margin:10px 20px 30px 20px;
  16. 可缩写为：
  17. margin:10px 20px 30px;
  18. 注意：padding、border的缩写方法和margin是一致的。

　　

　　12：颜色值缩写

  1. 颜色值缩写
  2. 关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
  3. 例子1：
  4. p{color:#;}
  5. 可以缩写为：
  6. p{color: #;}
  7. 例子2：
  8. p{color: #;}
  9. 可以缩写为：
  10. p{color: #;}

　　13、字体缩写

  1. 网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
  2. body{
  3.     font-style:italic;
  4.     font-variant:small-caps;
  5.     font-weight:bold;
  6.     font-size:12px;
  7.     line-height:.5em;
  8.     font-family:"宋体",sans-serif;
  9. }
  10. 这么多行的代码其实可以缩写为一句：
  11. body{
  12.     font:italic  small-caps  bold  12px/.5em  "宋体",sans-serif;
  13. }
  14. 注意：
  15.  
  16. 、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
  17. 、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
  18. 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
  19. body{
  20.     font:12px/.5em  "宋体",sans-serif;
  21. }

　　14、颜色值

  1. 在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
  2.  
  3. 、英文命令颜色
  4. 前面几个小节中经常用到的就是这种设置方法：
  5. p{color:red;}
  6. 、RGB颜色
  7. 这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
  8. p{color:rgb(,,);}
  9. 每一项的值可以是 ~ 之间的整数，也可以是 %~% 的百分数。如：
  10. p{color:rgb(%,%,%);}
  11. 、十六进制颜色
  12. 这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 - 变成了十六进制 -ff。
  13. p{color:#00ffff;} 或者p{color:#0fa}

　　

　　15、长度值

  1. 长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
  2.  
  3. 、像素
  4.  
  5. 像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
  6.  
  7. 、em
  8. 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
  9. p{font-size:12px;text-indent:2em;}
  10. 上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
  11. 下面注意一个特殊情况：
  12.  
  13. 但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
  14. html:
  15. <p>以这个<span>例子</span>为例。</p>
  16. css:
  17. p{font-size:14px}
  18. span{font-size:.8em;}
  19. 结果 span 中的字体“例子”字体大小就为 .2px（ * 0.8 = .2px）。
  20.  
  21. 、百分比
  22. p{font-size:12px;line-height:%}
  23. 设置行高（行间距）为字体的130%（ * 1.3 = .6px）。

　　16、水平居中设置-定宽块状元素

  1. 满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
  2.  
  3. html代码：
  4. <body>
  5.   <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
  6. </body>
  7.  
  8. css代码：
  9. <style>
  10. div{
  11.     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
  12.     width:200px;/*定宽*/
  13.     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
  14. }
  15.  
  16. </style>
  17. 也可以写成：
  18.  
  19. margin-left:auto;
  20. margin-right:auto;

　　

　　17、水平居中总结-不定宽块状元素方法

　　不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

　　　　①、加入 table 标签

    1. 第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
    2.  
    3. 第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
    4.  
    5. 举例如下：
    6.  
    7. html代码：
    8.  
    9. <div>
    10.  <table>
    11.   <tbody>
    12.     <tr><td>
    13.     <ul>
    14.         <li>我是第一行文本</li>
    15.         <li>我是第二行文本</li>
    16.         <li>我是第三行文本</li>
    17.     </ul>
    18.     </td></tr>
    19.   </tbody>
    20.  </table>
    21. </div>
    22. css代码：
    23.  
    24. <style>
    25. table{
    26.     border:1px solid;
    27.     margin: auto;
    28. }
    29. </style>

    　　②、设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

  1. 改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
  2.  
  3. html代码：
  4.  
  5. <body>
  6. <div class="container">
  7.     <ul>
  8.         <li><a href="#"></a></li>
  9.         <li><a href="#"></a></li>
  10.         <li><a href="#"></a></li>
  11.     </ul>
  12. </div>
  13. </body>
  14. css代码：
  15.  
  16. <style>
  17. .container{
  18.     text-align:center;
  19. }
  20. /* margin:0;padding:0（消除文本与div边框之间的间隙）*/
  21. .container ul{
  22.     list-style:none;
  23.     margin:;
  24.     padding:;
  25.     display:inline;
  26. }
  27. /* margin-right:8px（设置li文本之间的间隔）*/
  28. .container li{
  29.     margin-right:8px;
  30.     display:inline;
  31. }
  32. </style>
  33. 这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。

　　　　③、设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

　　　　　　

　　　

CSS基本知识(慕课网)的更多相关文章

  1. CSS定位（慕课网学习笔记）

    定位模型 static自然模型 relative相对定位模型 absolute绝对定位模型 fixed固定定位模型 sticky磁铁定位模型 possition之static(默认的设置)(静态定位. ...

  2. 手机端web学习基础--from慕课网

    web知识零零散散的知道一些,但总感觉不够系统,遇到问题不知道如何解决,因此特此来系统的学习一下web前端的知识.从慕课网的web基础看起.下面学习http://www.imooc.com/learn ...

  3. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  4. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  5. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  6. JavaScript进阶--慕课网学习笔记

                         JAVASCRIPT—进阶篇 给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...

  7. CSS基础知识解析

    一.基础知识 1.1 CSS组成 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝 ...

  8. react入门——慕课网笔记

    一. jsx 1. 被称为语法糖:糖衣语法,计算机语言中添加的某种语法,对语言的功能没有影响,更方便程序员使用,增加程序的可读性,降低出错的可能性 类似的还有(coffeescript,typescr ...

  9. 以慕课网日志分析为例-进入大数据Spark SQL的世界

    下载地址.请联系群主 第1章 初探大数据 本章将介绍为什么要学习大数据.如何学好大数据.如何快速转型大数据岗位.本项目实战课程的内容安排.本项目实战课程的前置内容介绍.开发环境介绍.同时为大家介绍项目 ...

随机推荐

  1. 生成多个git ssh密钥

    如果你已经有了一套名为 id_rsa 的公秘钥,将要生成另外一个公钥,比如 aysee ,你也可以使用任何你喜欢的名字. 步骤如下: 1.生成一个新的自定义名称的公钥: ssh-keygen -t r ...

  2. JSP标准标签库：JSTL

    JSTL(JSP Standard Tag Library),JSP标准标签库,可以嵌入在jsp页面中使用标签的形式完成业务逻辑等功能. jstl出现的目的同el一样也是要代替jsp页面中的脚本代码. ...

  3. git简易使用

    git的安装以及GitHub的注册这里就不说了,这里直接从上传开始. 1. 登录github进入settings 2. 添加SSH KEY,添加方式查看第3步 3. 由于本地Git仓库和Github仓 ...

  4. 使用NetTcpBinding，WCF服务未能被激活

    我的WCF采用的是NetTcpBinding,使用时就会报错,换成BasicHttpBinding,就一切正常 The requested service, 'net.tcp://wcf.xxxxx. ...

  5. Linux 进程一直占用单核CPU分析

    pidstat 1信息

  6. Egg中使用egg-mongoose和常用的Mongoose 方法

    Mongoose Mongoose就是一套操作MongoDB数据库的接口,而Egg中有对应的插件egg-mongoose. 安装 $ npm install egg-mongoose --save 配 ...

  7. Spring Boot 1.5.10 发布：修复重要安全漏洞！！！

    2018/01/31,Spring Boot团队发布了Spring Boot 1.5.10. Maven: <parent> <groupId>org.springframew ...

  8. Base 64 加密、解密

    1.写一个公共类 package com.boyutec.oss.sys.utils; import java.io.UnsupportedEncodingException; import java ...

  9. IOS返回go(-1)

    IOS8和9,在用go(-1)返回的时候,会同时加载js.可能会造成js加载顺序出错,或者值被覆盖的情况,我们可以用setTimeout(function(){XXX代码},100);延时加载.

  10. oracle新建用户并授权步凑

    #首先创建表空间.存放路径.设置表空间大小 create tablespace tbs_ams datafile '+DATA/pdorcl1/datafile/ams1.dbf' size 1024 ...