1.css概念;:
css全拼:cascade style sheet -----级联样式表格
主要作用是控制网页上标签的各种样式:比如 颜色,字体,边框,等等
2.css格式
- 行内样式:可以加注在标签上 例如:<标签 style="具体的样式"></标签>
缺点是:如果多个标签用一个相同的样式的话,样式的代码会重复
- 内部样式表:定义在<html></html>
里面的<head></head>
标签里面,具体格式如下
<html>
<head>
<style>样式的内容</style>
</head>
<body></body>
</html>
内部样式表可以通过标签的class,id等,满足对多个标签使用相同样式的需求。
-外部样式表:把样式的信息定义在一个单独的文件中,文件的类型*.css
<html>
<head>
<link rel="样式文件的文件名" href=''css文件的路径">
</head>
</html>
3.行内样式
- 颜色控制:颜色值可以是英文单词
<标签 style="color:red"></标签>
color后可以写任意颜色的单词 ;也可以是红绿蓝三原色 rgb(255,0,0)根据这三个值的大小来进行配色,三个值的最大值都是255,最小值则是0。建议:如果要用三原色进行配色的话,可以在画图工具里面的调色板来查找你所需要的颜色的三原色的数值;颜色也可以根据十六进制的值进行表示;背景色的控制与颜色控制类似,只不过把color变成background-color。例如:<标签 style="background-color:red"></标签>
- 字体相关的样式:
font-size
像素n px
;字体本身的大小n em
;font-family
字体的类型:如宋体,隶书,楷体等等;font-style:italic
斜体;font-weight:bold
粗体 - 对齐方式:
text-align:center
居中,left
靠左对齐,right
靠右对齐 - 背景相关:
background-image:url
背景图片的路径;background-repeat:
控制背景图片如何重复no-repeat
不重复repeat-x
在x方向上重复,repeat-y
在y方向上重复;background-size: npx
控制背景图的大小 div
标签:这是一个容器标签可以包含,容纳其他的标签,他的作用是:当需要统一处理标签,或者对页面的布局有一定的要求时,就可以用div
标签:- 宽高:
width
:宽度height
:高度 他们的单位可以是px
像素,也可以是n%
:所占页面的比例 - 边框:
border-color:
边框颜色;border-style:
边框为实线,虚线等border-width
边框的宽度;他们可以合并为一个border: red solid 100%
- 文字修饰:
text-decoration:
值line-through
贯穿线underline
下划线