1.css的引入方式:
1.内联 2.内嵌、3.外联、4.导入
内联:直接在标签中写: style="color: red;"
内嵌:写在style标签里面的样式,
外联: 引入外部css文件,通过link标签
导入:这是新的一种方式,存在一定兼容性问题,需注意,是在style标签中引入,@import url("css/2.css");
内嵌和外联是最常用
2.写样式的容器标签:
1.标签,直接使用标签名
2.类名 标签中是使用class属性,对应的css中使用.类名
3.id名 标签中是使用id属性,对应的css中使用#id名
4.通配符 * : 代表所有元素
5. :hover 后面有机会看,还有部分后面涉及再说
css的属性
color:字体颜色,
1.可以使用颜色英文,
2.rgb(0-255,0-255,0-255)
3. #ffffff,#fff,三位数或六位数,每个值的范围(0-f),10:代表a,11代表b,16代表f
4.rgba(0-255,0-255,0-255,0-1),最后一位是透明度
font-weight: bold(加粗) 100-900的值,一般400是正常,加粗800
font-size: 字体大小,一般是14px,值越大字体越大,但是浏览器有些最小为12px,值再小不会变小
boder: 边框 (标签的厚度高度,表框实现solid还是虚线dashed,边框的颜色)
border-top: 上边框;
border-right: 右边框;
border-bottom: 下边框;
border-left: 左边框;
text-align:规定元素中的文本的水平对齐方式,内部标签必须为行级才生效
值:left左对齐 right右对齐 center
line-height:行高,也是文字的高
display: 块级行级转换
值:inline:行级 block:块 inline-block:行级但是有宽高
css的样式显示权重(优先级)
!important>内联(标签内的style)>id>clas(类名)>标签(div,p)
字体的css设置都有继承,比如color,font-size,font-weight等,其他都没继承,比如宽高,边框等
margin: 标签的外边距,还有margin-top,margin-bottom,margin-left,margin-right的设置
padding: 标签的内边距,还有padding-top的设置
css3高级属性:动画,偏移,旋转,缩放属性(到后面再讲)
作业:
1.上面的标签都用一下
2.预习background属性,border-radius属性,如何让内容居中:使用 margin: 0 auto;
3. 下一阶段讲盒模型,设置标签浮动float:left; 弹性flex布局 ,定位position,以及样式居中显示
下一阶段再学完基本页面就可以进行编写出来了,
有问题可以随时在评论那个进行询问
补充学习css的网站:
www.cnblogs.com/linhaifeng/… : 常用的学习
www.w3school.com.cn/cssref/inde… :这个比较全,但是没有标明重要程度,所以可做查询使用