文章目录
- 1 CSS 应用方式
- 2 选择器
- 3 样式
- 3.1 高度和宽度
- 3.2 块级和行内标签
- 3.3 字体和颜色
- 3.4 文字对齐方式
- 3.5 浮动
- 3.6 内边距
- 3.7 外边距
- 3.8 案例：小米商城
- 4 知识点
- 4.1 hover（伪类）
- 4.2 after（伪类）
- 4.3 position
- 4.4 border
- 4.5 背景色
1 CSS 应用方式
- 在标签上
<img src="..." style="height: 100px" /><div style="color:red;">中国联通</div>
- 在 head 标签中写 style 标签
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的联通</title><style>.c1{color:red;}</style>
</head>
<body><h1 style='c1'>中国联通</h1>
</body>
</html>
- 写到文件中
.c1{height:100px;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的联通</title><link rel="stylesheet" href="common.css">
</head>
<body><h1 style='c1'>中国联通</h1>
</body>
</html>
2 选择器
- ID 选择器；
#c1{}
<div id="c1"></div>
- 类选择器；【最常用】
.c2{}
<div class="c2"></div>
- 标签选择器；
div{}
<div>xxx</div>
- 属性选择器
input[type='text']{border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的联通</title>input[type='text']{border:1px solid red;}
</head>
<body><input type="text" />
</body>
</html>
- 后代选择器
.yy li{color:pink;
}
<!-- 只用于子代-->
.yy > a{color:dodgerblue;
}
<div class="yy"><a>百度</a><div><a>谷歌</a></div><ul><li>美国</li><li>日本</li><li>韩国</li></ul>
</div>
3 样式
3.1 高度和宽度
.c1{height:300px;width:500px;
}
注意事项：
- width 还可以用百分比；
- 对于行内标签，默认无效；
- 对于块级标签，默认有效（但是即使右侧区域空白也不允许其他内容占用）
3.2 块级和行内标签
- 块级
- 行内
- css 样式 ： 标签 -> display:inline-block 行内标签
display: block 块级标签
3.3 字体和颜色
.c1{color: # 00FF7F; /* 字体颜色 */font-size:18px; /* 字体大小 */font-weight: 400; /* 加粗 */font-family: Microsoft Yahei; /* 字体样式 */
}
3.4 文字对齐方式
.c1{text-align:center; /* 水平方向居中 */line-height: 59px; /* 垂直方向居中*/
}
3.5 浮动
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><span>左边</span><span style="float: right">右边</span>
</body>
</html>
div 默认块级标签，如果将其设置为 浮动 ，那么就是自己有多宽就占多宽，不会占一整行。
但是如果让标签浮动起来，那么会脱离文档流， 可能覆盖原有的数据。因此记得在若干浮动的 div 之后加一句：
<div style="clear: both;"></div>
3.6 内边距
.outer{padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;
}
.outer{padding: 20px;
}
.outer{padding: 20px, 10px, 5px, 15px;/* 上 右 下 左*/
}
3.7 外边距
我与别人的距离。
.outer{margin-top: 20px;
}
3.8 案例：小米商城
总结：
- body 标签，默认有一个边距，造成页面四边有白色间隙，如何去除？
body{margin : 0;
}
- 内容居中
- 文本居中，文本会在这个区域中居中；
<div style="width= 200px; text-align:center;">rice</div>- 区域居中， 自己要有宽度， 并且使用 margin-left:auto; margin-right:auto;
.container{width: 980px;margin: 0 auto;
}
<div class="container">rice
</div>
- 如果父亲没有高度或宽度，会被孩子支撑起来。（跟孩子的高度或宽度一致）
- a 标签 是行内标签，其高度、内外边距，默认无效；如果要改变它的相关参数，需要先把它的样式设置为 display:inline-block；
- a 标签默认有下划线，如果要去掉：
text-decoration: none;
- 垂直方向居中
- 文本 + line-height
- 图片 + 边距
- 鼠标放上去字体变化， hover：
.c1:hover{...
}
a:hover{
}
- 设置透明度
opacity:0.5; /* 0~1 */
4 知识点
4.1 hover（伪类）
鼠标移动到该区域会产生新的效果。
4.2 after（伪类）
- 在原有文本后追加内容；
- 清除浮动；
<style>
.clearfix:after{content:"";display: block;clear: both;
}
</style>
4.3 position
- fixed
固定在窗口的某个位置。
.back{position: fixed;width: 68px;height: 60px;border: 1px solid red;left: 0px;top: 0px;
}<div class="back"></div>
案例： 对话框
2.relative 和 absolute
外层用 relative ，内层样式指定 absolute ，内层位置相对于外层变化。
4.4 border
border: 3px solid red;/*边框的宽度 实线 颜色*/
border-left /* 左边框 */
透明色：transparent
4.5 背景色
background-color: red;
