前端学习、CSS

CSS可以嵌入到HTML中使用。

每个CSS语法包含两部分，选择器和应用的属性。

div用来声明针对页面上的哪些元素生效。

具体设置的属性以键值对形式表示，属性都在{}里，属性之间用;分割，键和值之间用:分割。

因为CSS的特殊命名风格，CSS不能进行算术运算。

注释：/* */

CSS的引入方式

1.内部样式

2.内联样式

使用style属性（每个标签都可以有style属性，里面就可以直接写CSS，不必写选择器，只是针对当前元素生效）

当给一个元素分多种方式设置样式时，如果是不同的属性，则会叠加，CSS就叫层叠样式表

如果是相同的样式，通过style属性的设置，优先级高于style标签。CSS的样式优先级，有一套复杂的规则。

3.外部样式

把CSS写到一个单独的.css文件中，通过link标签引入到html文件里

外部样式和内联样式冲突了，内联样式优先级高。

外部样式和内部样式冲突了，看谁离元素更近。

实际开发中，最主要的写法是外部样式，外部样式可以让页面结构和样式分离开。

同时也就可以复用样式到其他页面中了。内联样式往往是修修补补，比较直接，具有针对性。

样式格式

紧凑风格

p{color:red; font-size; 30px;}

展开风格

p{

color:red;

font-size:30px;

}

CSS选择器

描述了我们要选中页面中的哪个元素

{}的样式就是针对这些元素生效的。

CSS选择器有多种写法：

1.标签选择器

写个标签名字，标签名就表示针对当前页面中所有的指定标签，都会被选中。

2.类选择器

可以让样式差异化效果

类选择器允许让多个元素，引用同一个类。

类选择器是CSS选择器中，最灵活的一种方式，也是最常用的方式

3.id选择器

每个元素都有一个id属性，需要id值在页面中是唯一的。使用id选择器来选中到对应的元素上。

#开头表示是id选择器，后面的the-id对应到页面上的id位'the-id'的元素

4.通配符选择器

*{}

选中页面中的所有元素，可以让页面所有元素都被选中，通常用于干掉浏览器的默认样式。例如：文本默认的颜色，字体大小，默认段落间距等，这种没有指定样式，也会默认带的，这是浏览器赋予的默认样式，在不同浏览器上可能不一样。

上述这四个成为基础选择器，还有一类，符合选择器，简单来说就是把多个基础选择器给组合起来了。

复合选择器

1.后代选择器

即在指定的元素里面去筛选后代元素。

具体的写法：元素1 元素2 {样式声明}

元素1和元素2可以是标签选择器，也可以是类选择器，还可以是id选择器

效果一样

2.子选择器

和后代选择器类似，但是只能选择子标签，无法选择孙子及其以后得标签

3.并集选择器

针对多个不同的选择器，应用相同的样式属性。

4.伪类选择器

是选中元素的不同状态。主要先学两个：

:hover鼠标放上去

:active鼠标按下去

常用元素属性

字体类型、字体大小、字体粗细（100-900的整数）、文字倾斜。

rgb：计算机表示颜色的基本方式

三原色，可以构成各种颜色。计算机中典型的标识方式，就是使用一个字节，表示R，一个字节表示G，一个字节表示B。每种颜色的取值范围在0-255。合在一起，颜色的取值种类就很多了。

前端里就是这样表示颜色的。

rgba比rgb多一个参数，表示透明度（取值为0-1），透明度是1时，表示不透明。

十六进制也能表示颜色，全0表示黑色，#ff0000表示红色。这六位里，只有前两位为f表示红色，只有中间两位为f表示绿色，只有最后两位为f表示蓝色。

十六禁止的表示方式可以缩写，例如#AABBCC就可以缩写成#ABC。#AABCDD不能缩写

text-align：left、center、right。左对齐、居中对齐、右对齐。