系统学习CSS-第一天

CSS简介

概念：中文名称是 层叠样式表，或简称样式表
意义：由于HTML只关注网页内容的语义，所以CSS为“美化网页”而生
注：

1. HTML主要做结构，显示网页内容
2. CSS美化网页，布局页面
3. 结构与样式分离
   语法：

选择器 {
	属性： 值；
	...
}

注：

1. 展开式书写，一行只写一个属性
2. 使用小写字母
3. 注意空格和分号

选择器简介

作用：选择标签，修改样式。分为基础选择器和复合选择器
四大基础选择器：

1.标签选择器
作用：把某一类标签全部选择，例如所有的p标签
使用：把标签名写上即可，标签名作为选择器
2.类选择器
作用：可以单独选择一个或某几个标签，调用即可
使用：在CSS中以点号定义，在HTML中用class来调用
注：命名应符合一定规则，尽量不要使用纯数字等无意义名称
补：多类名调用
使用方式：在class中写多个类名，用空格隔开
优点：可以把多个标签的相同属性放在一个类中，这些标签可以调用公共的类，再同时调用自己独有的类，节省了大量重复书写
3.id选择器
作用：给页面唯一的元素设置样式
使用：前缀是#号，在HTML中用id调用
注：相当于身份证号，一个页面中只能唯一调用一次
4.通配符选择器
作用：全选页面中的所有元素、所有标签
使用：定义即可，无需调用，自动更改所有

CSS字体属性

字体font-family
字号font-size 注：需要些单位px
粗细font-weight 注：写100-900之间的整百数，400是正常，700是加粗
是否倾斜font-style 重点记：normal正常显示，italic斜体
补：字体复合属性写法
font: font-style font-weight font-size/line-height font-family;
即：font: 倾斜 粗细 字号/行高 字体;
可以简写，简写时font-size和font-family是必须要写的

CSS文本属性

颜色color
对齐方式text-align：注：本质是让盒子里面的内容对齐（相对于盒子四周）
划线text-decoration：重点记：none没有线，underline下划线
首行缩进text-indent：注：2em表缩进2字符，em是相对单位，表示当前元素一个文字的大小
行高line-height：注：行高分三部分：上间距+文字高度+下间距

CSS三种引入方式

内部样式表
使用：将所有CSS写在style标签里，style标签放在head里面
优：方便控制当前整个HTML页面，代码清晰
缺：结构和样式并未完全分离
行内样式表
使用：在标签内部写上style属性，例<p style="color: pink;">
注：写在双引号之间，且符合CSS规范。只适用于修改少量的简单的样式。
外部样式表
使用：样式单独写在CSS文件中，之后把CSS文件引入到HTML页面中，用link标签引入
注：外部样式表在开发中最常用