1. CSS初识

CSS(Cascading Style Sheets的缩写)

CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。而且还可以针对不同的浏览器设置不同的样式。、

1.1 CSS样式规则

使用CSS时，需要了解CSS样式规则，具体格式如下：

CSS规则主要由两个主要部分构成：选择器，以及一条或多条声明。

h1 {  /*选择器*/color: red; /*声明*/font-size: 14px;  /*声明*/
}

一般都由键值对形势出现

在上面的样式规则中：

选择器用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式。
属性和属性值之间以“键值对”的形式出现。
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
属性和属性值之间用英文“：”连接。
多个键值对之间使用英文“；”区分。

2. CSS引入方式

2.1 行内样式

直接在标签的属性中使用style声明，在style属性中添加css声明即可。

由于要将表现（样式）和内容（结构）混杂在一起，行内样式表会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

<p style="color: red;">买了很多的热狗！selfish</p>

直接在写在标签里面的样式，样式作用在标签上

2.2 内联样式

定义在head或body标签中,使用style标签.

当单个文档需要特殊的样式时，就应该使用内部样式表。

初学时常用内联样式

/*内部定义的style样式*/
<style type="text/css">h1 {background-color: deeppink;color: blue;}
</style>

2.3 外部样式表

定义在外部的css文件中，需要在head中引入相应的css文件

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用<link> 标签链接到样式表。

使用link来导入css文件：

/*关联外部的css样式文件*/
<link type="text/css" rel="stylesheet" href="../css/test.css" />

type:定义链接文档的类型，在这里需要指定为"text/css",表示链接的外部文件为css样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet"，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的url，可以是相对路径，也可以是绝对路径。

css文件中：定义CSS样式

h1{background-color: rosybrown;color: #0000FF;
}

三种样式的总结：

	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现结构与样式相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

3种样式表的优先级：

1、行内样式表 > 内部样式表 = 外部样式表

2、当内部样式表和外部样式表同时存在时，采用 就近原则 来使用样式

3. 文字属性

3.1 font-size：字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

tips:

现在网页中普遍使用14px+。

尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。

代码如下

<style>h1 {font-size: 40px;}h2 {font-size: 30px;}p {font-size: 14px;width: 2em}
</style><h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>

3.2 font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。例如将网页中所有段落文本的字体都设置为微软雅黑，可以使用如下CSS样式代码：

p {font-family:"微软雅黑";
}
/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体*/

我们经常使用微软雅黑 = Microsoft YaHei

常用技巧：

各种字体之间必须使用英文状态下的逗号“,”分隔。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。但如果多个英文单词则需要引号引起来，当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：font-family: Arial, "微软雅黑"; 。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family: "Times New Roman";。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

注：

在CSS中设置字体名称，是可以直接写中文的。但是在文件编码（GB2312、utf-8等）不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。

方案一：可以使用英文来替代，比如：font-family:"Microsoft Yahei"; 。

方案二：在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确解析的。比如：font-family:"\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。

在Unicode编码表中，中文的取值范围是\u4e00~\u9fa5

字体名称	英文名称	Unicode编码
宋体	Simsun	\5B8B\4F53
新宋体	NSimsun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

3.4 font-weight：字体粗细

字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。

<style type="text/css">p {font-weight: normal;}div {font-weight: bold;}span {font-weight: bolder;}
</style><p>这是normal的文本</p>
<div>这是bold的文本</div>
<span>这是bolder的文本</span>

我们常用：

数字 400 等价于 normal，而 700 等价于 bold

3.5 font-style：字体风格

字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

<!--
italic和oblique区别：
要搞清楚这个问题，首先要明白字体是怎么回事。一种字体有粗体、斜体、下划线、删除线等诸多属性。
但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用Italic，就没有效果了~这时候你就要用 Oblique.
可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！

CSS2.0官网解释：
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用 Oblique属性值来实现倾斜的文字效果.
-->

<style>p {font-style: normal;}     div {font-style: italic;}       span {font-style: oblique;}
</style><p>这是一个段落,正常。</p>
<div>这是一个段落,斜体。</div>
<span>这是一个段落,斜体。</span>

注：

平时我们很少给文字加斜体，反而是给斜体标签（i，em）改为普通模式。

3.6 font综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法如下：

注意：

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。

<style type="text/css">p{font: italic bold 12px/30px Georgia, serif;}
</style><p>这是一个设置了字体样式的文本</p>

4.文本样式

4.1 color 文本颜色

color属性用于指定文本的颜色，有3种表现形式。

color-name：使用颜色名称，如：red, transparent
hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15
rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。a的值使用小数表示
rgba：在rgb上多了一给a，表示透明度，取值0~1 完全透明~完全不透明
CSS3的hsl：使用色相、饱和度、亮度来定义颜色。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
- 色相（H）基本属性，就是平常所说的颜色名称，如红色等，取值： (0 ~360) ，0 / 360)为红色, 120 为绿色, 240 为蓝色
- 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值： 0-100% 。
- 亮度（L）增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化，取值：0-100%。

<style type="text/css">h1 {color: red;}h2 {color: #00ff00;}h3 {color: rgb(0, 0, 255);}h3 {color: ;}
</style><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>

4.2 text-align 文本对齐方式

text-align用于指定元素文本的水平对齐方式，取值有left、right、center、justify（两端对齐文本）

<style type="text/css">h1 {text-align: left;    /*左对齐*/}h2 {text-align: center; /*居中对齐*/}h3 {text-align: right; /*右对齐*/}p {text-align: justify; /*分散对齐，主要针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化*/}
</style><h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3><p>当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>

4.3 text-decoration 文本修饰

text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

none：默认，定义标准的文本，没有任何修饰。
underline：定义在文本下方的一条线
overline：定义在文本上方的一条线
line-through：定义穿过文本的一条线

<style type="text/css">h1 {text-decoration: none;}h2 {text-decoration: overline;}       h3 {text-decoration: line-through;}     h4 {text-decoration: underline;}h5 {/* 文字闪烁，只在火狐中支持 */text-decoration: blink;}
</style>

注：

我们经常在a标签上作用text-decoration

4.4 text-transform 文本转换

text-transform用于转换文本的大小写（主要用于英文），其取值有：

none：默认
capitalize：文本中每个单词以大写字母开头
uppercase：所有单词字母都大写
lowercase：所有单词字母都小写

<style>h1 {text-transform:uppercase;}h2 {text-transform:lowercase;}h3 {text-transform:capitalize;}
</style>

4.5 text-indent 文本缩进

text-indent 属性规定文本块中首行文本的缩进。取值有：

数值：表示像素值
百分比：基于父元素宽度的百分比的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。

<style>p {text-indent:50px;}
</style><!-- 小技巧： 首行缩进2字符使用 2em -->

4.6 text-shadow 文本阴影

text-shadow用于设置文本的阴影效果。语法格式是

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值
v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值
blur：可选。模糊的距离。
color：可选。阴影的颜色。

<style type="text/css">h1 {text-shadow: 2px 2px #FF0000;}   h2 {text-shadow: 2px 2px 8px #FF0000;}      h3 {color: white;text-shadow: 2px 2px 4px #000000;}     h4 {text-shadow: 0 0 3px #FF0000;}
</style>

4.7 direction 文本方向

direction 用于指定文本的方向。取值如下：

ltr：默认的，文本方向从左到右 left to right

rtl：文本方向从右到左。right to left

<style type="text/css">p {direction: ltr;}      div {direction: rtl;unicode-bidi: bidi-override;}
</style>

4.8 letter-spacing 字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字

<style>h1 {letter-spacing:2px;}h2 {letter-spacing:-3px;}
</style>

4..9 word-spacing 字间距

word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落

<style>p { word-spacing:30px;}
</style>

4.10 line-height 行高

line-height 用于设置文字行与文字行之间的距离。取值如下：

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length：设置固定的行间距 px em 。
%：基于当前字体尺寸的百分比行间距。

注意：一般情况下，行距比字号大7 8像素即可。

<style>span {line-height:2;}p {line-height:20px;}div {line-height:100%;}
</style>

使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本

单行文字垂直居中的原理

5 基本选择器

5.1 标签选择器（元素选择器）

标签选择器是指用HTML标签名作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1：属性值1; 属性2：属性值2; ...}

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是它的缺点，不能设计差异化样式。

示例：

h1 {color: red;
}p {color: green;
}

5.2 id选择器

id选择器使用“#”进行标识，后面紧跟id名，基本语法格式如下：

#id名{属性1：属性值1; 属性2：属性值2; ...}

<标签名 id="id值"></标签名>

该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。用法基本与类选择器相同。

<div class="lin">林黛玉</div>    <!-- 使用类选择器 -->
<div id="xue">薛宝钗</div>      <!-- 使用id选择器 -->

5.3 类选择器

类选择器使用“.”（英文点）进行标识，后面紧跟类名，其基本语法格式如下：

定义：
.类名{属性1：属性值1; 属性2：属性值2; ...}

调用：
<标签名 class="类名"></标签名>

类选择器最大的优势是可以为元素对象定义单独或相同的样式。

示例：

小技巧：

长名称或词组可以使用中横线来为选择器命名。text-color-red

不要纯数字、中文等命名，尽量使用英文字母来表示。见名知意

5.4 多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。

<!--在class属性中使用多个类名，表示同时满足多个样式 -->
<div class="font20 red fontWeight">西游记</div>
<div class="font20">红楼梦</div>
<div class="font14 fontWeight">三国演义</div>
<div class="font14">水浒传</div>

如图：

注意：

样式显示效果跟HTML元素中的类名先后顺序没有关系，受CSS样式书写的上下顺序有关。

各个类名中间用空格隔开

多类名选择器在后期布局较为复杂的情况下使用较多。

5.5 id选择器和类选择器区别

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

类选择器（class）好比人的名字，可以重复使用，如：李伟、张伟

id选择器（id）好比人的身份证号，是唯一的，不允许重复，只能使用一次。

5.6 通配符选择器

通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* {属性1：属性值1; 属性2：属性值2; ...}

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML元素的默认边距。

* {
margin: 0; /*定义外边距*/
padding: 0; /*定义内边距*/
}

注意：

通配选择器较少使用。

5.7 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

伪类选择器使用“:”冒号来表示，比如 :link{}

(1) 链接伪类选择器

链接伪类选择器主要针对于a标签

a:link       /*未访问的链接*/
a:visited   /*已访问的链接*/
a:hover       /*鼠标移动到链接上*/
a:active   /*选定的链接*/

注意：

a:hover 必须在 a:link 和 a:visited 之后。

a:active 必须在 a:hover 之后，需要严格按顺序才能看到效果。

所以，写的时候顺序尽量不要颠倒，按照l o v e h a t e来记忆

<style>a:link {        /*未访问的链接*/font-size: 16px;color: grey;font-weight: 700;}a:visited {     /*已访问的链接 表示已经点击过一次的状态*/font-size: 16px;color: orange;font-weight: 700;}a:hover {        /*鼠标移动到链接上*/font-size: 16px;color: red;font-weight: 700;}a:active {     /*选定的链接  鼠标点击不松开的状态*/font-size: 16px;color: blue;font-weight: 700;}
</style>

实际工作中，链接伪类选择器使用简写即可。

a {       /*a是标签选择器，所有的链接*/
   font-weight: 700;
   font-size: 16px;
   color: grey;
}
a:hover {   /*:hover 是链接伪类选择器鼠标移动到链接上*/
   color: red;       /*鼠标经过时，文本由原来的灰色变为红色*/
}

小米：#ff6700

京东：#f10215

支付宝：#00bbee

微信：#348903

（2）结构伪类选择器（部分）_Jerendipity的博客-CSDN博客

5.8 input伪类（补充）

:focus	input:focus	选择获得焦点的 input 元素。
:checked	input:checked	选择每个被选中的 input 元素。

CSS基础（一）day3相关推荐

html与css项目,项目六HTML与CSS基础.doc
项目六HTML与CSS基础.doc 项目六: HTML与CSS基础课题名称:6．2 CSS样式表的使用(一) 教学目标 1．知识与技能目标熟练掌握插入Div 标签和设置样式定义的方法:理解CSS样 ...
CSS基础_Day04
CSS基础一.CSS继承 1.给 HTML 的 body 元素添加样式每一个 HTML 页面都有一个 body 元素. 我们可以通过设置 background-color 的属性值为黑色,来证明 ...
CSS基础_Day03
CSS基础一.给 div 元素添加背景色 background-color 属性可以设置元素的背景颜色. .green-background {background-color: green; } ...
CSS基础_Day02
CSS基础一.字体 1.更改元素的字体大小字体大小由font-size属性控制. <style>p{font-size:16px;}//设置p元素字体大小为16px </styl ...
CSS基础_Day01
CSS基础一.CSS简介 CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式. CSS 的选择器区分大小写,因此要谨慎使用大写. 可以设置以下内容: ...
学习笔记（二）——CSS基础
文章目录一.什么是CSS 二.CSS基本使用 2.1.行内式(内联样式) 2.2.内部样式 2.3.外部样式 2.3.1.嵌入式 2.3.2.导入式三.选择器 3.1.基础选择器 3.1.1.标签 ...
css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
和前端撕出逼格，撕的硬气 - 产品应该懂的html/css基础知识
之前和前端交流页面的实现方案时,经常被告知:这个效果实现不了:那个东西兼容性不好:这个做不了...明明这些效果别人家已经实现出来了,哎,奈何不懂前端相关,没辙! 最近花了点时间看了些前端相关的博客.论 ...
CSS基础笔记（w3school）
CSS 概述 CSS 基础语法 1.CSS语法 2.值的不同写法和单位 3.记得写引号 4.多重声明 5.空格和大小写 CSS 高级语法 1.选择器的分组 2.继承及其问题 3.友善地对待Netsca ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...

CSS基础（一）day3