提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 一、css是什么?
- 二、css的使用方法
- 1.行内样式
- 2.内部样式
- 3.外部样式
- 常用的css属性
- 1.color
- 2.background-color
- 3.font-size
- 4.font-family
- 5.text-decortation
- 6.line-hight
- 7.text-align
- 总结
一、css是什么?
css在前端编程中主要是用来描绘页面展示效果以及页面的布局,html是用来搭建框架的,而css就是用来美化排版,是页面变得整洁美观。
二、css的使用方法
1.行内样式
也称内联样式 在heml文件中直接写在元素的style属性中,三种写法-行内样式的优先级最高,但是这种写法一般用于小型的修改。在写大型项目或是要使用的样式过多时会很乱也不便于后期修改。不推荐使用。
在这里插入图片描述
如图:
浏览器显示:
2.内部样式
内部样式一般写在中,直接写在style元素中,一般用于小型模板或者案例,虽然在修改方面比行内样式稍强,但是当元素过多时一样会混乱,后期维护很废力气。
如图:
浏览器显示:
3.外部样式
在html外新建一个css文件,将样式书写在css文件中,然后通过元素将css文件引入。这个写法是最推荐的,这种写法便于浏览器缓存,同时也可以做到更好的代码分类,在后期维护或者更新时这种写法会给程序员带来极大的便利。
如图:
浏览器显示
常用的css属性
1.color
元素内部的文字颜色,两种表示写法
1.rgb(0,0,0)其中的数字分别代表red,green,blue,取值范围0~255.
2.#+fff,#号加上红绿蓝取值的十六进制来表示。
2.background-color
元素的背景颜色,写法同文本颜色
3.font-size
设置文本尺寸大小,单位:
1.px 像素,绝对单位
2.em 相对单位,跟父元素作比较
这个属性会被继承,当元素没有书写字体大小时,会直接从父元素那里继承,而如果父元素也没有设置字体大小时,就会使用默认样式。
4.font-family
文字类型,只有在用户的计算机中存在设置的字体时才会产生效果,可以设置多个字体以便于扩大容错率。而sans-serif表示非衬线字体,一般设置文字类型时都会带上它,可以自动匹配环境,以应对不同的用户。
5.text-decortation
文本修饰:
undweline:表示加上下划线,一般用于重点表示
line-through:删除线,文本中间加上一条横线,一般用于优惠价格时的原价,做强烈对比
overline:上线
none:表示没有线,主要用于超链接删除下滑线
6.line-hight
文本高度,当取值等于其容器时,会让单行文本居中,这种用法也是最常见的
7.text-align
元素内部的水平排列
总结
要想用好css,就必须了解它的常见属性,同时多多进行练习,在浏览器中可以通过鼠标右箭的检查选项看到代码,一边写一边看效果才能达到最好的效果。
更多推荐
菜鸟教程,css小白入门
发布评论