CSS
CSS的引入
- 内联样式
- 内部样式(内嵌样式)
- 引入外部文件
- 导入外部样式文件
内联样式
直接对html标签使用style属性,这样与单独设置相似没有优势,一般不用
<p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容</p>
内部样式
将样式进行抽取,把结构和样式进行分离,但是,该样式只对当前的html文件起作用,不能作用在其他的文件.样式资源无法充分利用.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content = "text/html;charset=utf-8"/>
<title>css</title>
<meta name="author" content = "zxx">
<meta name="Description" content = "首次进军h5">
<meta name="keywords" content = "加油">
<style type="text/css">
p{
color: #ff00ff;
text-decoration:underline;
font-weight: bold;
font-size: 25px;
}
</style>
</head>
<body>
<p>标题内容</p>
<p>引言内容</p>
<p>正文内容</p>
<p>结尾内容</p>
</body>
</html>
引入外部文件
将结构和表现彻底分离,使用频率最高
<head>
<link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<h2>哈哈哈</h2>
<p>标题内容</p>
<p>引言内容</p>
<p>正文内容</p>
<p>结尾内容</p>
</body>
1.css单独存放样式,可以给多个html文件使用,完美!
h2{
color: #0000ff;
font-weight: bold;
font-size: 25px;
}
p{
color: #ff00ff;
text-decoration:underline;
font-weight: bold;
font-size: 25px;
}
导入外部样式文件
与方式类似,只是语法不同.在之间使用
语法:@import”样式文件”或@import url(“样式文件”)
但是有些浏览器并不支持这种导入方式,所以最好用link的方式进行导入
<style type="text/css">
@import url(1.css);
</style>
四种引入方式的优先级
内连样式>内部引用>import>link
CSS常用属性
- CSS字体和文本相关属性
- CSS边框和背景相关属性
- CSS列表和表格相关属性
- CSS常用伪类别相关属性
CSS字体和文本相关属性
font-family 字体系列
font-size 字体尺寸像素或者相对尺寸
font-style 字体样式,normal,italic(斜体),oblique(斜体),不同的浏览器使用不同的斜体设置
font-weight 字体粗细,nomal,bold,自定义粗细.
letter-spacing 字符间距
line-height 文本行高
text-align 设置文本对齐方式
text-decoration 设置文本的装饰效果overline,underline,line-through
text-indent 设置文本首行缩进
text-transform 控制文本大小写,主要uppercase,lowercase,capitalize(英文字母首字母大写)
word-spacing 设置单词间距
p.start{
text-decoration: line-through;
text-align: center;
text-indent: 5px;
text-transform: capitalize;
line-height: 10px;
word-spacing: 20px;
letter-spacing: 5px;
font-style: oblique;
font-weight: normal;
font-size: 30px;
}
.start b{
font-size: 0.5em;
font-weight: normal;
}
CSS边框和背景相关属性
边框
border 设置所有边框的样式
border:5px double #FF00FF;
border-style 边框样式,
border-color 边框颜色
border-width 边框的宽度
border-left-style 左边框样式,
border-left-color 左边框颜色
border-left-width 左边框的宽度
背景
background 背景所有属性
background:url(bg5.JPG) no-repeat 200px 25px;\
background-attachment 背景图片是否随着网页的其余部分滚动scroll(一起滚动),fixed(固定);
background-repeat 是否重复平铺
background-position 在页面的位置
<style>
#content{
width: 200px;
height: 300px;
border-width: 2px;
border-style: dashed;
border-color: red;
border-left: 5px double blue;
}
body{
/* background: url(banner.jpg);
background-position: 200px 150px;
background-repeat: no-repeat;
background-attachment: scroll; */
background: url(banner.jpg) 200px 150px no-repeat scroll;
}
</style>
CSS列表和表格相关属性
列表
list-style 设置所有的列表属性
list-style-image 将图像设置为列表项标记,url值
list-style-position 设置列表项标记放置的位置,outside和inside
list-style-type 设置列表标记的类型,不可以与list-style-image同时出现.
#hobby{
background-color: #aaa;
list-style: url(image.png) inside;
}
----------------------------
<ul id="hobby">
<li>篮球</li>
<li>足球</li>
<li>羽毛球</li>
</ul>
表格
border-collapse 设置是否把表格边框合并为单一的边框
border-spacing 设置分割边个边框的距离,不能喝border-collapse同时出现
caption-side 设置表格标题的位置,顶部或者底部
empty-cells 设置是否显示表格中的空单元格
#tb{
height: 100px;
width: 50%;
border-spacing: 20px;
font-family: "宋体";
caption-side: bottom;
empty-cells: hide;
border: red 1px solid;
}
#tb td {
border: red 1px solid;
}
------------------------------
<table id="tb">
<caption>我的表格</caption>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td></td>
</tr>
</table>
CSS定位与DIV布局
- 盒子模型
- 元素定位
盒子模型
盒子的宽度或高度为content+padding+border+margin
border : color,width,style
padding
- 两个块级元素之间的距离是两者中的较大者的margin值
- 当块之间是父子关系,通过设置子块的margin为负数,可以是子块从父块中”分离”出来
元素定位
- float–浮动left,right,none.当一个块级元素变成float,就会相当于一个行级元素,不再占据一行.
float:left;
如果不想被其他的浮动元素影响,可以设置块级元素的clear属性.
clear:left; position定位:当将子块的position设置为absolute时,子块已经不再从属于父块,器左边框设置的距离是相对于页面body的距离,而不是父块的距离.
当将子块的position设置为relative是,与absolute完全不同,这是子块是相对于自身在父块原来的位置进行定位的.float和position的区别:
设置成position时,兄弟块不再围绕这脱离父类的那个元素,而是当它不存在z-index:调整定位时重叠块的上下位置,当块设置了position属性是,该值可设置个快之间的重叠高低关系.值大的往上放.