一、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小白入门相关推荐

HTML+CSS小白入门与进阶教程
HTML+CSS小白入门与进阶教程本文旨在让你快速了解HTML语法结构,通过实例操作快速从无到有的入门与进阶.Html语言学习的特点有点像刚开始学word软件,word的功能就像html标签,用多了 ...
菜鸟教程css事件,【推荐】DIV+CSS入门菜鸟教程
这篇文章主要为大家详细介绍了[推荐]DIV+CSS入门菜鸟教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编罗X来看看吧. CSS功能复杂多变,大多数新手莫不着 ...
菜鸟教程-css学习笔记
CSS实例中有很多CSS的例子,可以学习. <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
Flink菜鸟教程(一)——从入门到开发
欢迎关注公众号--<数据三分钟> 一线大厂的师兄师姐结合自己的工作实践,将数据知识浅显道来,每天三分钟,助你成为数据达人.还有面试指导和内推机会. 从这一期开始,将分享一个新的系列--讲讲 ...
CSS教程简笔画教程,CSS小白教程
关于HTML和CSS的关系,小白有在上一篇HTML教程中讲到过,就不赘述书面表达,用小白的话来讲,HTML像月饼盒子,CSS是月饼的卖相(那些文字图片视频啥的就是馅儿啦).今天的文章详细介绍下月饼有哪 ...
python爬虫入门——13行代码制作英语翻译器教程，小白入门一点通
有些同学一想到爬虫,就觉得很厉害,然后也认为是一个很难学,确实,会爬虫的确是个狠人,爬虫这个东西可以抓取很多东西,但是也并不是那么的难学,入门其实也很简单,爬虫都是一些套路步骤,那么接下来让我们用13 ...
css元素选择器菜鸟教程,css基本选择器
CSS基本选择器(对指定的标签设置样式,要把指定的标签选择出来):元素选择器.类选择器.id选择器.组合选择器.通用选择器 1. 元素选择器(类型选择器或标记选择器):声明哪些元素采用css样式 2. ...
python3菜鸟教程-Python3 快速入门教程
Python3下载地址 python.org为python的官网,进去后如果是windows用户就先看一下自己的系统是32位的还是64位的,64位的下x86-64,32位的下x86,最好别下最新的,因 ...
css图片菜鸟教程,css 常用样式(分享)
font-family设置字体名称可以使用多个名称,用逗号分隔,浏览器则按照先后顺序依次使用可用字体 p { font-family:'宋体','黑体','Arial'; } font-size 设 ...

菜鸟教程，css小白入门

文章目录