HTML+CSS基础课程学习笔记-第三章 CSS

来源：互联网发布：淘宝虚拟商品编辑：程序博客网时间：2024/04/28 02:51

最近在慕课网上自学前端，课程名：html+css基础课程课程地址：http://www.imooc.com/learn/9

现将笔记整理如下（第三部分）：

第三章 CSS：

基础知识：
1. 概述：全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
2. 使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等
3. 语法：
4. 讲解：
  1. 选择符：又称选择器，指明网页中要应用样式规则的元素。
  2. 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔。
5. 注意：
  1. 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号；
  2. 为了使用样式更加容易阅读，可以将每条代码写在一个新行内。
6. 注释：/*...注释内容...*/
CSS样式基础：
1. 内联式：把css代码直接写在现有的HTML标签中
  1. eg：<p style="color:red">这里文字是红色。</p>
2. 嵌入式：就是可以把css样式代码写在<style type="text/css"></style>标签之间
  1. eg：
```
<script type="text/css" >   span{color:red;}</script>
```
  2. 注意：嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
3. 外联式：就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内
  1. eg：<link href="base.css" rel="stylesheet" type="text/css" />
  2. 注意：
    1. css样式文件名称以有意义的英文字母命名，如 main.css。
    2. rel="stylesheet" type="text/css" 是固定写法不可修改。
    3. <link>标签位置一般写在<head>标签之内。
4. 三种方式的优先级顺序：
  1. 总体而言：内联式 > 嵌入式 > 外部式
  2. 但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
  3. 总结来说，就是--就近原则（离被设置元素越近优先级别越高）。
选择器：
1. 概论：指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。(详见基础知识语法图片)
2. 标签选择器：其实就是html代码中的标签
3. 类选择器：在css样式编码中是最常用到的
  1. 语法：.类选器名称{css样式代码;}
  2. 注意：
    1. 英文圆点开头
    2. 其中类选器名称可以任意起名（但不要起中文噢）
  3. 使用方法：
    1. 使用合适的标签把要修饰的内容标记起来，如下：<span>胆小如鼠</span>
    2. 使用class="类选择器名称"为标签设置一个类，如下：<span class="stress">胆小如鼠</span>
    3. 设置类选器css样式，如下： .stress{color:red;}/*类前面要加入一个英文圆点*/
4. ID选择器：
  1. 在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
    1. 为标签设置id="ID名称"，而不是class="类名称"。
    2. ID选择符的前面是井号（#）号，而不是英文圆点（.）。
  2. 与类选择器的相同点和区别：
    1. 相同点：可以应用于任何元素
    2. 区别：
      1. ID选择器只能在文档中使用一次：即不同的标签可以设置相同的class，但不能设置相同的ID；
      2. 可以使用类选择器词列表方法为一个元素同时设置多个样式：即可以写class="class1 class2 class3..." 从而设置多个样式，但只能写id=“ID名”。
5. 子选择器：
  1. 概念：即大于符号(>),用于选择指定标签元素的第一代子元素(注意是第一代，而不是第一个)
  2. 语法：.food>li{border:1px solid red;} (这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。)
6. 包含(后代)选择器：
  1. 概念：即加入空格,用于选择指定标签元素下的后辈元素。
  2. 语法：.first span{color:red;}
  3. 与子选择器区别：>作用于元素的第一代后代，空格作用于元素的所有后代。
7. 通用选择器：
  1. 概念：功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
  2. 语法：* {color:red;}
8. 伪类选择符：
  1. 概念：它允许给html不存在的标签（标签的某种状态）设置样式
  2. 语法：eg：a:hover{color:red;} (给html中一个标签元素的鼠标滑过的状态来设置字体颜色)
  3. 关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是a标签上使用：hover了（其实伪类选择符还有很多，尤其是css3中，但是因为不能兼容所有浏鉴器，本教程只是讲了这一种最常用的）。其实:hover可以放在任意的标签上，比如说p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是a:hover的组合。
9. 分组选择符：
  1. 概念：为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
  2. 语法：eg： h1 , span{color:red;} (h1、span标签同时设置字体颜色为红色)
CSS的继承、层叠和特殊性
1. 继承：
  1. 概念：继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代
  2. 注意：CSS有些样式有继承性 eg：color，而有些则没有 eg：border
2. 特殊性：
  1. 概念：当为同一个元素设置了不同的CSS样式代码时，浏览器根据元素的权值来判断使用哪种css样式
  2. 权值规则：
    1. 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
    2. eg：
    3. 注意：
      1. CSS样式代码的权值是累加的，如上述例子所示；
      2. 还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
3. 层叠：
  1. 概念：在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。即：后面的样式会覆盖前面的样式。
4. 重要性：
  1. 概念：使用!important为某些样式设置最高的权值
  2. eg：
  3. 注意：
    1. !important要写在分号的前面；
    2. 这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
CSS格式化排版：
1. 文字排版：
  1. 字体：font-family:"微软雅黑";
    1. 注意：
      1. 不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体
      2. 字体名字用英文比用中文兼容性更好一些，eg：Microsoft Yahei/微软雅黑
  2. 字号、颜色：font-size:12px ; color:#666 ;
  3. 粗体：font-weight:bold;
  4. 斜体：font-style:italic;
  5. 下划线：text-decoration:underline;
  6. 删除线：text-decoration:line-through;
2. 段落排版：
  1. 缩进：text-indent:2em;
    1. 注意：2em的意思就是文字的2倍大小。
  2. 行间距(行高)：line-height:1.5em;
  3. 字间距：
    1. 字母间距：letter-spacing：50px；
    2. 字间距：word-spacing：50px；
  4. 对齐：texe-align：center/left/right；(居中/居左/居右)
CSS盒模型：
1. 元素分类：
  1. 块状元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
  2. 内联元素(行内元素)：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
  3. 内联块状元素：<img>、<input>
2. 块状元素：
  1. 概念：在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素
  2. 设置display:block就是将元素显示为块级元素，从而使元素具有块状元素特点。
  3. 特点：
    1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
    2. 元素的高度、宽度、行高以及顶和底边距都可设置。
    3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
3. 内联元素：
  1. 概念：在html中，<span>、<a>、<label>、<input>、 <img>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
  2. 块状元素也可以通过代码display:inline将元素设置为内联元素，从页使用元素具有内联元素特点。
  3. 特点：
    1. 和其他元素都在一行上；
    2. 元素的高度、宽度、行高及顶部和底部边距不可设置；
    3. 元素的宽度就是它包含的文字或图片的宽度，不可改变。
4. 内联块状元素：
  1. 概念：就是同时具备内联元素、块状元素的特点，<img>、<input>标签就是这种内联块状标签。
  2. 代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)
  3. 特点：
    1. 和其他元素都在一行上；
    2. 元素的高度、宽度、行高以及顶和底边距都可设置；
5. 盒模型：
  1. 边框border：
    1. 概念：边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
    2. eg：
    3. 注意：
      1. border-style（边框样式）常见样式有：dashed（虚线）| dotted（点线）| solid（实线）。
      2. border-color（边框颜色）中的颜色可设置为十六进制颜色，如:border-color:#888;//前面的井号不要忘掉。
      3. border-width（边框宽度）中的宽度也可以设置为：thin | medium | thick（但不是很常用），最常还是用象素（px）。
    4. 设置单独的一边的边框：
  2. 宽度和高度：
    1. 概念：css内定义的宽（width）和高（height），指的是填充以里的内容范围
  3. 填充padding：
    1. 概念：元素内容与边框之间是可以设置距离的，称之为“填充”
    2. 注意：
      1. 填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}
      2. 顺序不能搞混，也可以分开写：
  4. 边界margin：
    1. 概念：元素与其它元素之间的距离可以使用边界（margin）来设置。
    2. 注意事项与padding相同；
    3. padding和margin的区别：padding在边框里，margin在边框外；
CSS布局模型：
1. 流动模型(Flow)：默认的网页布局模式
  1. 特征：
    1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。
    2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）；
2. 浮动模型(Float)：
  1. 设置元素浮动就可以实现让两个块状元素并排显示。任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。
  2. 语法：float：left；左对齐
  3. eg：
  4. 类似的可以设置右对齐：float：right；
3. 层模型(Layer)：
  1. 概念：层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。
  2. 绝对定位(position: absolute)：
    1. position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
    2. eg：
    3. 理解：绝对定位是相对于其前辈元素的相对位置定位，默认下就是body，也可以设置为对其父元素进行相对定位，见下面第5点；
  3. 相对定位(position: relative)：
    1. 概念：如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
    2. 相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
    3. 注意：所谓的偏移前的位置是最开始定位的位置，每次设置后相对的都是同一个初始位置；
    4. 理解：一定要注意相对定位所相对的是自己的初始位置，而非其前辈元素；
  4. 固定定位(position: fixed)：
    1. 概念：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
    2. 即相当于钉在视图的某个位置，下拉页面也不会变化；
    3. 理解：其固定的对象是视窗，比如很多页面的“返回顶部”按钮；
  5. Relative与Absolute组合使用：
    1. 概念：即让某个元素相对其前辈元素进行绝对定位(而直接的绝对定位是相对于body的)
    2. 规范：
      1. 参照定位的元素必须是相对定位元素的前辈元素：
      2. 参照定位的元素必须加入position:relative;
      3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
      4. 即：参照定位元素必须先进行相对定位，而后定位元素再绝对定位；
CSS代码缩写，以占用更少的宽带：
1. 盒模型代码简写，即外边距(margin)、内边距(padding)和边框(border)：
  1. 默认顺序：顺时针，即上右下左
  2. 如果top、right、bottom、left的值相同，可缩写为：margin:10px;
  3. 如果top和bottom值相同、left和 right的值相同，如下面代码：margin:10px 20px 10px 20px; 可缩写为：margin:10px 20px;
  4. 如果left和right的值相同，如下面代码：margin:10px 20px 30px 20px; 可缩写为：margin:10px 20px 30px;
  5. padding、border的缩写方法和margin是一致的。
2. 颜色值缩写：
  1. 当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
  2. eg：p{color: #336699;} 可以缩写为：p{color: #369;}
3. 字体缩写：
  1. eg：可以缩写成：
  2. 注意：
    1. 使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
    2. 在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

0 0