本文对css只做基本介绍
具体可参考为w3cschool的学习:http://www.w3school.com.cn/css/index.asp
1.css层叠样式表
CSS(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言)或者XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
css一共有三种常见的的存在形式:
(1)元素内联
在html的body段中,直接在标签头部属性块引入
eg:
<div style="background-color: green; font-size: 24px; color: red">元素内联</div>
(2)页面嵌入
在html页面的head段中,集中引入style块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.head{
background-color: red
}
.middle{
background-color: yellow;
font-size:34px;
width: 300px;
height:300px;
}
</style>
</head>
<body>
<div class="head">欢迎</div>
<div class="middle">你好</div>
</body>
</html>
(3)外部引入
将css单独写一个文件,并将整个文件引入html中
css文件:div.css
.head{
background-color: blue;text-align: center;padding: 20px; }html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="div.css">
</head>
<body>
<div class="head">
<h1>页面顶部区域</h1>
</div>
<div class="left">
<h1>页面左部区域</h1>
</div>
<div class="middele">
<h1>页面中间区域</h1>
</div>
<div class="foot">
<h1>页面底部区域</h1>
</div>
<!-- 样式:表现的形式,字体的大小,颜色、背景颜色、布局 -->
</body>
</html>
css就是对html代码的body段中的各种标签进行装饰的语言,如果我们要对某一个标签进行装饰,首先要做的就是:
(1)、定位:找到对应的标签
(2)、样式:通过修改标签对应的属性
2、选择器
选择器就是css用来定位的工具
例如
<body>
<div class="head">欢迎</div>
<div class="middle">你好</div>
<div class="flooter1" id="i4">11111111</div>
<div class="flooter2" >11111111</div>
<input type="text" name="1a">
<p>hello,hello</p>
</body>
1、标签选择器
<style type="text/css"> p{background-color: green}</style>
标签选择器会对指定的标签类型进行样式装饰。
2、id选择器:
<style type="text/css">#i4{background-color: pink}</style>
3.class选择器:
<style type="text/css">
.head{
background-color: red
}
.middle{
background-color: yellow;
font-size:34px;
width: 300px;
height:300px;
}
</style>
4.属性选择器:
<style type="text/css">input[type="text"]{background-color: purple}</style>
5.组合选择器:
<style type="text/css">input,h1,h2{background-color: red}</style>
3、css常用样式及属性
width:宽度,可用于像素设定固定宽度,也可用于百分比;
width:200px
width:100%
height:高度,一般使用像素设置,或者不设置,让其根据内容的多少自适应;
因为浏览器有宽度,但是高度没有限制,理论上可以无限,因此width可以使用百分比,而height不可以
font字体:
size:设置大小,以px为单位;
weight:粗细,100-800不等,可以自行测试;
family:设置字体
<input type="button" name="bb" value="百度一下,你就知道" style="font-size: 20px; font-family: serif;font-weight: 600">
background背景
background-color 背景色
背景色的设置有三种方式:
background-color:red;
background-color:#ff0000;
background-color:rgb(43 23 0);
background-image 背景图片
<a href="http://wwww.baidu.com" style="background-image: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2832677122,3463918518&fm=173&app=25&f=JPEG?w=218&h=146&s=76A2A5E50E730E925F2034B303008010);">跳转到百度首页去</a>
背景图像的位置是根据background-position属性设置的,如果未设置位置,则图片会被放在元素的左上角
4、border:框体
border:1px solid red;//1像素 实线 红色边框
框体除了solid实线,还有dashed、double等
input标签是自带1px的边框,也可以通过设置0px来让input的默认边框消失
5、margin:外边距
css外边距的属性是顺时针走的,也就是:top、right、bottom、left
设置p元素的4个边距:
p
{
margin:2cm 4cm 3cm 4cm;
}
浏览器支持
IE | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|
所有浏览器都支持margin属性
定义和用法
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
eg1:
margin:10px 5px 15px 20px;
·上外边距是 10px
·右外边距是 5px
·下外边距是 15px
·左外边距是 20px
eg2:
margin:10px 5px 15px;
·上外边距是10px
·左右外边距均为5px
·下外边距为15px
eg3:
margin:10px 20px;
·上下外边距为:10px;
·左右外边距为:20px;
eg4:
margin:10px
·上下左右外边距均为10px;
可能的值
值 | 描述 |
---|---|
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
6、padding:内边距
设置 p 元素的 4 个内边距:
p
{
padding:2cm 4cm 3cm 4cm;
}
浏览器支持
所有浏览器都支持 padding 属性。
定义和用法
padding 简写属性在一个声明中设置所有内边距属性。
说明
这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
注释:不允许使用负值。
例子 1
padding:10px 5px 15px 20px;
- 上内边距是 10px
- 右内边距是 5px
- 下内边距是 15px
- 左内边距是 20px
例子 2
padding:10px 5px 15px;
- 上内边距是 10px
- 右内边距和左内边距是 5px
- 下内边距是 15px
例子 3
padding:10px 5px;
- 上内边距和下内边距是 10px
- 右内边距和左内边距是 5px
例子 4
padding:10px;
- 所有 4 个内边距都是 10px
可能的值
值 | 描述 |
---|---|
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
inherit | 规定应该从父元素继承内边距。 |