CSS知识点（学习笔记Day2）

CSS简介

CSS是层叠样式表（Cascading Style Sheets）的简称。

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

CSS可以美化HTML，让HTML更漂亮，让页面布局更简单。

CSS最大的价值：由HTML专注去做结构呈现，样式交给CSS，即结构（HTML）与样式（CSS）相分离。

CSS基础选择器

选择器的作用就是选择标签。

选择器分为基础选择器和复合选择器，基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。

标签选择器语法格式

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

类选择器语法格式 

.类名 {
    属性1: 属性值1;
    ...
}


<div class="类名">文字</div>

记忆口诀：样式点定义，结构类调用，一个或多个，开发最常用。 

id选择器语法格式

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

<div id="id名"> 文字 </div>

记忆口诀：样式#定义，结构id调用，只能调用一次，别人切勿用。 

通配符选择器语法格式

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

 CSS字体属性

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

字号

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

p {
    font-size:20px;
}

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

字体

CSS 使用 font-family属性定义文本的字体系列。

p{ 
font-family:"微软雅黑";
}

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

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

字体粗细

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

p {
    <!-- 将字体设置为粗体 -->
    font-weight: bold:
}

 文字样式

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

p {
    <!-- 将文字样式设置为默认值 -->
    font-style: normal;
}

 字体复合属性

字体属性可以把以上文字样式综合来写,这样可以更节约代码:

<!--
body {
    font: font-style font-weight font-size/line-height font-family;
}
-->


body {
    font: italic bold 18px/26px "Microsoft yahei";
}

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

总结

 CSS文本属性

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

文本颜色

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

div {
    color: red;
}

对齐方式

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

div {
    text-align: center;
}

装饰文本

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

div {
    text-decoration: underline;
}

文本缩进

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

div {
    text-indent: 10px;
}

p {
     text-indent: 2em;
}

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

行间距

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

p {
    line-height: 26px;
}

注：行间距是指文字的大小 加 上下间距三部分组成。

总结