前端入门（一）之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元无门槛券
私享最新 技术干货
腾讯云开发者
