第四章 CSS基础

时间:2021-12-29 04:30:33

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)

font-size 字体大小

8.4、a:link 未被点击时的超链接;

a:hover 鼠标移到上方时;

a:active 被点击时;

a:visited 点击后;

a:hover必须位于a:link和a:visited之后;a:active必须位于a:hover之后

一般设置颜色

8.5、list-style-type 设置序列表的符号样式(disc/circle/square/decimal等等);

list-style-image:url(“”) 将小黑点设置为图片;

list-style-position 小黑点位置(inside/outside)

8.6、border-collapse:将表格边框合并为单一边框(默认separate)

vertical-align:设置垂直居中方式(middle/bottom/top)

8.7、margin:X px 内边距  padding:Xpx外边距

8.8、CSS三种方式的优先级:内联>内部>外部>浏览器缺省设置   同一种方式,后面的会覆盖前面的效果。

//权重越大,优先级越高