第五十一篇前端之CSS内容

心得：哪里有什么心得，在我这个年纪真的睡不着觉，知道什么是觉醒吗？不后悔自己踏出的每一步。

一、什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一
样式对网页中元素位置的排版进行像素级精确控制

二、语法

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性和值被冒号分开。所以我们着重要看的就是选择器和相应属性的用法。

示例和注释

p { color: #ff0000; }
/*这是个注释*/

引入方式

外部样式表
通过在html中定义link引入外部css样式 <link rel="stylesheet" href="beijing.css">
内部样式表
通过在head中定义style来引入样式<style> #c1 { background:red; height:500px } </style>
内联样式
在标签内部定义样式<p style="color:sienna;margin-left:20px">这是一个段落。</p>

三、选择器

元素选择器
p {color: "red";}

id选择器
井号隔开 #number { background-color: red; }
类选择器,逗号分组
点隔开 .c1,p.c2 { color: red; }
通用选择器
*{margin:0;} 或者body{margin:0;}
后代选择器
空格隔开 li a {color:green;} 对中间隔几层不敏感
儿子选择器
大于号隔开 li a {color:green;} 必须是层级，一层一层
毗邻选择器
择所有紧接着<div>元素之后的<p>元素
div+p { margin: 5px; }
弟弟选择器
i1后面所有的兄弟p标签#i1~p { border: 2px solid royalblue; }
伪类选择器

/* 未访问的链接 */
a:link {color: #FF0000
}/* 已访问的链接 */
a:visited {color: #00FF00
} /* 鼠标移动到链接上 */
a:hover {color: #FF00FF
} /* 选定的链接 */
a:active {color: #0000FF
}/*input输入框获取焦点时样式*/
input:focus {outline: none;background-color: #eee;
}

伪元素选择器

p:first-letter {font-size: 48px;color: red;
}

before和after多用于清除浮动

/*在每个<p>元素之前插入内容*/
p:before {content:"*";color:red;
}

/*在每个<p>元素之后插入内容*/
p:after {content:"[?]";color:blue;
}

选择器的优先级

四、CSS属性和属性值

1. 宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽度，内联标签的宽度由内容来决定。

2. 字体属性

字体
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。多个字体系列是用一个逗号分隔指明：

p{font-family:"Times New Roman", Times, serif;}

大小

h2 {font-size:30px;}
p {font-size:14px;}

粗细

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:bolder;}
p.thicker {font-weight:900;}

3. 文本属性

颜色
颜色是通过CSS最经常的指定：
十六进制值 - 如"＃FF0000"
一个RGB值 - “RGB（255,0,0）”
颜色的名称 - 如"red"

body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

文本的对齐方式

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐

文本修饰

/*常用的为去掉a标签默认的自划线：*/
a {text-decoration: none;
}

缩进

p {text-indent: 32px;
}

行高

p.small {line-height:90%}
p.big {line-height:200%}

字间距

h1 {letter-spacing:2px} 字母间距
p
{ word-spacing:30px; }  指定段字之间的空间，应该是30像素：

4. 背景

/*背景颜色*/
body {background-color:#b0c4de;}
/*背景图片不重复*/
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
/*背景位置*/
background-position:right top;
/*一次声明*/
body {background:#ffffff url('img_tree.png') no-repeat right top;}
/*固定图片*/
{background-attachment:fixed;}

5. 边框
CSS 边框 (border) 可以是围绕元素内容和内边距的一条或多条线

border-width 指定边框的宽度
border-style 指定边框的样式
border-color 指定边框的颜色：

border-color:红，绿，蓝,粉红色;
上边框是红色
右边框是绿色
底部边框是蓝
左边框是粉红色

p
{border:5px solid red;
}

将border-radius设置为长或高的一半即可得到一个圆形。

6. display属性
block将内联标签显示为块级标签
inline将块级标签显示为内联标签

7. 盒子模型

Margin（外边距）
清除边框区域。Margin没有背景颜色，它是完全透明
Border（边框）
边框周围的填充和内容。边框是受到盒子的背景颜色影响
Padding（内边距）
清除内容周围的区域。会受到框中填充的背景颜色影响
Content（内容）
盒子的内容，显示文本和图像

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

简写顺序：上右下左

/*上右下左*/
.margin-test {margin: 5px 10px 15px 20px;/*居中*/
.mycenter {margin: 0 auto;
}
}

8. 浮动float

CSS float 属性定义元素在哪个方向浮动，浮动元素会生成一个块级框，直到该块级框的外边缘碰到包含框或者其他的浮动框为止。
left：向左浮动
right：向右浮动
none：默认值，不浮动
8.1 注意：浮动的标签会脱离文档流,会使之后的标签占据它当前的位置会造成重叠，如下c2占据的起始位置在c1处:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动</title><style>.c1 {float:left;width:100px;height:100px;border:1px solid black;}.c2{width:200px;height:200px;border:1px solid red;}</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

在c2中加入了clear:left;后，另起一行开始

8.2子元素浮动之后，子元素脱离了文档，导致父标签失去了内容，导致文档坍塌f
浮动前：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动父标签</title><style>.c1{width:50px;height:50px;border:1px solid black;}.father{background-color:red;}</style>
</head>
<body>
<div class="father"><div class="c1"></div><div class="c1"></div><div class="c1"></div>
</div>
</body>
</html>

设置float:left浮动后，父标签的背景色消失：

为了不干扰之后的元素和父标签的内容，需要清除浮动：
在浮动元素的同级的最后一个空块级标签内加入clear清除浮动

清除浮动clear
清除浮动后会另起一行
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

伪元素清除法

.clearfix:after {content: "";display: block;clear: both;
}

将需要清除浮动的标签中加入类clearfix

9. overflow溢出

当空间不够显示时，可以使用此属性

10. 定位position

Fixed 定位
即使窗口是滚动的它也不会移动
Relative 定位
相对定位元素的定位是相对其正常位置

h2.pos_right
{
position:relative;
left:20px;
}

Absolute 定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>:

h2
{
position:absolute;
left:100px;
top:150px;
}

z-index
设置对象层叠顺序
z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

CSS实例1：

HTML代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>我的博客</title><link rel="stylesheet" href="blog.css">
</head>
<body>
<!--左边的导航栏-->
<div class="left"><div class="img"><img src="little_pig.jpg" alt=""></div><div class="name">小猪猪的博客</div><div class="text">这头猪很懒，没有什么要说的</div><ul><li><a href="#">关于我</a></li><li><a href="#">微博</a></li><li><a href="#">公众号</a></li></ul><ul><li><a href="#">Python</a></li><li><a href="#">C语言</a></li><li><a href="#">JAVA</a></li></ul>
</div>
<!--右边的内容-->
<div class="right"><div class="article"><div class="title"><a href="#">Python从入门到放弃</a></div><div class="date">2020.01.16</div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag">#HTML #CSS</div></div><div class="article"><div class="title"><a href="#">Python成就之路</a></div><div class="date">2020.01.16</div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag">#HTML #CSS</div></div><div class="article"><div class="title"><a href="#">Python的血泪史</a></div><div class="date">2020.01.16</div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag">#HTML #CSS</div></div><div class="article"><div class="title"><a href="#">Python的简洁之美</a></div><div class="date">2020.01.16</div><div class="content">在苍茫的大海上，狂风卷积着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲的飞翔。</div><div class="tag">#HTML #CSS</div></div>
</div>
</body>
</html>

CSS代码：

* {margin: 0;
}body {background-color: #eee;line-height: 1.2;
}a {text-decoration: none;color: inherit;
}/* 左侧边栏样式 开始 */
.side-bar {width: 20%;position: fixed;height: 100%;float: left;color: #eee;background-color: #4d4d4d;
}
.side-bar>* {padding: 20px 15px;
}/* .header .logo {line-height: 1;font-size: 30px;display:inline-block;margin-bottom: 15px;
} */.header>* {margin: 10px 0;
}.header .logo {display: block;border: 5px solid #fff;margin: 0 auto;position: relative;overflow: hidden;width: 128px;height: 128px;border-radius: 50%;
}.header .author-name {text-align: center
}.logo>img {max-width: 100%;
}.side-bar .nav a,
.side-bar .tag-list a {display: block;padding: 5px;color: #888;transition: color 200ms;
}.side-bar .nav a:hover,
.side-bar .tag-list a:hover {color: #eee
}.side-bar .nav a {font-weight: bold;
}
/* 左侧边栏样式 结束 *//* 右侧内容区 */
.main {width: 80%;float: right;color: black;
}.article-list {padding: 20px;margin-right: 10%;
}
.main .article {background-color: white;padding: 15px;margin-bottom: 20px;box-shadow: 3px 3px 3px rgba(0,0,0, 0.2)
}.article-header {padding-bottom: 15px;
}.article-title {font-size: 24px;font-weight: bold;
}
.article-date {float: right;
}
.article-tag {margin-top: 20px;border-top: 1px solid #eee;padding: 15px 0;
}

css实例2:
实现一个小米商城的网页排列：
1

2

3

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小米商城</title><link rel="stylesheet" href="mi.css"></head>
<body>
<!--顶部导航栏开始-->
<div class="bar"><div class="content"><div class="left_bar"><ul class=""><li class="left_bar_li"><a href="">玉米商城</a></li><li class="left_bar_li"><a href="">咖啡商城</a></li><li class="left_bar_li"><a href="">橙汁商城</a></li><li class="left_bar_li"><a href="">葡萄商城</a></li><li class="left_bar_li"><a href="">苹果商城</a></li></ul></div><div class="right_bar"><ul class="clearfix"><li class="right_bar_li"><a href="">登录</a></li><li class="right_bar_li"><a href="">注册</a></li><li class="right_bar_li"><a href="">消息</a></li><li class="right_bar_li"><a href="">购物车</a></li></ul></div></div></div><!--顶部导航栏结束--><!--主菜单开始-->
<div class="main">
<!--    主菜单导航栏开始--><div class="header"><div class="logo cargo"><img src="./img/logo.png" alt=""><img src="./img/logo_r.png" alt=""></div><ul class="top_menu"><li class="cargo"><a href="">玉米手机</a></li><li class="cargo"><a href="">苞米</a></li><li class="cargo"><a href="">电视</a></li><li class="cargo"><a href="">爆米花</a></li><li class="cargo"><a href="">路由器</a></li><li class="cargo"><a href="">智能硬件</a></li><li class="cargo"><a href="">服务</a></li><li class="cargo"><a href="">社区</a></li></ul><div class="search clearfix"><input class="input" type="text"><button>搜索</button></div></div>
<!--    主菜单导航栏结束--><!--    主菜单开始--><div class="menu_"><div class="left_menu"><ul><li><a href="">手机 电话卡</a></li><li><a href="">电视 盒子</a></li><li><a href="">笔记本</a></li><li><a href="">智能 家电</a></li><li><a href="">健康 家居</a></li><li><a href="">出行 儿童</a></li><li><a href="">路由器 手机配件</a></li><li><a href="">移动电源 插线板</a></li><li><a href="">耳机 音箱</a></li><li><a href="">生活 米兔</a></li></ul></div><div class="right_menu clearfix"><img src="./img/carousel.png" alt=""></div></div><!--    主菜单结束-->
<!--    广告开始--><div class="adv clearfix"><div class="one"><a href=""><img src="./img/pic0.png" alt=""></a></div><div class="two"><a href=""><img src="./img/pic1.png" alt=""></a></div><div class="three"><a href=""><img src="./img/pic2.png" alt=""></a></div><div class="four"><a href=""><img src="./img/pic3.png" alt=""></a></div></div>
<!--    广告结束-->
<!--    快速闪购开始--><div class="flash clearfix"><h2>快速闪购</h2><div class="flash_left"><a href=""><img src="./img/flash0.png" alt=""></a></div><div class="flash_left"><a href=""><img src="./img/flash1.png" alt=""></a></div><div class="flash_left"><a href=""><img src="./img/flash2.png" alt=""></a></div><div class="flash_left"><a href=""><img src="./img/flash1.png" alt=""></a></div><div class="flash_left"><a href=""><img src="./img/flash2.png" alt=""></a></div></div>
<!--    快速闪购结束-->
<!--    热评开始--><div class="comment clearfix"><h2>热评商品</h2><div class="comment1"><img src="./img/item11.png" alt=""><p class="goods_comment"><a href="">东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在.</a></p><p class="from"><a href="">来源于水军1号的评价</a></p><p class="price"><a href="">玉米插线板 | 49元</a></p></div><div class="comment1"><img src="./img/item12.png" alt=""><p class="goods_comment"><a href="">东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在.</a></p><p class="from"><a href="">来源于水军1号的评价</a></p><p class="price"><a href="">玉米插线板 | 49元</a></p></div><div class="comment1"><img src="./img/item11.png" alt=""><p class="goods_comment"><a href="">东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在.</a></p><p class="from"><a href="">来源于水军1号的评价</a></p><p class="price"><a href="">玉米插线板 | 49元</a></p></div><div class="comment1"><img src="./img/item12.png" alt=""><p class="goods_comment"><a href="">东西真心不错，用过最好用的插线板，做工外观没得挑剔，3个USB接口很实用，充电快，建议不包邮的应该在.</a></p><p class="from"><a href="">来源于水军1号的评价</a></p><p class="price"><a href="">玉米插线板 | 49元</a></p></div></div>
<!--    热评结束-->
</div>
<!--主菜单结束--><!--结束导航-->
<div class="over"><ul class="over_li"><li class="fir"><a href="">预约维修</a></li><li><a href="">7天无理由退货</a></li><li><a href="">15天免费换货</a></li><li><a href="">满150元包邮</a></li><li class="last"><a class="las" href="">520余家售后网点</a></li></ul>
</div>
</body>
</html>

CSS代码：

/*初始化浏览器默认边距和内填充*/
*{margin:0;
padding:0;
}
/*去掉ul标签的圆点*/
ul{list-style-type:none;
}
/*去掉a标签的下划线*/
a{font:white;
text-decoration:none;
}
/*鼠标触碰到a标签时的颜色*/
a:hover{background-color:orange;
}
/*清除浮动的方法，需要清除时，可以直接使用属性clearfix,使用后会在下一行排列*/
.clearfix:after{content:"";
display:block;
clear:both;
}
/*固定导航栏的背景色和大小*/
.bar{display:block;
width:100%;
height:50px;
background-color:grey;
position:fixed;
top:0;
}
/*调整内容*/
.content{width:1226px;
margin:15px auto;
}
/*左飘*/
.left_bar_li{float:left;
padding-right:15px;
}
/*右飘*/
.right_bar_li{float:right;
padding-left:15px;
}
/*设置主文框架*/
.main{width:1226px;
margin:0 auto;
}
/*将内容下移*/
.header{margin:50px auto;
}
/*左飘*/
.cargo{float:left;
padding-right:15px;}.top_menu{padding-top:20px;
}.logo{margin-right:15px;
}
/*设定搜索框*/
.search{width: 300px;height: 50px;float:right;
}.search input {border: 1px solid #e0e0e0;width: 80%;
}
.search button {border: 1px solid #e0e0e0;width: 19%;
}
/*左飘*/
.search input,
.search button {padding: 10px 0;display: block;float: left;
}.left_menu{width: 234px;
float:left;
background-color: #0a3651;
padding: 20px 0;
}.left_menu a{color: white;display: block;height: 42px;line-height: 42px;padding: 0 25px;
}.right_menu {width: 992px;
float:right;
}.one , .two , .three, .four{float:left;
margin:30px 10px 0 0;
}h2{margin:15px 0;
}.flash_left{float:left;
margin:15px 10px 20px 0;
}.comment1{width:296px;
background-color:#f1ece4;
float:left;
margin-right:10px;
}.goods_comment{padding:10px 10px;
}.from{height: 18px;margin: 0 48px 8px;padding: 0 10px 0 0;font-size: 12px;
}.price {color: redfont-weight:bolder;margin: 0 48px 8px;padding: 0 10px 0 0;
}.over{margin-top:50px;
width:100%;
height:70px;
background-color:#e8e1e1;
}.over_li>li{float:left;
padding:30px;}.over_li .fir{margin-left:300px;
}.over_li a{border-right:1px solid black;
padding-right:30px;
}
/*去掉右边框*/
.over_li .las{border-right:none;
}