Web前端 CSS基础

最新推荐文章于 2024-10-08 10:16:40 发布

No_Rishi

最新推荐文章于 2024-10-08 10:16:40 发布

阅读量215

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/no_rishi/article/details/113836200

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS基础

1、简介

CSS 指层叠样式表 (Cascading Style Sheets)；

样式定义如何显示 HTML 元素；

样式通常存储在样式表中；

把样式添加到 HTML中，是为了解决内容与表现分离的问题；

外部样式表可以极大提高工作效率；

外部样式表通常存储在 .css 文件中；

多个样式定义可层叠为一。

2、选择器

1、元素选择器

<head>
<style>
    div{
       position:absolute;
    }
</style>
</head>

<body>
<div> 元素选择器 </div>
</body>

2、ID选择器

<head>
<style>
div{
		position: absolute;
        color: aqua;
    }
#div{
		position: relative;
  		color: red;
	}
</style>
</head>
<body>
	<div> 元素选择器 </div>
	<div id="div">ID选择器</div>
</body>

3、类选择器

<head>
<style>
        .d1{
            position: absolute;
            color: aquamarine;
        }
</style>
</head>

<body>
	<div class="d1">A</div>
	<span class="d1">B</span>
</body>

3、注释

/* 注释内容 */

4、长宽

<head>
 <style>
        #d1{
            color: aquamarine;
            width: 100px;
            border: aquamarine 2px;
        }
        #s1{
            position: absolute;
            left: 10px;
            width: 30px;
            border: chartreuse 2px;

        }
</head>
<body>
<div id="d1">A</div>
<span id="s1">B</span>
</body>

这里需要注意一般情况下，这种设置长宽的方式，只有块级元素生效，内联元素，例如< span >则不会生效。

5、背景

属性名	功能
background-colo	背景颜色
background-image:url(imagepath);	图片做背景
url(background.jpg)	本地测试
background-repeat	背景重复
background-size: contain	背景平铺

背景重复：
属性：background-repeat
属性值：
repeat 水平垂直方向都重复
repeat-x 只有水平方向重复
repeat-y 只有垂直方向重复
no-repeat 无重复

背景平铺：
属性：background-size
属性值：contain

6、文本

属性	功能
color	文字颜色
text-align	文本对齐
text-decoration	文本修饰
line-height	文本行间距
letter-spacing	字符间距
word-spacing	单词间距
text-indent	首行缩进
text-transform	大小写
white-space	空白格

文本对齐：

属性: text-align
值：left、right、center
div是块级元素，其默认宽度是100%，所以文本有对齐的空间前提；
span是内联元素其默认宽度就是其文本内容的宽度，所以看不出对齐效果。

<style>
div,span{
    border: 1px gray solid;
  	margin:10px;
}
div#left{
	text-align:left;
}
div#right{
    text-align:right;
}
div#center{
    text-align:center;
}
span#right{
    text-align:right;
}
</style>

<div id="left">左对齐</div>
<div id="right">右对齐</div>
<div id="center">居中</div>
<span id="right">span看不出右对齐效果</span>

文本修饰：

属性：text-decoration
值： overline、line-through、underline、blink、none

<style>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<body>
<h1>上划线</h1>
<h2>删除效果</h2>
<h3>下划线</h3>
<h4>闪烁效果</h4>
<a href="https://baidu.com/">默认超链</a>
<a class="a" href="https://baidu.com/">去掉下划线的超链</a>
</body>

这里需要注意 text-decoration ：none 常用于修饰超链接。

文本大小写：

属性：text-transform
属性值：
uppercase 全部大写
capitalize 首字母大写
lowercase 全部小写

<head>
<style>
#A {text-transform:uppercase}
#B {text-transform:capitalize}
#C {text-transform:lowercase}
</style>
</head>

<body>
<div id="A">abcd</div>
<div id="B">aBCD</div>
<div id="C">ABCD</div>
</body>

文本空白格：

属性：white-space
属性值：
normal 默认，多个空白格或者换行符会被合并成一个空白格；
pre 有多少空白格，显示多少空白格，如果长度超出也不会换行；
pre-wrap 有多少空白格，显示多少空白格，如果长度超出，会换行；
nowrap 一直不换行；

<head>
<style>
#n {white-space:normal}
#p {white-space:pre}
#pw {white-space:pre-wrap}
#nw {white-space:nowrap}
</style>
</head>

<body>
<div id="n">
在默认情况下，多个     空白格或者
换行符
    会被     合并成一个空白格
</div>

<div id="p">
保留所有的    空白格
以及换行符
不会换行
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</div>

<div id="pw">
保留所有的    空白格
以及换行符
会换行
特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字特别长的一段文字
</div>

<div id="nw">
不会换行
不会换行
不会换行
不会换行
不会换行
不会换行
直到br<br/>才换行
</div>
</body>

7、字体

属性	功能
font-size	字体大小
font-style	风格
font-weight	粗细
font-family	字库
font	声明在一起

风格：
normal 标准字体
italic 斜体

粗细：
normal 标准粗细
bold 粗体

字库：
Times New Roman
Arial
宋体 IE默认字体
黑体
楷体
微软雅黑火狐默认字体

8、鼠标样式

属性：cursor

在这里插入图片描述

9、边框

关键字	简介
border-style	边框风格
border-color	边框颜色
border-width	边框宽度
border	三合一
border-top，border-left	边框方向

边框风格：
solid 实线
dotted 点状
dashed 虚线
double 双线

边框方向：

<head>
<style>
   #lefttop{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;   
   background-color:lightgray;   
  }
  #alldirection{
   width:150px;
   height:150px;
   border-style:solid;
   border-width: 50px;
   border-top-color:red;
   border-left-color:blue;  
   border-bottom-color:green;
   border-right-color:yellow;  
   background-color:lightgray;   
  }
</style>
</head>

<div id="lefttop">左边和上边都有边框</div>
<br>
<div id="alldirection"> 四边都有边框</div>

10、边距

1、内边距

内边距：指的是元素里的内容与边框之间的距离；
padding-left: 左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上右下左

如果缺少左内边距的值，则使用右内边距的值；
如果缺少下内边距的值，则使用上内边距的值；
如果缺少右内边距的值，则使用上内边距的值；

2、外边距

外边距：指的是元素边框和元素边框之间的距离；
margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

11、超链状态

超链状态有4种
link 初始状态，从未被访问过；
visited 已访问过；
hover 鼠标悬停于超链的上方；
active 鼠标左键点击下去，但是尚未弹起的时候。

<head>
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
a.no_underline {text-decoration: none}
</style>
</head>
<body>
<a href="http://www.12306.com">超链的不同状态</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下划线的超链</a>
</body>

12、隐藏

display:none：隐藏一个元素，这个元素将不再占有原空间 空间让出来
visibility:hidden：隐藏一个元素，这个元素继续占有原空间，只是“看不见”

<style>
div.d{
  display:none;
}
div.v{
  visibility:hidden;
}
</style>

<div> 可见的div1 </div>
<div class="d">隐藏的div2 </div>
<div> 可见的div3 </div>
<div class="v">隐藏的div4 </div>
<div> 可见的div5 </div>

13、css文件

<head>
<link rel="stylesheet" type="text/css" href="file://c:/" />
</head>

优先级：
style.css与style标签样式重复，优先使用最后出现的一个；
style标签内的属性与标签内的style属性冲突，优先使用标签内的style属性；
如果样式上增加了!important，则优先级最高，甚至高于style属性。

二、CSS 布局

1、定位

1、绝对定位

position:absolute
通过指定left、top绝对定位一个元素；
如果有父容器，则位置以父容器为基础定位；
如果没有父容器，则以< body >为父容器

<head>
<style>
div{
  position: absolute;
  left: 50px;
  top: 50px;
}
</style>
</head>
<body>
	<div>绝对定位</div>
</body>

2、相对定位

position:relative
与绝对定位不同的是，相对定位不会把该元素原空间删除掉，而是在原空间的位置的基础上，移动一定的距离。

<head>
<style>
div{
  position: realtive;
  left: 50px;
  top: 50px;
}
</style>
</head>
<body>
	<div>相对定位</div>
</body>

3、z-index

通过绝对定位可以把一个元素放在另一个元素上，这样位置会重复。重复就存在一个谁掩盖谁的问题，这个时候就可以使用z-index属性，当z-index的值越大，就表示放上面，z-index:越小就表示放下面。

2、浮动

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

<head>
 <style>
        div{
            width: 100px;
            height: 100px;
            background: aqua ;
        }
        #left{
            float: left;
        }
        #right{
            float:right;
        }
    </style>
</head>
<body>
	<div id="left">左浮动</div>
	<div id="right">右浮动</div>
</body>

文字围绕图片：

当图片不浮动时，文字就会换行出现在下面；

当图片浮动时，文字围绕着图片。

清除浮动：
clear：left、right、both、none

默认< div >布局是换行的，如果使用 float 就可以实现水平排列的效果，通常会用在菜单，导航栏等。如果超出了父容器，还会自动换行。

3、显示方式

属性	功能
display:none	隐藏
display:block	块级元素
display:inline	内联元素
display:inline-block	内联-块级元素

隐藏：

display:none，使得被选择的元素隐藏，并且不占用原来的空间。

块级元素：

display:block，块级元素会自动在前面和后面加上换行，并且可以自定义长宽，即width and height。
例如：< div >、< h1 >

内联元素：
display:inline，内联元素前后没有换行，并且 width 和 height 无效，其大小由其中的内容决定。
例如：< span>、< input >

内联-块级元素：
内联是不换行，并且不能指定大小；
块级能换行，能指定大小；
所以内联-块级元素即 display：inline-block，可以实现不换行、指定大小
这一特性。

<head>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: aqua;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>一</div>
    <div>二</div>
    <div>三</div>
</body>

4、水平居中

内容居中：

<head>
<style>
div{
  border:1px solid lightgray;
  margin:10px;
}
</style>
</head>

<body>
<div align="center"> 通过设置属性align="center"实现内容居中</div>
<div  style="text-align:center">通过样式style="text-align:center"实现内容居中</div>
</body>

元素居中：

<head>
<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>
</head>

<body>
<div>默认情况下< div >会占用100%的宽度,所以无法观察元素是否居中</div>
<div style="width:300px;margin:0 auto">设置< div >的宽度，然后再使用样式 margin: 0 auto来使得元素居中</div>
<span style="width:300px;margin:0 auto">< span >是内联元素，无法设置宽度，所以不能通过margin:0 auto居中</span>
<div style="text-align:center">
	<span>< span >的居中可以通过放置在div中，然后让div text-align实现居中</span>
</div>
</body>

5、垂直居中

Line-height方式：

<head>
<style>
#d{
	line-height: 100px;
} 
div{
	border:solid 1px lightskyblue;
}
</style>
</head>
<body>
<div id="d"> line-height 适合单独一行垂直居中</div>
</body>

内边距方式：

<head>
<style>
#d {
    /*上下30 左右0*/
	padding: 30 0;
}
div{
 	border:solid 1px lightskyblue;
}
</style>
</head>
<body>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>
</body>