第四章 CSS基础

Posted 2020-07-18 littlejava

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第四章 CSS基础相关的知识，希望对你有一定的参考价值。

1、CSS是cascading style sheets 层叠样式表。样式定义如何显示html元素，通常存储在样式表中，将样式添加到html中，是为了解决内容与表现分离的问题。

2、外部样式表可以极大提高工作效率，通常存储在CSS文件中，多个样式定义可以层叠为一。

3、程序里有三种方式添加样式：直接添加到标记里 <p style=””>（内联样式表）；<style> 内部样式表；<link rel=”stylesheet” href=”css文件目录” type=”text/css”>外部样式表

#+id名 .+class名

4、浏览器自定义样式和浏览器默认样式。

5、浏览器载入的html解析为dom树，但是此时没有任何样式，然后解析css文件成stylerules，然后两者合并，合成Render树，最后显示。

6、CSS结构：选择器 {声明property:value;}

CSS由两个主要部分构成：选择器，一条或多条声明。每个属性有一个值，不同声明之间用冒号分隔。ps：属性和值之间不能有空格，否则无法解析

7、CSS注释：/*XXXXXX*/

8、CSS样式：

8.1、background-color背景颜色；background-image:url();背景图片;background-repeat：no-repeat;设置背景图片重复方式;background-position:背景位置 center/right/bottom，可以用百分比也可以用具体像素值（按左上角开始计算）;background-attachment:scroll/fixed设置背景是否随鼠标滚动而滚动。

8.2、text-indent文本缩进 ;

text-align:left,right,center 水平对齐方式（左、右、居中），和<center>的区别在于text-align只控制文本居中，center会控制整个元素居中 justify 两端对齐;

word-spacing:X px单词之间的距离（空格）;

letter-spacing:X px字母之间的间距;

text-transform 文本大小写(upercase/lowercase/capitalize(首字母大写));

text-decoration 文本装饰(underline/overline/line-through);

white-space处理空白符(pre/nowrap/pre-wrap/pre-line)pre不允许自动换行，pre-wrap允许自动换行;

direction 文本方向 rtl 和右对齐方式差不多。

8.3、font-famlily 字体样式(可设置多个字体样式，如未找到则换一种);

font-sytle 字体风格(italic文本斜体显示/oblique文本倾斜显示)

font-variant 字体变形设定小型大写字母(small-caps);

font-weight 字体粗细（100-900整数/bold/bolder/lighter）