一、CSS样式的写法
样式写法一:(写在head里面)
<head>
<style type="text/css">
div{
background(1.jpg);
}
</style>
</head>
<body>
<div></div>
</body>
样式写法二:(链接一个css文件)
mycss.css
内容:
div{
background(1.jpg);
}
调用css:
<head>
<link rel="stylesheet" type="text/css" href="css/mycss.css">
</head>
<body>
<div></div>
</body>
link 链接
rel 链接到styleshee
type 文本类型
href 文件路径
样式写法三:(写在标签里面)
<head>
<style type="text/css">
div{
}
</style>
</head>
<body>
<div ></div>
</body>
二、标签选择器
-
id
#id名称(对唯一一个id名字进行样式编辑)
-
class
.class名称(同上)
(注:class=“ a b” 一个标签拥有两个样式(a和b),只有class可以使用空格,id用不了)
-
标签名直接使用
-
.a,.b
两个标签使用同一个样式,样式之间用“,”隔开。
三、样式的层叠优先级
id>class>标签
四、伪类选择器
-
a:link 超链接
-
a:visited 超链接点击后的样式
-
a:active 长按鼠标时的动作
-
a:hover 鼠标悬浮在超链接上发生的动作
五、表格设置
-
边框——border
-
border:1 px solid red;
-
圆弧——border-radius
-
border-radius:50%(圆)
-
表格边框间距——border-spacing
-
border-spacing:100px;==cellspacing;
-
表格边框合并——border-collapse
-
border-collapse:collapse;
-
宽和高
-
width,height(height,不能使用百分比)
-
文字设置
-
font-size
-
颜色
-
color
-
字体
-
family
-
水平方向:text-align:left,center,right
-
垂直方向:vertical-align:bottom,top,middle
-
背景图片:
-
设置图片:background-image:url(img/1.jpg)
-
background-repeat
-
repeat 默认重复
-
no-repeat 不重复
-
repeat-x 横向重复
-
repeat-y 纵向重复
-
background-size
-
cover 覆盖背景区域
-
contion 拉伸填充