css基础

CSS 中的长度单位

px        像素
em        字体大小的倍数
%        百分比； 设置宽高参照父元素宽高，设置字体大小参照默认字体大小

 

CSS 中的颜色设置方式

 使用颜色的单词表示颜色

red、yellow、orange、green、cyan、blue、purple、pink、black、white ...

 

rgb 方式表示颜色

计算机三原色：
red        0~255   0%~100%
green      0~255   0%~100%
blue       0~255   0%~100%

 

background-color: rgb(123, 120, 167);
background-color: rgb(255, 0, 0);
background-color: rgb(0, 255, 0);

/* 三个值相同 灰色 值越小灰越深 */
background-color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
background-color: rgb(100, 100, 100);


/* 使用百分比 */
background-color: rgb(0%, 100%, 90%);
background-color: rgb(50%, 30%, 90%);

 

hex 十六进制方式表示颜色

十六进制方式表示颜色的原理与rgb方式相同，十六进制 ff 等于十进制 255

 

background-color: #ab12e7;
background-color: #ff0000;
background-color: #00ff00;
background-color: #ababab;

/* 
	十六进制简写
	表示某个颜色的两个数字是相同的，三个颜色都满足该条件
*/
background-color: #f90;  /* #ff9900 */
background-color: #ffab11;  /*不可简写*/
background-color: #bbb;     /* #bbb */
background-color: #000;    /* #000000 */
background-color: #aaaaab;  /*不可简写*/

 

CSS 基本选择器

四种基本选择器

标签名选择器

标签名 {}

 

类名选择器

.类名 {}

1. 多个元素可以设置相同的类名
2. 一个元素可以设置多个类名

 

ID 选择器

#ID名 {}

元素的ID必须是唯一的

 

全局（通配）选择器

* {}

选择到页面中所有的元素

 

基本选择器之间的优先级

1. ID选择器 > 类名选择器 > 标签名选择器 > 全局选择器。
2. 行内式设置的样式大于任何选择器设置的样式。
3. 如果选择器优先级相同，后面的覆盖前面的。

 

盒子模型（显示模式）

元素的显示模式

块级元素 block

一个元素的显示模式如果是块级（block），该元素被称为块级元素。块级元素具有如下特点

1. 块级元素能够独占一行
2. 块级元素可以设置宽度和高度

 

行内元素 inline

一个元素的显示模式如果是行内（inline），该元素被称为行内元素。行内元素具有如下特点：

1. 行内元素不会独占一行。
2. 行内元素无法设置宽高

 

行内块元素 inline-block

一个元素的显示模式如果是行内块（inline-block），该元素被称为行内块元素。行内块元素具有如下特点：

1. 行内块元素不会独占一行
2. 行内块元素可以设置宽高。

 

HTML 元素的默认显示模式

 

默认显示模式是 block 的元素：

格式排版标签： h1 ~ h6、p、hr、br、pre、div
列表标签： ul、ol、li、dl、dt、dd
表格标签： table、caption、thead、tbody、tfoot、tr
表单标签： form、option

 

默认显示模式是 inline 的元素：

文本标签： em、strong、sub、sup、del、ins、span
超链接标签： a
表单标签：label

 

默认显示模式是 inline-block 的元素：

图片标签： img
表格标签： td、th
表单标签： input、button、select、textarea
框架标签： iframe

 

修改元素的显示模式

给元素设置 CSS 属性 display，可以修改元素的显示模式，该属性的值如下

block                设置为块级
inline                设置为行内
inline-block        设置为内块
none                设置为隐藏

常用 CSS 属性总结

 

字体样式

属性名	作用	属性值
font-size	设置文字大小	长度
font-weight	设置文字粗细	normal：正常。 bold：粗体字。 lighter：细体字。 数字： 100 ~ 900 之间整百的数字。 100~300 表示细体字。 400、500 表示正常字。 600 ~ 900 表示粗体字
font-style	设置文字风格	normal：正常。 italic：斜体字。
font-family	设置字体族科	字体、字体列表
font	复合属性

 

 

字体族科 font-family

字体族科的设置：

font-family: 宋体;
font-family: "Microsoft YaHei";

设置字体列表：

font-family: 黑体,"Microsoft YaHei",sans-serif;

衬线字体和非衬线字体：

衬线字体 serif： 字体笔画粗细不一致，如宋体、楷体、仿宋体等
非衬线字体 sans-serif： 字体笔画粗细一致，如微软雅黑、黑体、思源黑体、兰亭黑等

 

复合属性 font

可以同时设置各种字体样式。

/* 至少需要设置字体大小和字体族科 */
font: 14px 宋体;
font: 14px 宋体,楷体,"Microsoft YaHei",serif;

/*字体加粗 字体大小和字体族科 */
font: 800 20px 宋体,楷体,"Microsoft YaHei",serif;

/*斜体字 字体大小和字体族科 */
font: italic 20px 宋体,楷体,"Microsoft YaHei",serif;

/*斜体字 粗体字 字体大小和字体族科*/
font: italic 800 20px 宋体,楷体,"Microsoft YaHei",serif

子属性和复合属性的关系

1. 复合属性写在子属性的后面，子属性会被覆盖，即使复合属性中没有对应的值（用默认值覆盖）。
2. 子属性写在复合属性的后面，会覆盖子属性对应的那一种样式。

 

文字颜色

属性名	作用	属性值
color	设置文字颜色	颜色

文本样式

属性名	作用	属性值 设置字间距
letter-spacing	设置字间距	长度
word-spacing	设置词间距	长度
text-indent	设置首行缩进	长度
text-decoration	设置文本修饰线	none：无修饰线。 underline：下划线。 overline：上划线。 line-through：删除线。
text-align	设置文本水平对齐方式	left: 靠左对齐。 right：靠右对齐。 center：居中对齐
vertical-align	设置行内或行内块与同行文本如何对齐	baseline：基线对齐。 top：顶线对齐。 bottom：底线对齐。 middle：中线对齐。 sub：下标字。 super：上标字。 长度：与基线的距离，可以是负值
line-height	设置行高	长度

vertical-align

 该属性有如下作用：

1. 设置行内或行内块元素与同行文本如何对齐，注意需要直接将样式设置到行内或行内块元素
2. 设置上标字和下标字
3. 设置单元格（td和th）中的文本垂直对齐方式

 

line-height 设置行高

行高的概念：

1. 什么是行高？
   上一行的中线与下一行中线之间的距离
   
2. 什么是行距？
   上一行的底线与下一行的顶线之间的距离
   
3. 行高与行距的关系
   设置行高能够影响行距

 使用行高实现元素中的一行文字垂直居中，满足以下条件：

1. 只有一行文字
2. 行高与元素高度相同

 line-height 是 font 的子属性

/*
  14px 是字体大小
  200px 是行高
*/
font: 800 14px/200px 楷体;