经过几天的html的学习,已经有点开始慢慢的进入一个程序员的世界
从今天开始,我们就开始一起学习css的内容
一起来看看今天的重点吧,
一,css的初体验
css的相关设置放在style里,style放在title下,是一个双标签
1.css的相关属性
color:设置字体的颜色
font-size:设置字体的大小
background:设置字体的背景
width:设置字体的宽度
height:设置字体的高度
2.css的概念
层叠样式表
3.字体的属性
font-size:字体的大小;单位为px;
font-weight:字体的粗细.默认为normal,400;加粗,为bold,700;
font-style:字体的样式;不倾斜为normal,倾斜为italic
font=family;字体的类型;‘宋体’;‘楷体’.等
可以连写
连写的格式为(swsf稍微舒服)
font: 样式 粗细 大小 类型
即;font: italic bold 40px ‘宋体’;可以省略前两个
二.开发人员调试工具
用来调试,查错,找bug
1.打开方式
右键,查看网页源代码
右键,检查
2.调试的作用
1.修改属性值
直接修改
鼠标滚轮
键盘上下键
2.添加属性
直接在上一个属性值后面的分号点击,直接添加
3.控制样式生效
点击每个属性前面的小框,可以控制
如果样式有一个删除线,表示该样式,不生效
4.查看是否生效
5.查看报错原因
三.简单基本选择器
1.标签选择器
标签{css}
选择所有的标签,不管标签藏得多深
2.类选择器
.类名{css}
给标签名加一个class属性,添加一个类,来指定某一个标签
相当于名字,可以重名
3.id选择器
#id{css}
给标签加一个id值,根据id值来给标签赋予新的样式
id只有一个,相当于身份证
四,复杂选择器
1.通配符选择器
*{css}
设置所有标签的样式
2.并集选择器(,)
选择器1,选择器2{css}
设置满足选择器1或者选择器2的样式,有逗号链接
3.交集选择器(直接连接)
选择器1选择器2{css}
设置既满足选择器一,又满足选择器2的样式
4.后代选择器( 空格隔开)
选择器1 选择器2{css}
设置选择器1里面所有的满足选择器2(子代,孙代,等等)的内容样式
5.子代选择器
选择器1>选择器2{css}
设置选择器1里面,子代中选择器2的样式(只有子代)
五,拓展小知识
颜色的属性
rgb表示法
r:reb;
g:green;
b:blue;
1. rgb(0,0,0),分别表示三个颜色的比重,取值范围为0-255
2.rgba(0,0,0,0),最后一位为透明度,取值为0-1.
3.十六进制表示法:#000000-#FFFFFF: