一、What？什么是CSS？
1. CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。
2. CSS 是一种标记语言，属于浏览器解释型语言，可以直接由浏览器执行，不需要编译。
3. CSS 是用来表现HTML或XML的标记语言。
二、Why？为什么要使用CSS?
1.内容与表现分离，有了CSS，网页的内容(XHMTL)与表现就可以分开了。
2.使用CSS可以减少网页的代码量，增加网页的浏览速度。
三、How？如何使用CSS？
有三种方法可以在站点网页上使用样式表：
1. 外联式Linking（也叫外部样式）：将网页链接到外部样式表。
2. 嵌入式Embedding（也叫内页样式）：在网页上创建嵌入的样式表。
3. 内联式Inline（也叫行内样式）：应用内嵌样式到各个网页元素。
其中，优先级：内联式 > 嵌入式 > 外联式
四、CSS基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明
p为选择器，通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
声明总是以分号(;)结束，并以大括号({})括起来。
为了让CSS可读性更强，你可以每行只描述一个属性:
五、CSS 颜色值的写法
在描述颜色的时候，除了使用英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：
p { color: #ff0000; }
为了节约字节，我们可以使用 CSS 的缩写形式：
p { color: #f00; }
我们还可以通过两种方法使用 RGB 值：
p { color: rgb(255,0,0); } p { color: rgb(100%,0%,0%); }
提示：当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位。
六、CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下:
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1{
text-align:center;
color:red;
}
ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
七、class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
.center {
text-align:center;
}
你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center {text-align:center;}
类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。
当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：
<head><link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。
外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子：
hr {color:sienna;}p {margin-left:20px;}body {background-image:url("/images/back40.gif");}
当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:
<head><style>hr {color:sienna;}p {margin-left:20px;}
body {background-image:url("images/back40.gif");}</style></head>
由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：
<p style="color:sienna;margin-left:20px">这是一个段落。</p>
如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
例如，外部样式表拥有针对 h3 选择器的三个属性：
h3{ color:red; text-align:left; font-size:8pt;}
而内部样式表拥有针对 h3 选择器的两个属性：
h3{ text-align:right; font-size:20pt;}
假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是：
color:red;text-align:right;font-size:20pt;
即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
一般情况下，优先级如下：
内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式
九、常用文字属性
（1） 字体属性
字体属性是用来设定“文字字形”的外观表现，主要包括：
颜色， 字体名称， 大小， 是否斜体（字体样式）， 是否粗体。
color， font-family， font-size， font-style font-weight
常用字体属性如下所示：
| 属性名称 | 含义与说明 | 举例 | 其他 |
|---|---|---|---|
| color | 文字的颜色，又称为“前景色” | color: red; color:#ff0000; color:rgb(255, 50, 100) color:rgba(250,0,0,0.7) | 颜色值可以有多种写法 |
| font-family | 文字的字体，比如宋体，黑体，微软雅黑，隶书。 | font-family: 宋体； font-family: 微软雅黑，宋体； font-family: “Times New Roman”; | 可以设定多个值，浏览器优先使用前面的，没有再依次找后面的，或使用内部字体。 |
| font-size | 文字的大小 | font-size: 14px; | px是长度单位，表示“像素” |
| font-style | 文字的样式（决定字体是正体还是斜体） | font-style: itatic; font-style: normal;（默认值） | normal（正常字体，默认值）；itatic（斜体） |
| font-weight | 文字的粗细度 | font-weight: bold; font-weight:bolder; | 有4个值可用： normal, bold, bolder, lighter |
| font | 上述所有文字属性的综合属性。 | font:red 宋体 14px italic bold; | 属性值依次写出，空格隔开，不分顺序 |
（2） 文本属性
文本属性通常指的是作为文字内容的整体性特性（而不是具体文字的表现特性）。
常用属性有：
| 属性名称 | 含义 | 举例 | 其他说明 |
|---|---|---|---|
| text-align | 一段文字的对齐方式 | text-align: center; | 可用值：left， center， right |
| text-decoration | 一段文字的”修饰线” | text-decoration：underline | 可用值：underline（下划线），overline（上划线），line-through（中划线） |
| text-indent | 设置一段文本的“首行缩进”的宽度（距离） | text-indent: 24px; | px是长度单位，表示“像素” |
| line-height | 设定文字的“行高” | line-height: 30px; line-height: 2em; | em是长度单位，表示“字高” |
| letter-spacing | 设定文字的“字符间距” | letter-spacing: 3px; | 注意：中文的每个字都算一个字符 |
| word-spacing | 设定文字的“单词间距” | word-spacing: 15px; | 注意：单词通常是以“空格”隔开的。因此，连续的中文即使很长也只能算一个单词。 |
十、CSS行高属性
https://blog.csdn.net/it_queen/article/details/54729949
1.line-height可以被定义为：body{line-height:normal;}
2.line-height可以被定义为：body{line-height:inherit;}
3.line-height可以使用一个百分比的值body{line-height:120%;}
4.line-height可以被定义为一个长度值(px,em等) body{line-height:25px;}
5.line-height也可以被定义为纯数字， body{line-height:1.2}
6.百分比：字体大小 x 百分比= 计算出来的值会被层叠下的元素所继承 line-height不会随着相关的font-size做相应的比例缩放。
7.长度：20px 会被后代元素所继承 line-height不会随着相关的font-size做相应的比例缩放
8.normal:1.2 line-height会随着相关的font-size做相应的比例缩放
9.纯数字：line-height会随着相关的font-size做相应的比例缩放
一般来说，设置行高的值为 纯数字 是最理想的方式，因为其会随着相应的font-size做相应的比例缩放
十一、CSS盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
内边距（padding）： 内容与边框之间的距离
外边距（margin）: 盒子与盒子之间的距离
IE盒子模型
标准盒子模型
-
padding是内容和其边框线之间的空间， margin是一个元素与另一个元素之间的空白。
-
width和height默认指内容的宽度和高度。
-
box-sizing: border-box |padding-box|content-box(默认); //(Firefox: -moz-box-sizing Safari或
chrome或android:-webkit-box-sizing ) -ms- IE -
background-color 用颜色填充边框内部的空间，包括padding部分和虚线边框。
在标准的盒子模型中，width指content部分的宽度，在IE盒子模型中，width表示content+padding+border这三个部分的宽度
-
标准盒子模型的盒子宽度：左右margin+左右border+左右padding+width
-
IE盒子模型的盒子宽度：左右margin+width
选择标准盒子模型方法：在html模板中加doctype声明。
<!DOCTYPE html>-
1
box-sizing属性，box-sizing:content-box;表示标准的盒子模型，
box-sizing：border-box表示IE盒子模型。
默认的情况下是标准盒子模型。
十二、CSS内外边距属性
一，内边距属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>47-内边距属性.html</title>
<style>
div{
width: 98px;
height: 90px;
border:solid;
}
.box1{
padding-top: 20px;
}
.box2{
padding-left: 20px;
}
.box3{
padding-right: 100px;
}
.box4{
padding-bottom: 50px;
}
.box5{
padding: 20px 50px 100px 200px;
}
</style>
</head>
<body>
<!--
1,什么是内边距
边框和内容之间的距离
2,格式
(1),不连写
padding-top
padding-bottom
padding-left
padding-right
(2),连写
padding: 上 右 下 左
可以省略取值
-->
<div class="box1">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box2">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box3">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box4">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
<hr>
<div class="box5">我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字</div>
</body>
</html>
二，外边距属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>48-外边距属性.html</title>
<style>
span{
/* span 是行内元素 不能设置宽高 要设置需要转换 */
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 50px;
border: 1px solid #000;
}
.box1{
/*margin-top: 20px;
margin-right: 40px;
margin-bottom: 80px;
margin-left: 160px;*/
margin: 20px 40px 80px 160px;
}
</style>
</head>
<body>
<!--
1,外边距
标签和标签之间的距离
2,格式
(1),连写
margin:上 右 下 左;
(2),非连写
margin-top:;
margin-right:;
margin-bottom:;
margin-left:;
3,注意
-->
<span class="box1">我是span</span><span class="box2">我是span</span><span class="box3">我是span</span>
<div class="box"></div>
</body>
</html>三，外边距合并的特殊之处
外边距设置，在水平方向上的两个标签上都相向设置，那么就会将两个外边距的距离叠加在一起；
在在垂直方向上的两个标签上都相向设置，那么就会有一个比较大的外边距代替两个外边距，不会叠加，只会显示一个比较大外边距。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>49-外边距的合并现象.html</title>
<style>
span{
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid #000;
}
div{
height: 100px;
border: 1px solid #000;
}
/* 设置右边距 */
.hezi1{
margin-right: 50px;
}
.hezi2{
margin-left: 100px;
}
.box1{
margin-bottom: 50px;
}
.box2{
margin-top: 150px;
}
</style>
</head>
<body>
<!--
在默认布局的垂直方向上,默认情况下外边距是不会叠加的,会出现合并现象,谁的外边距大就会听谁的
-->
<span class="hezi1">我是span</span><span class="hezi2">我是span</span>
<div class="box1">我是div</div>
<div class="box2">我是div</div>
</body>
</html>
扫一扫
187
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
