第五十一篇前端之CSS内容-CSDN博客

本文链接：https://blog.csdn.net/qq_45503700/article/details/104011435

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

一、什么是 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: red
    font-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;
}