CSS层叠样式表基础学习

最新推荐文章于 2022-10-11 16:41:24 发布

鞋子不会飞

最新推荐文章于 2022-10-11 16:41:24 发布

阅读量349

点赞数 1

分类专栏： Web # css

本文链接：https://blog.csdn.net/weixin_45651336/article/details/105280201

版权

Web 同时被 2 个专栏收录

34 篇文章 1 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

1.css 的介绍

css(Cascading Style Sheet)层叠样式表，它是用来美化页面的一种语言。

1.1css理解

没有css
有css

1.2. css 的作用

1 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

2 控制页面布局, 比如: 设置浮动、定位等样式。

1.3. css 的基本语法

选择器{

样式规则

}

样式规则：

属性名1：属性值1;

属性名2：属性值2;

属性名3：属性值3;

...

---
说明

选择器:是用来选择标签的，选出来以后给标签加样式。

<!-- 所有css样式最外层需要使用style标签 -->
<style>
    /* div标签选择器 */
    div {
        /* 设置标签宽度 */
        width: 100px;
        /* 设置标签的高度 */
        height: 100px;
        /* 设置标签的背景 */
        background: gold;
    }
</style>

--------
html代码

<!-- 显示内容的内容 -->
<div>内容</div>

在这里插入图片描述

css 是层叠样式表，它是用来美化网页和控制页面布局的。

定义 css 的语法格式是: 选择器{样式规则}

2.css 的引入方式

1 行内式
2 内嵌式（内部样式）
3 外链式

2.1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<div style="width:100px; height:100px; background:red ">hello</div>

优点：

方便、直观。
缺点：

缺乏可重用性。

2.2. 内嵌式（内部样式）

在标签内加入

<head>
   <style type="text/css">
      div {
         /* 宽度 */
         width: 100px;
         /* 高度 */
         height: 200px;
         /* 背景色 */
         background: red; 
         }
   </style>
</head>

优点：
	在同一个页面内部便于复用和维护。
缺点：
	在多个页面之间的可重用性不够高。

2.3. 外链式

将css代码写在一个单独的.css文件中，在标签中使用标签直接引入该文件到页面中。

示例代码:

css文件代码

div {
   /* 宽度 */
   width: 100px;
   /* 高度 */
   height: 200px;
   /* 背景色 */
   background: red;
}

html文件代码

<!-- href中指定css文件导入路径 -->
<link rel="stylesheet" type="text/css" href="css/main.css">

优点：
使得css样式与html页面分离，便于整个页面系统的规划和维护，可重用性高。

缺点：
css代码由于分离到单独的css文件，容易出现css代码过于集中，若维护不当则极容易造成混乱。

2.4. css引入方式选择

1 行内式几乎不用
2 内嵌式在学习css样式的阶段使用
3 外链式在公司开发的阶段使用，可以对 css 样式和 html 页面分别进行开发。

---
css 的引入有三种方式, 分别是行内式、内嵌式、外链式。
外链式是在公司开发的时候会使用，最能体现 div+css 的标签内容与显示样式分离的思想，也最易改版维护，代码看起来也是最美观的一种。

3.css 选择器

3.1. css 选择器的定义

css 选择器是用来选择标签的，选出来以后给标签添加样式。

3.2. css 选择器的种类

3.2.1. 标签选择器

标签选择器根据标签名来选择标签，以标签名开头，此种选择器影响范围大，一般用来做一些通用设置。

示例代码

css代码

<style type="text/css">
    /* 标签选择器,直接以标签名开头 */
    p{
        /* 设置颜色是红色 */
        color: red;
    }
</style>

html代码

<!-- 网页展示的内容 -->
<div>hello div</div>
<p>hello p1</p>
<p>hello p2</p>

在这里插入图片描述

3.2.2. 类选择器

类选择器根据类名来选择标签，以 . 开头, 一个类选择器可应用于多个标签上，一个标签上也可以使用多个类选择器，多个类选择器需要使用空格分割，应用灵活，可复用，是css中应用最多的一种选择器。

示例代码

css代码

<style type="text/css">
    /* 类选择器以.开头,后面填写需要被操作标签的类名 */

    /* class中类名为div01的标签设置对应css样式 */
    .div01{
        color:blue
    }
    /* class中类名为p01的标签设置对应css样式 */
    .p01{
        color:red
    }

    /* class中类名为box的标签设置对应css样式 */
    .box{
        width:100px;
        height:100px;
        background:gold
    } 
</style>

html代码

<div class="div01">这是一个div</div>
<!-- 这个标签可以设置多个类名 -->
<p class="p01 box">这是一个段落</p>

在这里插入图片描述

3.2.3. 层级选择器(后代选择器)

层级选择器根据层级关系选择后代标签，以外层标签内层标签，主要应用在标签嵌套的结构中，减少命名。

示例代码

css代码

<style type="text/css">
/* div 下在的p标签设置样式 */
div p{
    color: red;
}

/* 类名为con的标签下的类名为url的标签设置样式 */
.con .url{
    color:pink;
}
</style>

html代码

<div>
    <p>hello</p>
</div>

<div class="con">
    <p>哈哈</p>
    <a href="http://www.itcast.cn" class="url">传智播客</a>
</div>
<p>你好</p>
<a href="#" class="url">百度</a>

---
注意
这个层级关系不一定是父子关系，也有可能是祖孙关系，只要有后代关系都适用于这个层级选择器

在这里插入图片描述

3.2.4. 组选择器

组选择器可以把多个标签组成一个组，以, 分割, 如果有公共的样式设置，可以使用组选择器进行统一的样式设置。

示例代码

css代码

<style type="text/css">
    /* 组选择器使用,对标签进行分隔 */
  /* 设置第一个与第三个div样式 */
    .box1,
    .box3 {
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背影 */
        background: green;
    }
</style>

html代码

<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

在这里插入图片描述

3.2.5. id选择器

id选择器，以#开头, 元素的id名称不能重复，所以id选择器只能对应于页面上一个元素，不能复用，所以不推荐使用id作为选择器。

示例代码

css代码

<style type="text/css">
   /* id选择器以#号开始 */
    #div01{
        color:red;
    } 

    #div02{
        color:green;
    } 
</style>

html代码

<div id="div01">这是一个段落标签</div>   <!-- 每个标签的id名称不能相同-->
<div id='div02'>这是第二个段落标签</div> <!-- 每个标签的id名称不能相同-->



---
注意

在css里id名称是可以的相同的。但如果页面涉及到JavaScript，就有问题了。因为JavaScript里获取DOM是通过getElementById，如果页面出现同一个id多次的话，这样元素就获取不到了。所以id需要唯一性。

在这里插入图片描述

3.2.6. 属性选择器

属性选择器根据属性选择标签，以标签名[属性名=‘属性值’]开头, 一个属性选择器可应用于多个标签上

示例代码

html代码

<!-- 设置黑马程序员与传智播客字体颜色为红色 -->
<div name="itcast"> 黑马程序员 </div>
<div name="baidu"> 百度 </div>
<div name="itcast"> 传智播客 </div>

css代码

<style type="text/css">
    /* 设置键为name值为itcast的标签设置为红色 */

    [name='itcast']{
        color: red
    }
</style>

---
说明

css 是由两个主要的部分构成：选择器和一条或多条样式规则，注意:样式规则需要放到大括号里面。

在这里插入图片描述

4.css 属性

4.1. 布局常用样式属性

属性	作用	举例
width	设置元素(标签)的宽度	width: 200px;
height	设置元素(标签)的高度	height: 200px;
background	设置元素背景色或者背景图片(详看下面)	background: pink;
background	设置元素背景色或者背景图片(详看下面)	background: url(images/logo.png);
border	设置元素四周的边框	border: 1px solid pink;
border-top	设置元素顶部边框	border-top: 1px solid/ dashed pink;
border-left	设置元素左边边框	border-left: 1px solid pink;
border-right	设置元素右边边框	border-right: 1px solid pink;
border-bottom	设置元素底部边框	border-bottom: 1px solid pink;

在这里插入图片描述
html代码

<!-- 两个div的嵌套 -->
<div class="box1">
    <div class="box2">
        内容
    </div>
</div>

css代码

<style>
    /* 外层的div设置 */
    .box1 {
        /* 设置宽度 */
        width: 200px;
        /* 设置高度 */
        height: 200px;
        /* 设置背景图片 */
        background:url(./images/logo.png);
        /* 设置边框颜色 */
        border: 1px solid black;
    }

    /* 内层的div设置 */
    .box2 {
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 100px;
        /* 设置背景色 */
        background:#979797;
        /* 设置四边边框 */
        /* border: 10px solid black; */
        /* 上边框设置 */
        border-top: 10px solid red;
        /* 左边框设置 */
        border-left: 10px solid green;
        /* 右边框设置 */
        border-right: 10px solid blue;
        /* 下边框设置 */
        border-bottom: 10px solid yellow;

    }
</style>

4.2. 文本常用样式属性

属性	作用	举例
color	设置文字的颜色	color: red;
font-size	设置文字的大小	font-size: 12px;
font-family	设置文字的字体	font-family: ‘Microsoft Yahei’; (微软雅黑)
font-weight	设置文字是否加粗	font-weight: bold; (bold:加粗 normal: 正常)
line-height	设置文字的行高	line-height: 24px; (文字高度加上文字上下间距共计24px)
text-decoration	设置文字的下划线	text-decoration:none; (取消下划线)
text-align	设置文字水平对齐	text-align:center 设置文字水平居中
text-indent	设置文字首行缩进	text-indent:24px; 设置文字首行缩进24px

在这里插入图片描述


<style>
    div {
        /* 设置字体大小  浏览器默认是 16px */
        font-size: 26px;
        /* 设置字体 */
        font-family: "Microsoft YaHei";
        /* 设置字体加粗 */
        font-weight: bold;
        /* 设置字体颜色 */
        color: yellow;
        /* 设置行高  */
        line-height: 150px;
        /* 设置背景色 */
        background: #737373;
        /* 设置文字居中 */
        text-align: center;

    }

    a {
        /* 去掉下划线 */
        text-decoration: none;
    }

    p{
        /* 设置文字缩进 */
        text-indent: 32px;
    }
</style>

html代码

<!-- 超链接 -->
<a href="http://www.itcast.cn">黑马程序员</a>
<!-- 段落 -->
<p>
    恭喜您进入python世界!
</p>
<!-- div标签 -->
<div>
    你好，世界!
</div>

5.css 元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项

visible 默认值, 显示子标签溢出部分。
hidden 隐藏子标签溢出部分。
auto 如果子标签溢出，则可以滚动查看其余的内容。

<style>
    /* 父控件设置 */
    .box1 {
        /* 设置宽度 */
        width: 100px;
        /* 设置高度 */
        height: 200px;
        /* 设置背景 */
        background: #737373;

        /* 设置元素溢出处理 */
        overflow: auto;
    }
</style>

html代码

 <!-- 父控件 -->
<div class="box1">
    <!-- 超出范围的一段文字 -->
    <p> 大头儿子小头爸爸
        一对好朋友 快乐父子俩
        儿子的头大手儿小
        爸爸的头小手儿很大
        大手牵小手
        走路不怕滑
        走呀走呀走 走 走
        转眼儿子就长大
        转眼儿子就长大
    </p>
</div>

在这里插入图片描述

6.css 显示特性

6.1. display 属性的使用

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置
inline 元素以行内元素显示
block 元素以块元素显示
inline-block 行内块元素 ( 扩展 )

css代码

<style>
    /* 隐藏标签 */
    .con {
        width: 200px;
        height: 200px;
        background: gold;

        /* 将元素隐藏 */
        display: none;
    }

    /* 将块元素转换成行内元素 */
    .box {
        /* 注意转换成行内元素后不能设置宽高,设置元效 */
        /* 将块元素转化为行内元素 */
        background: green;
        display: inline;
    }

    /* 将块内元素转换成块元素 */
    .link01 {
        width: 200px;
        height: 200px;
        background: red;
        /* 将行内元素转化为块元素 */
        display: block;
    }

    /* 将行内元素转化为块元素 */
    .box1 {
        width: 200px;
        height: 200px;
        background: rgb(0, 225, 255);
        /* 将行内元素转化为块元素 */
        display: inline-block;
    }
</style>

html代码

    <!-- 标签进行隐藏:display:none -->
    <div class="con">隐藏的标签</div>

    <!-- 块元素变成行内元素:display:inline -->
    <div class="box">这是第一个div</div>
    <div class="box">这是第二个div</div>

    <!-- 内联元素变成块元素 -->
    <a href="#" class="link01">这是第一个链接</a>
    <a href="#" class="link01">这是第二个链接</a>

    <!-- 将块元素转换成行内块元素-->
    <div class="box1">这是第三个div</div>
    <div class="box1">这是第四个div</div>

---
注意

行内元素不能设置宽高， 块元素或者行内块元素可以设置宽高。

在这里插入图片描述

7.浮动

1. 浮动的定义:

使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

说明

文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

2. 浮动的理解:

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

css 浮动:

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：
在这里插入图片描述
再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

在这里插入图片描述
如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

3. 浮动属性:

左浮动:

float：left；

右浮动:

float：right；

4. 浮动演示:

html代码

    <!-- 四个div分别设置不同宽高的色块 -->
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>

css代码

 /* 四个div分别设置不同宽高的色块 */

    .div1 {
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .div2 {
        width: 200px;
        height: 100px;
        background-color: blue;
    }

    .div3 {
        width: 100px;
        height: 200px;
        background-color: green;
    }

    .div4 {
        width: 200px;
        height: 200px;
        background-color: red;
    }

5. 注意点:

当初float 被设计的时候就是用来完成文本环绕的效果, 所以文本不会被挡住, 这是 float 的特性, 即 float 是一种不彻底的脱离文档流的方式.
在这里插入图片描述

利用浮动完成秒杀

8.盒子模型

8.1. 盒子模型的介绍

所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。

在这里插入图片描述

8.2. 盒子模型相关样式属性

盒子的内容宽度(width)，注意：不是盒子的宽度
盒子的内容高度(height)，注意：不是盒子的高度
盒子的边框(border)
盒子内的内容和边框之间的间距(padding)
盒子与盒子之间的间距(margin)

8.3. 设置宽高：

设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高

示例代码

css代码

/* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */
width: 200px; 
/* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */
height: 200px;
/* 设置颜色为了展示的效果更明显 */
background: green;

html代码

 <!-- 网页展示的内容 -->
    <div class="box">
        内容
    </div>

在这里插入图片描述

8.4. 设置内间距 padding

设置盒子四边的内间距，可设置如下：

padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */

上面的设置可以简写如下：

padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */

padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */

在这里插入图片描述

8.5. 设置边框 border

设置边框详细写法:
一个border属性，是由三个小属性综合而成的
三要素:

/* 边框宽度 */
border-width:10px;   
/* 线型  */
border-style:solid;  
/* 颜色  */
border-color:red;

简写

/* 设置边框 ,在设置边框时需要三个参数(边框粗细 边框线的形状 边框的颜色)*/
border: 10px solid red;

---
其中10px表示线框的粗细；solid表示线性；red表示边框的颜色

设置上下左右不同的边框

/* 设置上边框样式 */
border-top:10px solid red;
/* 设置右边框样式 */
border-right:10px solid red;
/* 设置底边框样式 */
border-bottom:10px solid red;
/* 设置左连框样式 */
border-left:10px solid red;

在这里插入图片描述

8.6. 设置外间距 margin

设置盒子四边的外间距，可设置如下：

margin-top：20px;     /* 设置顶部外间距20px */ 
margin-left:30px;     /* 设置左边外间距30px */ 
margin-right:40px;    /* 设置右边外间距40px */ 
margin-bottom:50px;   /* 设置底部外间距50px */

上面的设置可以简写如下：

margin：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的外间距值。 */

margin后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：

margin：20px 40px 50px; /* 设置顶部外间距为20px，左右外间距为40px，底部外间距为50px */ 
margin：20px 40px; /* 设置上下外间距为20px，左右外间距为40px*/ 
margin：20px; /* 设置四边外间距为20px */


---
外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。

在这里插入图片描述

8.7. 盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下

margin外间距的空间不属于盒子的内容

在这里插入图片描述

盒子模型的5个主要样式属性
width：内容的宽度(不是盒子的宽度)
height：内容的高度(不是盒子的高度)
padding：内边距。
border：边框。
margin：外边距
盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。

9.表格样式

属性	作用	举例
width	设置元素(标签)的宽度	width: 200px;
height	设置元素(标签)的高度	height: 200px;
border	设置元素四周的边框	border: 1px solid pink;
border-collapse	设置表格线合并	border-collapse: collapse;
text-align	设置文字对齐方式	text-align: start/center/end;

在这里插入图片描述
css代码

<style>
    /* 设置表格属性 */
    table{
        /* 设置宽度 */
        width: 300px;
        /* 设置高度 */
        height: 200px;
        /* 设置表格线合并 */
        border-collapse: collapse;
    }
    /* 设置单元格样式 */
    td {
        /* 单元格边框 */
        border: 1px solid red;
        /* 设置文字对齐方式 */
        text-align: center;
    }
</style>

html代码

<!-- 定义一个表格 -->
<table>
    <!-- 第一行定义 -->
    <tr>
        <!-- 第一行定义三列 -->
        <td>
            内容1
        </td>
        <td>
            内容2
        </td>
        <td>
            内容3
        </td>
    </tr>
    <!-- 定义第二行 -->
    <tr>
        <!-- 第二行定义三列 -->
        <td>
            内容1
        </td>
        <td>
            内容2
        </td>
        <td>
            内容3
        </td>
    </tr>
</table>

10.列表样式

10.1. 列表常用样式属性

属性	作用	举例
list-style	去掉前面的点或者序号	ist-style :none
float	浮动	float:left/right;

在这里插入图片描述
css代码

<style>
 /* 设置li列表样式 */
li{
    /* 去掉li列表前的点或者序号 */
    list-style: none;
    /* 让li元素浮动向左对齐 */
    float: left;
}
</style>

html代码

 <!-- 定义一个无序列表 -->
<ul>
    <!-- 定义三个超链接 -->
    <!-- &nbsp;空格是为了分隔超链接 -->
    <li><a href="http://www.itcast.cn">itcast</a>&nbsp;</li>
    <li><a href="http://www.baidu.com">baidu</a>&nbsp;</li>
    <li><a href="http://www.google.com">google</a>&nbsp;</li>
</ul>

鞋子不会飞

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表基础学习

目录1.css 的介绍2.css 的引入方式3.css 选择器4.css 属性5.css 元素溢出6.css 显示特性7.浮动8.盒子模型9.表格样式10.列表样式css主要的作用:美化及控制页面布局1.css 的介绍2.css 的引入方式3.css 选择器4.css 属性5.css 元素溢出6.css 显示特性7.浮动8.盒子模型9.表格样式10.列表...
复制链接

扫一扫

专栏目录