CSS基础

最新推荐文章于 2024-10-05 15:23:36 发布

pmc0_0

最新推荐文章于 2024-10-05 15:23:36 发布

阅读量93

点赞数

分类专栏：前端语言基础文章标签： css

本文链接：https://blog.csdn.net/pmc0_0/article/details/116995084

版权

前端语言基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、CSS简介

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

CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在这里插入图片描述

选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。
CSS声明总是以分号(;)结束，声明总以大括号({})括起来
为了让CSS可读性更强，你可以每行只描述一个属性

二、CSS Id 和 Class

id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
以下的样式规则应用于元素属性 id=“para1”:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

在这里插入图片描述

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

在这里插入图片描述

三、CSS 创建

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

1.外部样式表(External style sheet)

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用标签链接到样式表。标签在（文档的）头部：

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

mystyle.css

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/images/back40.gif");}

2.内部样式表(Internal style sheet)

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

3.内联样式(Inline style)

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

4.多重样式优先级

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

四、CSS属性

1.CSS 文本格式

文本颜色(color)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<p>这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。</p>
<p class="ex">这是一个类为"ex"的段落。这个文本是蓝色的。</p>
</body>
</html>

在这里插入图片描述

文本的对齐(text-align)方式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 实例</h1>
<p class="date">2015 年 3 月 14 号</p>
<p class="main">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
<p><b>注意：</b> 重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

在这里插入图片描述

2.CSS 链接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */
</style>
</head>
<body>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

在这里插入图片描述

简而言之，就是用鼠标的状态去改变链接的颜色

3.CSS 盒子模型

在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
div {
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}
</style>
</head>
<body>

<h2>盒子模型演示</h2>

<p>CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。</p>

<div>这里是盒子内的实际内容。有 25px 内间距，25px 外间距、25px 绿色边框。</div>

</body>
</html>

在这里插入图片描述

4.CSS 边框（border）

CSS 边框属性

border-style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

在这里插入图片描述
也可以单独就盒子边框的一个边进行修改

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

在这里插入图片描述

五、CSS布局

浮动定位

/*
属性值
	none:不浮动
	left:向左浮动
	right:向右浮动
*/
float:属性值

将元素排除在普通流之外
元素将不在页面中占据空间
将浮动元素放置在包含框的左边或者右边
浮动元素依旧位于包含框之内
浮动的框可以向左或者向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止
浮动元素的外边缘不会超过其父元素的内边缘
浮动元素不会互相重叠
浮动元素不会上下浮动
任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动属性</title>
    <style>
        #box{
            width: 600px;
            height: 600px;
            background: aquamarine;
        }
        #box>div:first-child{
            width: 100px;
            height: 100px;
            background: green;
        }
        #box>div:nth-child(2){
            width: 200px;
            height: 200px;
            background: black;
        }
        #box>div:nth-child(3){
            width: 300px;
            height: 300px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

在这里插入图片描述

给第一个div加左浮动

#box>div:first-child{
    width: 100px;
    height: 100px;
    background: green;
    float:left;
}

在这里插入图片描述

1浮动就不占页面空间了，然后2和3就会向上排，1就相当于浮动在页面之上，可以理解为一个3维空间

将第2个div右浮动

#box>div:nth-child(2){
    width: 200px;
    height: 200px;
    background: black;
    float: right;
}

在这里插入图片描述
将第三个div改变宽带并设置左浮动

#box>div:nth-child(3){
    width: 400px;
    height: 300px;
    background: blue;
    float: right;
}

在这里插入图片描述

这也证明了浮动元素不会重叠

position定位

值	描述
absolute	生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过“left" , “top”, "right”以及"bottom”属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left" , “top”, "right”以及"bottom”属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20”会向元素的LEFT位置添加20像素。
static	默认值。没有定位，元素出现在正常的流中（忽略top, bottom, left, right或者z-index声明)。

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        #box1{
            background: green;
        }
        #box2{
            background: burlywood;
        }
        #box3{
            background: teal;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

在这里插入图片描述
对第二个div进行相对位置偏移

#box2{
    /*相对定位*/
    position: relative;
    /*移动定位元素*/
    top:200px;
    left: 200px;
}

在这里插入图片描述

以当前位置为参照物偏移指定距离，被定位的元素会占据原有的物理位置，上图，第二div块就是距离当前顶部偏移了200px，距离当前位置左部偏移了200px，而且原来的位置不会释放。

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }
        #box1{
            background: green;
        }
        #box2{
            width: 500px;
            height: 500px;
            background: burlywood;
        }
        #father{
            width: 200px;
            height: 200px;
            background: blueviolet;
        }
        #son{
            width:100px;
            height:100px;
            background: coral;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">
        <div id="father">
            <div id="son"></div>
        </div>
    </div>
</body>
</html>

在这里插入图片描述
做如下绝对定位

#father{
    position: relative;
}

#son{
    position: absolute;
    top:100px;
    left: 100px;
}

在这里插入图片描述

橙色到了紫色的右下角，绝对定位的元素不会占据原有的物理位置，那关于定位参考点有如下规则：

如果元素的外层元素是非static(有了除默认值之外的定位设置)那么这个外层元秦就成为该元素的定位参考点
如果元素的外层元秦没有设置任何position的值，那么该元素将寻找距离自己最近的其他设定过position的外层元素作为参照物(必须为嵌套层)
如果该元素的外层元素没有任何一个元素采用position定位，那么此时定位参考元素变为body或者说页画（body的外边距开始算，也就是没有处理过的body，定位参考点就是屏幕左上角）

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style>
        div{
            height: 1000px;
            background: burlywood;
        }
        #box{
            width: 100px;
            height: 100px;
            background: coral;
            position: fixed;
            right: 0px;
            top:50%;
        }
    </style>
</head>
<body>
1
    <div>
        <div id="box"></div>
    </div>
2
</body>
</html>

在这里插入图片描述

相对屏幕，橘色块始终不会移动，即使你上下滚动

伸缩盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 800px;
            height: 60px;
            border: 1px solid rebeccapurple;
        }
        #box>div{
            width: 200px;
            height: 60px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

以前我们通常用浮动去把div横向布局，很是麻烦而且不能自适应屏幕，现在可以采用伸缩盒去布局，简单很多，父类的display属性给个flex值

#box{
    display: flex;
}

在这里插入图片描述

新弹性盒设置父元素是一个弹性盒，子元素会自动水平排列

父容器常用属性justify-content

设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

值	描述
flex-start	默认值，项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间流有空白的容器内
space-around	项目位于各行之前、之间、之后都流有空白的容器内

center（把父元素的高度增加了40px方便后续观察）
space-between
space-around

父容器常用属性align-items

align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式

值	描述
stretch	默认值，项目被拉伸以适应容器
center	项目位于容器的中心
flex-start	项目位于容器开头
flex-end	项目位于容器的结尾

center（配合了justify-content属性使用）

父容器常用属性flex-wrap

flex-wrap让弹性盒元素在必要的时候拆行

wrap

父容器常用属性flex-direction

让项目在父容器中纵向排列

#box{
    width: 200px;
    height: 300px;
    border: 1px solid rebeccapurple;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

在这里插入图片描述

子元素常用属性flex-grow（伸缩盒中的每一个元素称为一个项目）

默认值为0，就是一个数字，规定项目将相对于其他灵活的项目进行扩展的量。

#box>div:first-child{
    flex-grow: 1;
}
#box>div:nth-child(2){
    flex-grow: 5;
}
#box>div:last-child{
    flex-grow: 2;
}

在这里插入图片描述

六、dispaly属性

根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素,
它的默认display属性值为“block”，称为块元素，而span元素的默认display属性值为“inline”，称为“行内”元素。块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。display常见属性值：

none:隐藏对象
inline:指定对象为内联元素
block:指定对象为块元素
inline-block:指定对象为内联块元素
table-cell:指定对象作为表格单元格
flex:弹性盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background: chocolate;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</body>
</html>

想要div块并排排放，又不用浮动布局，就可以display: inline-block;设置div为行内块状元素，可以设置宽高

在这里插入图片描述

div{
    background: chocolate;
    display: none;
}

可以隐藏

visibility:hidden和display :none和（透明度）lopacity:0的区别:

visibility:hidden和opacity:0会将元素隐藏，但是物理空间实际存在
display : none影藏元素，不保留物理空间

pmc0_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS基础

文章目录

一、CSS简介

CSS语法

二、CSS Id 和 Class

id 选择器

class 选择器

三、CSS 创建

1.外部样式表(External style sheet)

2.内部样式表(Internal style sheet)

3.内联样式(Inline style)

4.多重样式优先级

四、CSS属性

1.CSS 文本格式

文本颜色(color)

文本的对齐(text-align)方式

2.CSS 链接

3.CSS 盒子模型

4.CSS 边框（border）

CSS 边框属性

五、CSS布局

浮动定位

position定位

相对定位

绝对定位

固定定位

伸缩盒

父容器常用属性justify-content

父容器常用属性align-items

父容器常用属性flex-wrap

父容器常用属性flex-direction

子元素常用属性flex-grow（伸缩盒中的每一个元素称为一个项目）

六、dispaly属性