首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端入门(一)之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标签设置样式。

常用的有:

举例说明:

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

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

如果对你有帮助,分享给更多的人吧!

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

文章征集啦!

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

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

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180403G19VF200?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券