前端入门（一）之CSS-1

微信公众号：前端从入门到深坑

如有问题或建议，请公众号留言

CSS初探

在上次我们讲完html标签后，我相信很多人会觉得很枯燥，那么今天开始讲一下CSS，在学完CSS后，可以这么说，你就可以完全完整的写一个静态网站出来了。

1.CSS的定义

2.书写位置

CSS的书写位置，主要有3种，分别为：、、。

内嵌式:

必须在head标签里面，写在style标签之中

特点：复用性比较强！

外联式：

可以写在一个以为结尾的文件内，通过link标签引用它

特点：复用性！

行内式:

直接写在标签内，以style为属性开始书写

特点:复用性差,由于，尽量少用！ps:(后面我们会讲什么是权重)

CSS起步

CSS书写的语法结构：

选择器 {

属性：值;

}

每个属性都有对应的值，这种形式称之为：键值对。

例如:

为了方便我们学习和理解，那么我会先开始讲解一个选择器，这个选择器叫做。

顾名思义就是获取html标签。

结构：

标签名 {

属性 : 属性值;

}

特点：

以标签名为选择器名

根据标签名找到元素

可以控制页面上所有的同名标签元素

例如：

1.font属性（文字）

font属性总共有4个，分别是，，，

文字大小（font-size）：控制字体大小

赋值方式：数字+长度单位px（常用是PX，但是其实还有很多单位，后续会给大家补充）

文字粗细（font-weight）:控制字体粗细

可选赋值：

注意点：可直接写数字，但是一般书写范围是100 - 900

文字倾斜（font-style）:控制字体是否斜体

可选属性：

文字字体（font-family）:设置字体

可选赋值:

说明：一般字体得话基本设置是微软雅黑，除非UI设计人员有明确说明不是微软雅黑才需要进行其他设置，一些中文才有的字体可以直接写中文，可以写多个字体，以空格隔开，默认是从左往右，除非前一个找不到才会去找第二个设置的字体。

一般的顺序写法：

特点：

font-weight和font-style可以省略和调换位置

font-size和font-family只能固定位置，并且不能省略

简单总结如下：

例如：

2.Color属性（颜色）

颜色顾名思义，控制文本的颜色。

书写形式为：

赋值方式：

颜色单词：常用的一些颜色单词，比如red(红色),pink(粉色)

十六进制表示法:这是一种颜色的十六进制的地址坐标

rgb表示法

格式：rgb(红色比例，绿色比例，蓝色比例)

比例如果是数字，最小为0，最大为255

比例如果是百分比，最小为0%，最大为100%

rgba表示法:前面如上，最后一个a表示的是alpha透明度。取值0-1

例如：

3.width和height(宽和高)

顾名思义就是用来控制元素的宽度和高度，格式为：数字+单位

ps:单位的话一般为PX，跟字体大小一样，还有其他的单位，后面会补充。

例如:

选择器

上面我们已经讲到一种简单的选择器叫做：标签选择器，那么接下来，要介绍更多的选择器，工作中是非常常用的，建议如果有不明白的可以多看几次或者留言。

规则：css找到元素并控制元素样式的条件

基础选择器：

1.类（class）选择器

结构：

特点：

会选择到整个页面上类名相同的标签

多个类选择可以同时作用在一个标签上,一个类选择器可以同时作用在多个标签上--

效果如下：

2.id选择器

结构：

特点：

根据元素的id找到元素,跟类选择器一样，页面上同样的id名的元素是可以接受同样的样式。

效果如下：

类选择器和id选择器的命名规范：

常用：

通配符（*）选择器：

结构：

说明：

可以选择到文档里所有的元素进行样式控制，但是会降低浏览器的效率，在工作当中不用。

复合选择器：

1.后代选择器

结构：

选择器虽然可以写很多个，但是推荐些2-3个选择器就可以了。

注意点：

1、后面的选择器必须被前面的选择器包含

2、选择器间使用空格隔开

3、后代选择器是作用在后代元素上的

举例说明：

2.子代选择器

结构：

注意点：

1、后面的选择器必须被前面的选择器所选中元素的子元素

2、选择器间使用 “>” 连接

3、子代选择器是作用在子代元素上的

4、注意和后代选择器区分

举例说明：

3.交集选择器

结构：

选择原理：

同时满足多个选择器的条件的元素才能被控制样式

举例说明：

4.并集选择器

结构：

特点：

只要满足任意一个条件就能被影响

注意点：

1、能作用在很多的元素上

2、选择器间使用 “，” 连接

举例说明：

伪类选择器：

伪类选择器常用于ul里面的li标签，可以快速给第第几个li标签设置样式。

常用的有：

举例说明：

当然还有更多的拓展选择器，但是可能不是很常用，所以会在另外的文章进行拓展。

友情提示：看文章只能提升知识层面，前端代码更多的需要去敲打练习。

如果对你有帮助，分享给更多的人吧！

【前端从入门到深坑】,带你坠入深坑！

文章征集啦！

如果你有好的前端原创文章，欢迎向我们投稿。

标题：公众号前端原创文章投稿