本文是CSS入门教程，详细介绍了基础选择器、字体与文本属性、CSS引入方式、Emmet语法、背景属性、浮动与定位等概念，并通过实例帮助理解。重点讲解了选择器优先级、盒子模型以及浮动的清除方法。
一 基本语法
<head>
<style>
选择器{
属性名：属性值;
属性名：属性值;
}
</style>
</head>
二 基础选择器
2.1 常用选择器
2.2 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: turquoise;
}
.red {
background-color: red;
width: 100px;
height: 100px;
}
.green {
background-color: green;
width: 100px;
height: 100px;
}
#yellow20{
font-size: 20px;
color: yellow;
}
*{
background-color: violet;
}
</style>
</head>
<body>
<div class="red">
</div>
<div class="green">
</div>
<div class="red">
</div>
<p>
这是标签选择器
</p>
<p>
帅哥
</p>
<div id="yellow20">这是id选择器</div>
</body>
</html>
2.3 选择器优先级
！important>行内样式>ID选择器>类选择器>标签选择器>继承选择器
原因：首先加载标签选择器,再加载类选择器，然后加载ID选择器，最后加载行内样式后加载会覆盖先加载的同名样式
三 css属性
3.1 字体属性
3.1.1font-family 字体种类
<style>
p{
font-family:"微软雅黑";
}
</style>
3.1.2 font-size 字体大小
<style>
p{
font-size:20px;
}
</style>
3.1.3 font-weight 字体粗细
<style>
p{
/*值从100-900，400是正常大小，可写成normal*/
font-weight:400;
}
</style>
3.1.4 font-style 字体样式
<style>
em{
/*这是把em标签改为正常字体*/
font-style:normal;
}
p{
/* 字体倾斜 */
font-style: italic;
}
</style>
3.1.5 字体样式的复合属性写法
<style>
#z{
/* font:font-style font-weight font-size font-family; */
/* 四个属性顺序不能更换，且font-size和font-family是必须要有的属性*/
font: normal 900 30px "微软雅黑";
}
</style>
3.2 文本属性
3.2.1 文本颜色color
颜色名称：使用英文单词
16进制的RGB值：#RRGGBB
rgb函数：rgb(red,green,blue)
3.2.2 对齐文本text-align
3.2.3 装饰文本text-decoration
3.2.4 文本缩进text-indent
3.2.5 行间距line-height
实例：
3.3 css引入方式
- 内部样式表
- 行内样式表
- 外联样式表
3.4 emmet语法快速生成HTML语法结构
5.".demo+enter"自动生成
<div class="demo"></div>
"#demo+enter"自动生成
<div id="demo"></div>
6.“.demo$*5{自增} +enter ”自动生成
<div class="demo1">自增</div>
<div class="demo2">自增</div>
<div class="demo3">自增</div>
<div class="demo4">自增</div>
<div class="demo5">自增</div>
7."div{文本}+enter"自动生成
<div>文本</div>
3.5 emmet语法快速生成css样式
首字母简写可快速生成css样式
例如："lh26 "可生成 line-height:26px;
“w200” 可生成 widtht：200px;
3.6 背景属性
- background-color
- background-image
background-image:url();
括号里面写图片的路径 - background-repeat
background-repeat：no-repeat;
background-repeat：repeat;
background-repeat：repeat-x;
background-repeat：repeat-y; - background-position
3.参数是混合单位
/*精确写法，x,y*/
background-position: 20px 10px;
/*方位词写法,不区分x,y*/
background-position: top;
/*混合写法，x,y*/
background-position: 20px center;
- background-attachment
/*图片随滚轮滑动*/
background-attachment:scroll;
/*图片固定不动*/
background-attachment:fixed;
实例：
属性总结：
背景属性混合写法：
- background-rgba 背景透明度
注：对于背景图片不起作用
实例：鼠标经过改变背景图片，用到链接伪类选择器
四 综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1{
text-align: center;font-family: 黑体;font-weight: normal;
}
#search{
text-align: center;font-family: 黑体;font-size: 16px;color: rgb(190, 190, 204);
}
a{
text-align: center;font-family: 黑体;font-weight: 100;text-decoration: none;color: blue;
}
button{
font-weight: 700;
}
.china{
text-indent: 2em;line-height: 28px;
}
.weather{
font-weight:700;
}
div
{
text-align: center;
}
.gray{
color: #666; width: 170px;
}
</style>
</head>
<body>
<h1>北方高温明日达高温 京津冀多地地表温度将超60°C</h1>
<div id="search">2019-07-0316:31:47来源:
<a href="http://www.weather.com.cn/">中国天气网</a>
<input type="text" value="请输入查询条件" class="gray">
<button>搜索</button> </div>
<hr>
<p class="china">
中国天气网讯今天(3日)，华北、黄准多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天(3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。
</p>
<p class="weather">
气温41.4℃!地温66.5!北京强势迎七月首个高温日
</p>
<p class="china">
今天，华北、黄准一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
07月03日14时地面自动观测站气温
长面
<div>
<img src="王俊凯/wjk.jpg" alt="">
</div>
</p>
</body>
</html>
五 复合选择器
5.1后代选择器
后代选择器选中的是指定元素的所有后代，父子级之间用空格连接
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li{
color:red;font-size: 20px;
}
ol li{
color: blue;
}
ol li p{
color: cadetblue;text-decoration: line-through;
}
.nav li p{
color: coral;
}
</style>
</head>
<body>
<ul>
<li>这是ul的孩子</li>
<li>这是ul的孩子</li>
<li>这是ul的孩子</li>
<li>这是ul的孩子</li>
</ul>
<ol>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
</ol>
<ol>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li><p>这是ol的孙子</p></li>
</ol>
<ol class="nav" >
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li>这是ol的孩子</li>
<li><p>这是ol的孙子</p></li>
</ol>
</body>
</html>
页面预览
5.2 子选择器
子选择器（子元素选择器）只能选择作为某元素的最近一级元素。
语法：元素1>元素2{样式声明}
例如：div>p{样式声明} /*选择div里面所有最近一级标签元素*/
- 元素1和元素2中间用大于号隔开
- 元素1是父级，元素2是子级，最终选择的是元素2
- 元素2必须是亲儿子，其孙子、重孙之类都不归他管。也可以叫他亲儿子选择器
5.3并集选择器
实例：
5.4链接伪类选择器
- a:link 选择未被访问过的链接
- a:visted 选择已经被访问过的链接
- a:hover 选择鼠标经过的链接
- a:active 选择鼠标点击而未弹起的链接
- link、visited、hover、active的顺序不能变！
<head>
<style>
a:link{
color: black;
}
a:visited{
color: rgb(87, 82, 82);
}
a:hover{
color: rgb(112, 30, 30);
}
a:active{
color: rgb(245, 169, 169);
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</div>
</body>
5.5 focus伪类选择器
：focus用于选取获得焦点的表单元素
<style>
input:focus{
background: #000;
}
</style>
<body>
<input type="text">
</body>
六 元素的显示模式
- 块元素就是：自己占一行，可以改变width、height、padding（内边距）、margin（外边距）
- 行元素就是：自己不占一行，不可以改变width、height、padding（内边距）、margin（外边距）
- 行内块元素：img、input标签（自己不占一行，但可以改变高和宽等）
- 行内元素和块元素的转换，利用css的display属性。
实例：小米商城侧边栏【显示向右箭头】
小tip:
a{
display:block ;
background-color: #a5a3a3;
text-indent: 2em;
width: 230px;
height: 40px;
/* 文字垂直居中：行高等于的盒子的高度 */
line-height: 40px;
text-decoration: none;
color: rgb(253, 252, 252);
}
七 css的三大特性
7.1 层叠性
- 样式冲突，就近原则
- 样式不冲突，不重叠
7.2继承性
子标签继承父标签的所有属性
text-,font-,line-这些可以继承，以及color属性
行高的继承
7.3优先级
- 选择器相同，执行层叠性
- 选择器不同，按选择器权重执行：！important>行内样式>ID选择器>类选择器/伪类选择器>标签选择器>继承选择器或*选择器
- 如果是复合选择器，则会有权重叠加，需要计算权重
八 盒子模型
8.1border边框
复合写法：三个属性值不区分顺序
border:20px solid pink
四条边可分开写，有两种写法，第二种写法有就近原则
表格细线边框：
/*合并单元格边框*/
border-collapse:collapse
8.2 padding内边距
padding-left: 2em;
padding-right: 2em;
padding-top: 2em;
padding-bottom: 2em;
/*简写，上下左右都变*/
padding: 2em;
注：border和padding都会改变盒子大小，加了border或padding后原本盒子会撑大
padding实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
border-top: #ff8500 3px solid;
border-bottom: #edeef0 1px solid;
width: 600px;
padding: 20px;
}
a{
display: inline;
height: 60px;
color: #4c4c4c;
text-decoration: none;
padding: 20px;
}
</style>
</head>
<body>
<a href="#">设为首页</a>
<a href="#">手机新浪网</a>
<a href="#">移动客户端</a>
<a href="#">博客</a>
<a href="#">微博</a>
<a href="#">关注我</a>
</body>
</html>
效果图
8.3margin外边距
原理同padding
8.4 外边距合并，嵌套块元素塌陷
实例：
8.5清除内外边距
8.6PS基本操作
8.5小米产品案例
效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
text-align: center;
}
body{
width: 234px;
height: 300px;
padding: 10px 0;
}
.p1{
color: #B0B0B0;
width: 214px;
height: 18px;
margin: 0 10px 10px;
font:12px "Helvetica Neue"
}
.p2{
color: #ff6700;
width: 214px;
height: 21px;
margin: 0 10px 14px;
text-align:center ;
}
.p3
{
color: #333;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin: 0 10px 2px;
text-align: center;}
img{
width: 160px;height: 160px;
}
</style>
</head>
<body>
<div>
<img src="xiaomi.jpg">
</div>
<p class="p3">
Xiaomi MIX Fold 2
</p>
<p class="p1">
超轻薄折叠机身设计，小米自然微水...
</p>
<p class="p2">
8999起
</p>
</body>
</html>
8.6圆角边框
border-radius:length
8.7盒子阴影box-shadow
实例：
8.8文字阴影
九 浮动
9.1浮动
浮动的特性
9.2 清除浮动
方法一：额外标签法
解释：原孩子12设置了浮动，显示在一行，不占有空间，如果不清除浮动，那么新孩子将会占有原来原孩子12占有的空间，而加了新盒子后清除了浮动，新孩子会在原孩子下面重新排列。（原盒子不设置高度，由原孩子撑开盒子）
方法二：父元素添加overflow属性
可以给父元素添加overflow的属性，将其属性值设置为hidden、auto、scroll
缺点：无法显示溢出的部分
方法三：after伪元素
方法四：双伪元素
9.3 PS切图
方法一：图层切图
方法二：切片工具
9.4 css属性建议书写顺序
十 定位
定位模式
边偏移
10.1静态定位static
具有标准流的特性，没有边偏移，不移动，不常用
10.2 相对定位 relative
自恋型，相对自己原来位置移动，后面的盒子不脱标
10.3绝对定位absolute
10.4固定定位fixed
如何相对版心固定：
10.5粘性定位sticky
10.6定位叠放次序
10.7绝对定位的盒子水平垂直居中
绝对定位和固定定位定位的盒子无法用margin：auto来居中（相对定位可以）
10.8定位的特殊特性
实例：
十一其他
11.1display 隐藏元素
11.2visibility可见性
11.3overflow溢出
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
