-
css学习心得
css
- 通过内嵌样式表来选择文本字体的大小和颜色
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <style> p{ font-size:16px; color: blue; } style> head> <body> <p>你好p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 通过导入外部样式表来选择文本字体的大小和颜色
css代码：
p{ font-size:16px; color: blue; }- 1
- 2
- 3
- 4
HTML代码
DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <link href="css/new_file.css" rel="stylesheet"/> head> <body> <p>你好p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
选择器
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> /* 标签选择器 */ p{ color:blue; font-size:20px; } /* id选择器 */ #title{ color:blue; font-size:15px; } /* 类选择器 */ .p1{ color:green; } .p2{ color:pink; } /* 选择器优先级 id>类>标签 */ /* *：通配选择器，匹配网页中所有的标签 */ *{ font-family:楷体; } /* 选择器组合：可以为多个选择器定义相同的样式表 */ #title,.p1,h1{ font-family:黑体; } style> head> <body> <h1>真的吗h1> <p id="title" class="p1">你好p> <p class="p1">我也好p> <p class="p2">他也好p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
文本
text-decoration对文字进行修饰
underline 下划线
line-through 删除线letter-spacing:字符间距
word-spacing:字母间距
text-indent:首行缩进
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> .p1{ font-weight: 900; font-size: 1.25rem; text-align: center; text-decoration:none; /* text-decoration对文字进行修饰 underline 下划线 line-through 删除线 */ letter-spacing: 10px; /* letter-spacing:字符间距 */ word-spacing: 5px; /* word-spacing:字母间距 */ text-indent: 2rem; /* text-indent:首行缩进 */ font-family: 字魂49号-逍遥行书; } a{ text-decoration: none; font-size: 6.25rem; } style> head> <body> <p class="p1">张兰直播间再现经典！与汪小菲前任同框，现任女友却被前夫爆料<br /> 在娱乐圈这个充满八卦和话题的世界里，汪小菲一家可谓是自带流量。最近，张兰在直播间与前夫的现任妻子意外同框，这一罕见画面瞬间点燃了网友们的八卦之火。<br /> 直播中，张兰与汪小菲的前任妻子谈笑风生，两人似乎并没有因为过去的恩怨而尴尬。相反，她们的互动还显得十分自然，这让不少网友纷纷表示：“这气度，真是绝了！”p> <a href="选择器.html">百度a> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
背景
background-image:设置图片背景
background-position:设置背景位置
background-size:设置背景大小
<html> <head> <meta charset="utf-8"> <title>title> <style type="text/css"> p{ color: white; text-align: center; background-color: chartreuse; width: 800px; height: 800px; font-family: 字魂49号-逍遥行书; font-size: 20ex; background-image: url("img/1.jpg"); background-position: center center; background-size: 100%; } style> head> <body> <p>你好p> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
css的伪类
hover：当鼠标移入某标签时，会自动切换到此样式表
active：当鼠标点击标签时 ，会自动切换到此样式表
focus：拥有鼠标焦点的标签
/* 当鼠标移入某标签时，会自动切换到此样式表 */ a:hover{ color: black; font-family: 字魂49号-逍遥行书; } /* 当鼠标点击标签时 ，会自动切换到此样式表*/ input:active{ color: aliceblue; } /* 拥有鼠标焦点的标签 */ .txt:focus{ background-color: aqua; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
标签分类
- 块级标签：无论内容多少，都会独占一行，一般用来进行网页布局。
可以设置宽高 width-height
- 行级标签：只占自身大小，不会占一行。设置宽高无效。
- 行级块标签：
div和span
-
div：是一个无任何默认格式的块级标签，用于进行网页布局，其不会有默认属性影响分布的情况
-
span：行级标签，类似于div
盒模型
-
标签=内容区+内边距+边框
-
内容区（content）
- width设置内容区宽度
- height设置内容区高度
**注：**如果没有设置标签的内边距和边框，则内容区默认和盒子大小一样
-
内边距（padding）：内容区到边框以内的区域
- padding：上px 右px 下px 左px
- padding：上下px 左右px
- padding：上下左右10px
-
边框（border）：标签可见标的最外部
- border: ;
- border-radius: ;
-
外边框（margin）
-
外边距可以设置为auto：
左右设置auto时，两边边距相等，标签水平居中
上下设置auto时，上下边距相等，标签水平居中
-
外边距不能改变标签大小，只能改变标签位置
-
文档流
浮动
in你导航切换- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
-
此时浮动后效果如图所示
-
要使浮动目标内容居中则需使这三个内容在同一块级标签上并使左右居中
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> .nav{ background-color: aqua; float: left; padding: 10px 40px ; } .navbox{ width: 600px; margin: 0px auto; } .nav:hover{ background-color: brown; } style> head> <body> <div class="navbox"> <div class="nav">网站首页div> <div class="nav">产品案例div> <div class="nav">公司一览div> div> <div style="background-color: blue;">in你导航切换div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
效果如图：
-
此时浮动的内容处于顶层图层，要消除这种问题有两种解决方法：
- 为父级标签设置一个高度，将父级标签撑开
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> .nav{ background-color: aqua; float: left; padding: 10px 40px ; } .navbox{ width: 600px; margin: 0px auto; height: 40px; } .nav:hover{ background-color: brown; } style> head> <body> <div class="navbox"> <div class="nav">网站首页div> <div class="nav">产品案例div> <div class="nav">公司一览div> div> <div style="background-color: blue;">in你导航切换div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
2.在浮动的标签后使用清除浮动的属性
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <style> .nav{ background-color: aqua; float: left; padding: 10px 40px ; } .navbox{ width: 600px; margin: 0px auto; height: 40px; } .nav:hover{ background-color: brown; } style> head> <body> <div class="navbox"> <div class="nav">网站首页div> <div class="nav">产品案例div> <div class="nav">公司一览div> <div style="clear: left;">div> <！--清除浮动的影响，自动撑开父级标签 --> div> <div style="background-color: blue;">in你导航切换div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
结果如下：
height: 40px; } .nav:hover{ background-color: brown; }- 1
- 2
- 3
- 4
- 5
- 6
in你导航切换```结果如下：
-
相关阅读:
获取url动态参数
C/C++运算优先级
Python【控制台输出案例2】
重构uniapp uni-ui coloerUI项目
springBoot 过滤器去除请求参数前后空格(附源码)
HashMap 哈希碰撞、负载因子、插入方式、扩容倍数
如何使用remix验证已部署的合约（以Goerli测试网为例）
【比邻智选】M5310-E系列模组
redis高可用——主从复制、哨兵模式、cluster集群
MATLAB - excel 读取
- 原文地址：https://blog.csdn.net/lalala1213888/article/details/136583473
