css样式导入
<head>
<meta charset="utf-8">
<title></title>
<!-- 链接式 先找css文件，在渲染html-->
<head>....link导入css样式</head>
<!-- <link rel="stylesheet" href="css/test.css"> -->
<!-- 导入式 先渲染html在找css-->
<style >
@import url("css/test.css");
</style>
文字样式
字体大小 最小不可以小于十二像素
font-size:26px;
字体类型
font-family: arial;
字体加粗 bold=700
font-weight: bold;
字体风格 italic斜体
font-style: italic;
文本样式
标签宽度
width: 300px;
文本颜色
color: #0000FF;
文本对其方式 left right center
text-align: right;
首行缩进 1em=1个字符大小
text-indent: 2em;
文本修饰 underline下划线 none没有任何文本修饰
text—decoration:none ;
行高
line-height:30px ;
垂直居中涉及的不是内容，是当前元素
默认向下对齐
垂直居中middle上对齐top
vertical-align:middle;
伪类
伪类----一些英文单词，代表种状态
元素 伪类{ }
没有下划线
a{
text-decoration:none;
}
hover 鼠标悬停
a:hover{
color: red;
text-decoration: none;
}
边框
边框的：颜色 粗细 样式solid实线 dashed虚线
border:red 1px dashed;
圆角半径
border-radius: 10px;
阴影 x,y,z 发光度color
box-shadow: 5px 7px 8px red;
重置列表样式
ul，ol
list-style：none；去掉列表样式
去掉下滑线
a{
text-decoration: none;
}
边距
内边距
padding: 10px;
padding 10px四周编剧
padding: 5px 20px; 第一参数上下 ，第二参数左右
padding: 5px 20px 30px 40px;上右下左
padding-bottom: 20px; 下
外边距
margin:10px;
margin-bottom:10px ;
- margin的x轴方向不存在叠加问题
- margin的Y轴方向存在叠加问题 取最大值
样式重置
div{
padding: 0;
margin: 0;
}
使用外边距居中问题
text-align: center;
margin: 50px auto;
backgroud使用
background - color
background-imge
背景图片默认重复平铺
位置可以写像素，也可以写固定的英文表示确切的位置
left right center
top bottom center
background: url(img/a1.jpg) no-repeat 10px 50px red;
是否重复平铺
no-repeat不重复
repeat-x x轴平铺
repeat-y y轴平铺
background: url(img/a1.jpg) repeat-x center center red;
display
display ：none ：从文档流中消失
块元素block
内联元素 inline
内联块元素inline-block
文件流
网友评论