7.23css笔记

最新推荐文章于 2024-08-07 15:34:35 发布

乖乖周周

最新推荐文章于 2024-08-07 15:34:35 发布

阅读量56

点赞数

文章标签： css 笔记前端

本文链接：https://blog.csdn.net/huangqin_/article/details/131922124

版权

本文介绍了CSS中关于字体样式、文本缩进、对齐方式、文本修饰、行高、背景处理、列表样式、元素显示模式转换、导航栏设计、轮廓线、边框合并、颜色控制、元素隐藏方法、鼠标样式、绝对定位、固定定位以及粘性定位等基础知识，旨在帮助读者掌握网页布局与美化技巧。

摘要由CSDN通过智能技术生成

一.css字体样式

默认字体大小：16px

①---font-size：字体大小字号

eg：
p{
font-size：12px；
}

②---font-family:"字体"；

③---font-weight：字体粗细；

eg：
font-weight：400；--正常大小；
font-weight：700；--加粗；

④---（字体样式）font-style：normal（正常）
---font：italic （倾斜）

⑤---font：字号和字体必须同时存在
顺序：style weight size family

eg：
font：italic 700 16px 宋体

---css层叠性属性名相同时，后边的样式会将前面的样式覆盖掉

二.文本样式
1.文本缩进

body{
text-indent:20px;
}

p{
text-indent：32px;
}

em:缩进

p{
text-indent：2em;
}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* body {
text-indent: 20px;
} */

p {
font-size: 20px;
/* text-indent: 32px; */
text-indent: 2em;
}
</style>
</head>

<body>
<p>
陈丹青:“如果你没有背景，

还要选择做一个好人，

几乎肯定会落入社会底层，

哪怕你才华横溢，有真知灼见，

社会的筛子会把你筛落掉。

越是循规蹈矩，刚正不阿，

天性善良，越容易被淘汰，

你所有的优点会成为竞争中的劣势。”
</p>
<p>
陈丹青:“如果你没有背景，

还要选择做一个好人，

几乎肯定会落入社会底层，

哪怕你才华横溢，有真知灼见，

社会的筛子会把你筛落掉。

越是循规蹈矩，刚正不阿，

天性善良，越容易被淘汰，

你所有的优点会成为竞争中的劣势。”
</p>
</body>

</html>

2.文本对齐方式
对齐方式：text-align：xx 居中的是内容；
text-align：left right center

eg：
div{
text-align：center；
}

<div>我是一个盒子<div>

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
/* 对齐方式：text-align 居中的是内容*/
text-align: center;
}

.box2 {
width: 300px;
height: 400px;
background-color: pink;
text-align: center;
}
</style>
</head>

<body>
<div class="box1">我是一个小盒子</div>

</html>

3.文本修饰

text-decoration---清除a链接默认样式(有下划线，蓝色)；

a{
text-decoration:none;
text-decoration:dashed;
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;

}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
/* 清除a链接默认样式 */
/* text-decoration: none; */
/* text-decoration: line-through; */
/* text-decoration: underline; */
text-decoration: overline;
}
</style>
</head>

</html>

4.text-transform

转大小写
uppercase---大写；
lowercase---小写；

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(1) {
text-transform: uppercase;
}

ul li:nth-child(2) {
text-transform: lowercase;
}
</style>
</head>

<body>
<ul>
<li>gouxin我是第1个li</li>
<li>GOUXIN 我是第1个li</li>

</ul>
</body>

</html>

5.goods练习
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 234px;
height: 300px;
background-color: pink;
text-align: center;
}

a {
text-decoration: none;

}

h3 {
color: black;
font-size: 14px;
font-weight: 400;
}

.box a p {
font-size: 12px;
color: #B0B0B0;
}

.box a div {
font-size: 14px;
color: orange;
}
</style>
</head>

<body>
<div class="box">
<a href="#">
<img src="./202305241112_ecb14876904f09f3cbc605350a02eff0.webp" alt="" width="160px" height="160px">
<h3>Xiaomi Civi 3</h3>
<p>仿生双眸 天生双色</p>
<div>2499元起</div>
</a>
</div>
</body>

</html>

6.行高

p {
line-height: 50px;
}

div{
width：400px；
height：200px；
background-color：pink；
text-align：center；
---单行文本借助行高垂直
line-height：200px；
}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
line-height: 50px;
}

div {
width: 400px;
height: 200px;
background-color: pink;
text-align: center;
/* 单行文本借助行高垂直居中 */
line-height: 200px;
}
</style>
</head>

<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime necessitatibus harum quos modi asperiores enim
at, blanditiis, cumque architecto magni vero quibusdam facere sed, itaque quo accusamus provident pariatur
ullam!
Modi alias exercitationem perferendis beatae aspernatur dolores ea nulla quo harum aut? Earum saepe, voluptatem
repudiandae quos asperiores modi ut? Optio maiores expedita labore magni, perspiciatis dignissimos id maxime
eveniet.

</p>
<div>
我是一段文字
</div>
</body>

</html>

7.文本溢出

div{
width：300px;
height:500px;
background-color:yellow;

解决文本溢出的各种方法：

overflow:auto;
overflow:scroll;

overflow:hidden;---溢出的隐藏了不太好；
white-space：nowrap;
overflow:hidden;
text-overflow:ellipsis;

}

8.背景相关：
body{
width：3000px;
height：3000px;
background-color:pink;
background-image:
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;

background:pink url（背景.jpg） no-repeat right bottom；
无顺序要求；

9.列表样式

去除Li默认样式的

li{
list-style:none;---常用
list-style:decimal;
}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
/* 去除li默认样式的 */
list-style: none;
list-style: decimal;

}
</style>
</head>

</html>

10.元素显示模式转换

span(不能设置宽高）{
display：inline-block;---将行内元素转化成行内块元素
width:100px;
height:50px;
background-color:pink;
}

div{
display：inline-block;
}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
span {
/* 将行内元素转化为行内块元素 */
display: inline-block;
width: 100px;
height: 50px;
background-color: pink;
}

div {
display: inline-block;
}
</style>
</head>

<div>我是一段文字</div>

</body>

</html>

11.五彩导航例子

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
text-decoration: none;
color: black;
display: inline-block;
width: 120px;
height: 58px;
background-color: aqua;
text-align: center;
line-height: 50px;
}

.a1 {
background-image: url(./images/bg1.png);
}

.a2 {
background-image: url(./images/bg2.png);
}

.a3 {
position: relative;
background-image: url(./images/bg3.png);
}

.a4 {
background-image: url(./images/bg4.png);
}

.a1:hover {
background-image: url(./images/bg5.png);
}

.a2:hover {
background-image: url(./images/bg6.png);
}

.a3:hover {
background-image: url(./images/bg7.png);

}

.a3:hover .box {
display: block;
}

.a4:hover {
background-image: url(./images/bg8.png);
}

.box {
display: none;
position: absolute;
bottom: -120px;
width: 120px;
height: 120px;
background-color: pink;
}
</style>
</head>

</body>

</html>

12.轮廓线

outline-style:dotted;
outline-style:double;

outline-color:aqua;

outline-width:thick;
outline-width:40px;

outline:none;
}

<body>
<input type="text" name="username">

13.边框

div{
width:300px;
height:300px;
background-color:pink;
border-width:3px;
border-color:reb;
border-style:solid;
border-radius:xx%;
border-top-right-radius:xx%/px;
border-top-left-radius:xx%/px;
border-bottom-right-radius:xx%/px;
border-bottom-left-radius:xx%/px;
border-bottom-left-radius:xx%/px;
}

14.合并相邻边框
<style>
table {
border-collapse: collapse;
}
td {
width: 40px;
height: 30px;
border: 3px solid black;
}

练习：
全:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
outline:none;
border:2px solid red;
border-radius: 5px;
}
input:focus{
border-color:aqua;
}
table{
border-collapse:0 ;
}

td{
width:40px;
height:30px;
border:3px solid;
}
</style>
</head>
<body>
<input type="text">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

15.颜色
p{
前景色字体颜色
color：red；
color：

div{
width:300px;
height:300px;
background-color: rgb(230, 24, 24);

/* background-color: rgba(rgb(71, 15, 15), rgb(47, 118, 47), rgb(76, 76, 118), .3); */

/* opacity 0-1 0时，只是视觉上看不到，原来位置还在保留设置透明度的 */

opacity: 0;
}

16.元素隐藏的方式
<style>
div{
width:400px;
height:400px;
background-color:pink;
1.透明度隐藏 0-1 保留原来位置
opacity：0;

2.display：none; 不保留原来位置
display：none;(常用)

3.visibility:hidden; 保留原来位置

}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 400px;
background-color: pink;
/* 1、设置透明度隐藏 0-1 保留原来位置*/
/* opacity: 0; */
/*2、 display :none 不保留原来位置*/
/* display: none; */
/* 3、visibility：hidden */
visibility: hidden;

}

.box2 {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>

<body>
<div class="box1">
我是一个小盒子
</div>
<div class="box2">

</div>
</body>

</html>

17.鼠标样式以及防拖拽
防拖拽
textarea{
resize:none;---防拖拽
cursor：pointer(手);---鼠标样式
}

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
textarea {
/* 防止拖拽 */
resize: none;
/* 鼠标样式 */
cursor: initial;
}
</style>
</head>

</html>

18.绝对定位

全：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.grandfather {
position: relative;
width: 1200px;
height: 1200px;
background-color: aquamarine;
}

.father {
position: absolute;
top: 200px;
position: relative;
width: 600px;
height: 600px;
background-color: aqua;

}

.son {
width: 200px;
height: 200px;
font-size: 40px;
}

.son1 {
/* 绝对定位会放弃原来的位置子绝父相逐级查找父级元素是否有相对定位，如果有，以父亲为定位参考，如果没有，继续向上查找*/

position: absolute;

/* top: 50px; */

left: 90px;
bottom: 40px;
background-color: blue;

/* 显示的优先级 z-index*/

z-index: 2;
}

.son2 {
position: absolute;
bottom: 50px;
background-color: darkorange;
}
</style>
</head>

</html>

19.绝对定位练习

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
position: relative;
width: 800px;
height: 400px;
background-color: pink;
}

.father>div {
width: 20px;
height: 50px;
background-color: aqua;
}

.son1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -25px;
}

.son2 {
position: absolute;
right: 0;
top: 50%;
}
</style>
</head>

</html>

20.固定定位

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 3000px;
background-color: pink;
}

.box1 {

/* 固定定位相对于可视窗口进行定位放弃原来位置 */

position: fixed;
top: 100px;
width: 100px;
height: 100px;
background-color: aqua;
}

.box2 {
width: 100px;
height: 100px;
background-color: rgb(227, 19, 206);
}
</style>
</head>

<body>
<div class="box1">
nihao
</div>
<div class="box2"></div>
</body>

</html>

22.粘性定位
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
position: sticky;
top: 20px;
background-color: pink;
}
</style>

</head>