HTML+CSS从0开始（3）

入坑忘了第几课：CSS

CSS全称为，层叠样式表（Cascading Style Sheets），它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
css样式由选择符和声明组成，而声明又有属性和值组成p { color:blue},其中p为选择符（又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响），color为属性，blue为值。
css阳时代吗插入的形式有三种：内联式，嵌入式和外部式
1. 内联式就是把css代码直接写在现在有的html标签中
```
<p style="color:red">这里文字是红色。</p>
```
2. 嵌入式css样式，就是写在当前的文件中
```
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<style type="text/css">
span{
color:red;
}
</style>
</head>
<body>
   <p><span>hello word</span></p>
</body>
</html>
```
3. 外部式样式就是讲css代码写在外部的.css文件，然后在本文件中引入
```
#inedx.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p>hello word</p>
</body>
</html>
```
```
#style.css


span{
   color:red;
}
```
  <link href="xx.css" rel="stylesheet" type="text/css" />固定写法,三种方法的优先级为内联式>嵌入式>外部式
4. 选择器
```
body{
    font-size:12px;
    color:red;	
}

/*body就是选择器*/
```
5. 标签选择器
```
p{color:red}
```
6. 类选择器
```
.style_name
{
    color:red;
}


<p><span class="style_name">hello word</span></p>
```
7. id选择器
```
#id_name{
    color:red;
}

<p><span id="id_name"> hello word </span></p>
```
8. id选择器和类选择器的区别
  1. 相同点：可以应用于任何元素
  2. 不同点：
    1. id选择器在文档中只能使用一次，类选择器可以使用多次
    2. 可以使用类选择器词列表方法为一个元素同时设置多个样式。
```
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课...</p>
```
      id选择器则不能使用id="id1 id2",这样是错误的
9. 子选择器
```
.food>li{border:1px solid red;}


/*添加边框样式（粗细为1px， 颜色为红色的实线）
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。*/
```
10. 包含（后代）选择器
```
.first  span{color:red;}

/*包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。
*/
```
  选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择,>作用于元素的第一代后代，空格作用于元素的所有后代
11. 通用选择器 *{color:red},作用于html中所有的标签元素
12. 伪类选择器，伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色a:hover{color:red}。关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
13. 分组选择符，当想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）例如
```
h1,span{color:red;}

相当于

h1{color:red;}
span{color:red;}
```
14. 继承，css样式是有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。但有一些样式的。
15. 权值，如果多个选择器都匹配到了一个标签，那么根据权值来选择使用哪种选择器，标签的权值为1，类选择器的权值为10，id选择器的权值为100, 继承也有权值但是极低，有的文献上说继承的权值为0.1
```
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
```
  当权值一样的时候，样式取决于出现的先后顺序决定，后出现的样式会覆盖前面出现的样式
16. 重要性，如果有时候为某些样式设置最高权值的样式，可以在样式后面加上 !important
```
p{color:red!important;}
```
  当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
17. 文字排版
  1. 字体：font-family:"Microsoft Yahei", 默认使用微软雅黑，因为比较安全又美观的在客户显示出来
  2. 字号：font-size:20px
  3. 字色：color:red
  4. 粗体：font-weight:bold，也可以输入像素，控制字体的粗细
  5. 斜体：font-style:italic
  6. 下划线：text-decoration:underline
  7. 删除线：text-decoration:line-throught
  8. 缩进：text-indent:2em 可以想象为em文字大小的倍数
  9. 行间距、行高：line-heigh
  10. 文字间距、字母间距：letter-spacing
  11. 单词间距：word-spacing
  12. 对齐：text-align:center

元素分类

html中标签元素大体分为三类：块状元素、内联元素、内联块元素
块元素：
1. 常见的块元素：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
2. display:block将元素显示为块级元素，比如a{display:block}将内联元素a转换为块级元素
3. 块级元素的特点
  1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
  2. 元素的高度、宽度、行高以及顶和底边距都可设置。
  3. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素：
1. 常见的内敛元素：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
2. display:inline,将元素设置为内敛元素，比如div{display:inline}将块元素设置为内联元素
3. 内联元素的特点：
  1. 和其他元素都在一行上
  2. 元素的高度、宽度及顶部和底部边距不可设置
  3. 元素的宽度就是它包含的文字或图片的宽度，不可改变
内联块元素：
1. 内敛块元素：<img>、<input>
2. display:inline-block,将元素设置为内联块元素,内联块元素同时具备内联元素，块状元素的特点
3. 内联块元素的特点:
  1. 和其他元素都在一行上
  2. 元素的高度、宽度、行高以及顶和底边距都可设置

盒模型

盒子模型特征：
1. padding 内填充
2. margin 外边距
3. border 边框
4. 内填充、外边距、边框都有四个方向：top、right、left、bottom
5. 盒子模型有<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>等常见的块模型
边框
1. 边框就是盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
2. border-style边框样式常见有dashed(虚线) | dotted(点线) | solid(实线)
```
div{
    border:2px  solid  red;
}

/*等同于*/

div{
    border-width:2px;
    border-style:solid;
    border-color:red;
}
```
填充padding,指元素内容与边框之间的距离
边界margin,指元素与其他元素之间的距离

CSS布局模型

网页中有三种布局模型：流动模型flow、浮动模型float、层模型layer
流动模型flow:
1. 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%
2. 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型float:

块状元素都是独占一行的，如果想要两个快状元素并排显示，可以使用浮动模型

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

层模型有三种形式：绝对定位（position:absolute）、相对定位（position:relative）、固定定位（position:fixed）
1. 绝对定位（position:absolute）：
  1. position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口
  2. ```
  div{
      width:200px;
      height:200px;
      border:2px red solid;
      position:absolute;
      left:100px;
      top:50px;
  }
  <div id="div1"></div>
```
2. 相对定位（position:relative）
  1. 设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
  2. ```
  #div1{
      width:200px;
      height:200px;
      border:2px red solid;
      position:relative;
      left:100px;
      top:50px;
  }
  
  <div id="div1"></div>
```
3. 固定定位（position:fixed）
  1. 表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变
  2. ```
  #div1{
      width:200px;
      height:200px;
      border:2px red solid;
      position:fixed;
      left:100px;
      top:50px;
  }
  <p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>
  ....
```
4. relative与absolute组合使用达到相对于某一个元素定位的功能
```
//html

<div id="box1">
    <div id="box2">相对参照元素进行定位</div>
</div>

//css

#box1{
    width:200px;
    height:200px;
    position:relative;   //参照定位元素设置成相对定位     
}
#box2{
    position:absolute;        //相对参照元素进行定位
    top:20px;
    left:30px;         
}
```

基础补充

长度：常用px、em、%,这三个都是相对单位
1. 像素：像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位
2. em: 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
水平居中：分类行内元素、块元素，块元素又分为定宽块元素和不定宽块元素
1. 行内元素（内联元素）居中，在被剧中的元素的父类中加上text-align:center
2. 块元素：在块元素中text-align:center就失效了
  1. 定宽块元素：块状元素的宽度width为固定值。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中
```
<body>
  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
```
```
<style>
div{
    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
    
    width:200px;/*定宽*/
    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

    /*
    margin-left:auto;
    margin-right:auto;
    */
}
```
  2. 不定宽元素：块状元素的宽度width不固定，不定宽元素有三种居中方法
    1. 加入 table 标签
    2. 设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
    3. 设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

HTML+CSS从0开始（3）

入坑忘了第几课：CSS

元素分类

盒模型

CSS布局模型

基础补充

猜你喜欢