CSS知识点总结
一、CSS简介
CSS 是一种标记语言
CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。
CSS 可以美化 HTML , 让 HTML 更漂亮, 让页面布局更简单。
CSS 最大价值: 由 HTML 专注去做结构呈现,样式交给 CSS,即 结构 ( HTML ) 与样式( CSS ) 相分离。
二、CSS基础选择器
1、标签选择器
标签名{
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
2、类选择器
.类名 { 属性1: 属性值1;
...
}
CSS:
.red {
color: red;
}
HTML:
<div class=‘red’> 变红色 </div>
记忆口诀:样式点定义,结构类调用。一个或多个,开发最常用.
3、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器,CSS 中 id 选择器以“#" 来定义。
#id名 { 属性1: 属性值1;
...
}
#nav {
color:red;
}
id 选择器和类选择器的区别
① 类选择器(class)可重复被多人使用
② id 选择器只能被一人使用
③ id 选择器和类选择器最大的不同在于使用次数上。
④ 类选择器在修改样式中用的最多,id 选择器一般用于页面唯一性的元素上,经常和 JavaScript 搭配使用。
4、通配符选择器
* { margin: 0; padding: 0; }
三、属性
1、字体属性
字体系列、大小、粗细、和文字样式(如斜体)
body {
font: font-style font-weight font-size/line-height font-family;
}
->使用 font 属性时,必须按上面语法格式中的顺序书写,不能更换顺序,并且各个属性间以空格隔开
->不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性,否则 font 属性将不起作用
2、文本属性
Text(文本)属性可定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
p {
color: red;
text-align: center;
text-decoration: none;
text-indent: 2em;//缩进
line-hight: 20px;
}
四、CSS样式表
1、内部样式表
<style>
div {
color: red;
font-size: 12px;
}
</style>
2、行内样式表
<div style="color: red; font-size: 12px;">好好学习,天天向上</div>
3、外部样式表
实际开发都是外部样式表. 适合于样式比较多的情况. 核心是:样式单独写到CSS 文件中,之后把CSS文件引入 到 HTML 页面中使用.
引入外部样式表分为两步:
- 新建一个后缀名为 .css 的样式文件,把所有 CSS 代码都放入此文件中。
- 在 HTML 页面中,使用 标签引入这个文件。
<link rel="stylesheet" href="css文件路径">