CSS（一）笔记

CSS简介

• CSS 是层叠样式表，也是一种标记语言
• 主要设置 HTML 页面中文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式

CSS 语法规范：

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

• 选择器用于指定CSS样式的 HTML标签 ，花括号内是对该对象设置的具体样式
• 属性与属性值以采用键值对方式，用英语 “:” 分开

CSS 基础选择器

CSS 选择器的作用：选择标签

基础选择器包括：标签选择器、类选择器、id选择器、通配符选择器

标签选择器

标签选择器指用 HTML标签名称 作为选择器，为页面中某一类标签指定统一 CSS 样式

语法：

<style>
    标签名 {
        属性1: 属性1值;
        属性2: 属性2值;
        属性3: 属性3值;
        ...
    }
</style>

优点：

• 能快速为页面中同类型的标签统一设置样式

缺点：

• 不能设计差异化样式，只能选择全部的当前标签

类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

语法：

.类名 {
	属性1: 属性1值;
	...
}
<style>
    .red {
		color: red;
	}
</style>
<div class="red">红色</div>
<li class="red">红色<li>

注意：

• 类选择器使用 “.” （英文点号）进行标示
• 长名词或词组可使用中横线来为选择器命名

多类名

可以给一个标签指定多个类名

语法：

<div class="red font20">111</div>

注意：

• 在标签class属性中写多个类名
• 多个类名中间必须用空格分开

id 选择器

为标有特定id的HTML元素指定样式

CSS中id选择器以 # 来定义

语法：

#id名 {
	属性1: 属性1值;
	...    
}

#pink {
    color: pink;
}
<div id="pink">111</div>

注意：

• id 属性只能在每个 HTML 文档中出现一次。

通配符选择器

在CSS 中， 通配符使用 * 定义，它表示选取页面中所有元素(标签)。

语法：

* {
    属性1: 属性1值;
    ...      
}

注意：

• 通配符选择器不需要调用，自动就给所有的元素使用样式
• 特殊情况使用（清除所有元素标签的内外边距等）

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，比如p	不能差异化选择	较多	p {color: red;}
类选择器	可以选出1个或者多个标签	可以根据需求选择	非常多	.nav {color: red;}
id选择器	一次只能选择1个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color: red;}
通配符选择器	选择所有的标签	选择的太多，有部分不需要	特殊情况使用	* {color: red;}

CSS 字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细和文字样式(如斜体)

字体系列

CSS 使用 font-family 属性设置文本的字体系列

语法：

p {font-family: "微软雅黑";}
div {font-family: Arial,"Microsoft YaHei","微软雅黑";}

注意：

• 各种字体之间必须使用英文状态下的逗号隔开
• 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
• 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
• 最常见的几个字体：body {font-family:"Microsoft Yahei",tahoma,arial,"Hiragino Sans GB";}

字体大小

CSS 使用 font-size 属性定义字体大小

语法：

p {font-family: "微软雅黑";}
div {font-family: Arial,"Microsoft YaHei","微软雅黑";}

注意：

p {
    font-size: 20px;
}

注意：

• px (像素)大小是我们网页的最常用的单位
• 谷歌浏览器默认的文字大小为16px
• 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小。不要默认大小
• 可以给body指定整个页面文字的大小（标题标签特殊，需要单独指定）

字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细

语法：

p {
    font-weight: bold;
}

属性值	描述
normal	默认值(不加粗的)
bold	定义粗体(加粗的)
100~900（开发常用）	400等同于 normal，700等同于bold 注意：数字后面不跟单位

文字样式

CSS 使用 font-style 属性设置文本的风格

语法:

p {
  font-style: normal;
}

属性值	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal
italic	浏览器会显示斜体的字体样式

注意：平时一般很少给文字加斜体，而是给斜体标签（em，i）改为不倾斜字体

字体复合属性

把以上文字样式综合来写，节约代码

语法：

body {
    font: font-style font-weight font-size/line-height font-family
}


div {
    /* font-style: italic;
    font-weight: 700;
    font-size: 16px;
    font-family: 'Microsoft yahei';*/
    /* 复合属性：简写的方式  节约代码*/
    /* 顺序：font-style font-weight  font-size/line-height  font-family */
    font: italic 700 16px 'Microsoft YaHei';
}

注意：

• 使用font属性时，必须严格按照顺序书写，不能更换顺序，并且各个属性之间以空格隔开
• 不需要设置的属性可以省略（取默认值），但必须保留 font-size 和 font-family 属性，否则font属性将不起作用

字体属性总结

属性	表示	注意点
font-size	字号	我们通常用的单位是 px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold ，不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic，不倾斜是 normal 最常用 normal
font	字体连写	1.字体连写是有顺序的 不能随意换位置 2.其中字体和字号必须同时出现

CSS 文本属性

CSS Text(文本)属性可定义文本的外观，比如文本颜色、对齐文本、装饰文本、文本缩进、行间距的等

文本颜色

color 属性用于定义文本的颜色

语法：

div {
    color: red;
}

表示	属性值
预定义的颜色值	red，green，blue等
十六进制(常用)	#FF0000, #FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%，0%，0%)

对齐文本

text-align 属性用于设置元素内文本内容的水平对齐方式

语法：

div {
    text-align: center;
}

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

装饰文本

text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线，删除线，上划线等

语法：

div {
    text-decoration: underline;
}

属性值	描述
none	默认 没有装饰线(最常用)
underline	下划线 链接a自带下划线（常用）
overline	上划线 (几乎不用)
line-through	删除线 (不常用)

文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将段落的首行缩进

语法：

div {
    text-indent: 10px;
}

通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值

p{
   text-indent: 2em;
}

em 是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小

行间距

line-height 属性用于设置行间的距离(行高)，可以控制文字行与行之间的距离

语法：

p {
   line-height: 26px;
}

Tips:

测量行高：从上一行文字下沿测量到本行的下沿

文本属性总结

属性	表示	注意点
color	文本颜色	通常用 十六进制 比如 而且是简写形式 #fff
text-align	文本对齐	可以设定文字水平的对齐方式
text-indent	文本缩进	通常用于段落首行缩进2个字符距离
text-decoration	文本修饰	记住 添加下划线 underline 取消下划线 none
line-height	行高	控制行与行之间的距离

CSS 的引入方式

CSS 样式表可以分分三类：

• 行内样式表（行内式）
• 内部样式表（嵌入式）
• 外部样式表（链接式）

内部样式表

写到html页面内部，把所有的 CSS 代码抽取出来，单独放到一个<style>标签中

示例：

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

注意：

• <style>理论上可以放 HTML 文档的任何地方，但一般放在<head>中
• 此方式可以方便控制当前整个页面中的元素样式设置
• 代码结构清晰，但是并没有实现结构与样式完全分离

行内样式表

在元素标签内部的style属性中设定CSS样式，适合于修改简单样式

示例：

<div style="color:red; font-size:12px;"></div>

注意：

• style 其实就是标签的属性
• 在双引号中间，写法要符合规范
• 可以控制当前标签的样式
• 不推荐大量使用，只有简单修改样式时，可以考虑使用

外部样式表

样式单独写到CSS文件中，之后把该文件引入到 HTML 页面中使用

步骤：

1. 新建一个后缀名为 .css 的样式文件，把所有CSS代码放入此文件
2. 在HTML页面中，使用<link>标签引入这个文件

示例：

<link rel="stylesheet" href="css文件路径">

属性	作用
rel	定义当前文档与被链接文档之间的关系，stylesheet 表示被链接文档是一个样式表文件
href	定义所链接外部样式表文件的URL 可以相对、绝对路径

开发中常用