-
CSS基础知识
css 简介
层贴样式表:就是给 HTML 标签添加样式的，让它变的更加的好看- 1
注释
/*单行注释*/ /* 多行注释 1 多行注释 2 多行注释 3 */ 通常我们在写 css 样式的时候也会用注释来划定样式区域(因为 HTML 代码多所以对呀的 css 代码也会很多) /*这是博客园首页的 css 样式文件*/ /*顶部导航条样式*/ ... /*左侧菜单栏样式*/ ... /*右侧菜单栏样式*/ ...- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
css 的语法结构
选择器 { 属性 1:值 1; 属性 2:值 2; 属性 3:值 3; 属性 4:值 4; }- 1
- 2
- 3
- 4
- 5
- 6
css 的三种引入方式
1.style 标签内部直接书写(为了教学演示方便我们用第一种) <style> h1 { color: burlywood; } style> 2.link 标签引入外部 css 文件(最正规的方式 解耦合) <link rel="stylesheet" href="mycss.css"> 3.行内式(一般不用) <h1 style="color: green">老板好 要上课吗?h1>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
选择器
基本选择器
# id 选择器 # 类选择器 # 元素/标签选择器 # 通用选择器 <style> id 选择器 #d1 { /*找到 id 是 d1 的标签 将文本颜色变成绿黄色*/ color: greenyellow;} 类选择器 .c1 { /*找到 class 值里面包含 c1 的标签*/ color: red;} 元素(标签)选择器 span { /*找到所有的 span 标签*/ color: red;} 通用选择器 * { /*将 html 页面上所有的标签全部找到*/ color: green;} style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
组合选择器
在前端 我们将标签的嵌套用亲戚关系来表述层级 <div>div <p>div pp> <p>div p <span>div p spanspan> p> <span>spanspan> <span>spanspan> div> div 里面的 p span 都是 div 的后代 p 是 div 的儿子 p 里面的 span 是 p 的儿子 是 div 的孙子 div 是 p 的父亲 ################################################## 后代选择器 div span { color: red; } 儿子选择器 div>span { color: red; } 毗邻选择器 div+span { /*同级别紧挨着的下面的第一个*/ color: aqua; } 弟弟选择器 div~span { /*同级别下面所有的 span*/ color: red; ...- 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
属性选择器
""" 1 含有某个属性 2 含有某个属性并且有某个值 3 含有某个属性并且有某个值的某个标签 """ # 属性选择器是以[]作为标志的 [username] { /*将所有含有属性名是 username 的标签背景色改为红色*/ background-color: red; } [username='jason'] { /*找到所有属性名是 username 并且属性值是 jason 的标签*/ background-color: orange; } input[username='jason'] { /*找到所有属性名是 username 并且属性值是 jason 的 input 标签*/ background-color: wheat; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
分组与嵌套
# 意思是说所有的div，p，span全部选中 div,p,span { /*逗号表示并列关系*/ color: yellow; } #d1,.c1,span { color: orange; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
伪类选择器
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { background-color: black; } a:link { /*访问之前的状态*/ color: red; } a:hover { /*需要记住*/ color: aqua; /*鼠标悬浮态*/ } a:active { color: black; /*鼠标点击不松开的状态 激活态*/ } a:visited { color: darkgray; /*访问之后的状态*/ } p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input 框获取焦点(鼠标点了 input 框)*/ background-color: red; } style> head> <body> <a href="https://www.jd.com/">小轩在不在?a> <p>点我有你好看哦p> <input type="text"> 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
伪元素选择器
p:first-letter { font-size: 48px; color: orange; } p:before { /*在文本开头 同 css 添加内容*/ content: '你说的对'; color: blue; } p:after { content: '雨露均沾'; color: orange; } ps:before 和 after 通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面马上讲)- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
选择器优先级
id 选择器 类选择器 标签选择器 行内式 DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /* 1.选择器相同 书写顺序不同 就近原则:谁离标签更近就听谁的 2.选择器不同 ... 行内 > id 选择器 > 类选择器 > 标签选择器 精确度越高越有效 */ #d1 { color: aqua; } /*.c1 {*/ /* color: orange;*/ /*}*/ /*p {*/ /* color: red;*/ /*}*/ style> head> <body> <p id="d1" class="c1" style="color: blue">贤妻果然很识趣，有前途~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
设置长宽
<style> p { background-color: red; height: 200px; width: 400px; } span { background-color: green; height: 200px; width: 400px; /*行内标签无法设置长宽 就算你写了 也不会生效*/ } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
字体属性
p { /*font-family: "Arial Black","微软雅黑","..."; !*第一个不生效就用后面的 写多个备用*!*/ /*font-size: 24px; !*字体大小*!*/ /*font-weight: inherit; !*bolder lighter 100~900 inherit 继承父元素的粗细值*!*/ /*color: red; !*直接写颜色英文*!*/ /*color: #ee762e; !*颜色编号*!*/ /*color: rgb(128,23,45); !*三基色 数字 范围 0-255*!*/ /*color: rgba(23, 128, 91, 0.9); !*第四个参数是颜色的透明度 范围是 0-1*!*/ /*当你想要一些颜色的时候 可以利用现成的工具 1 pycharm 提供的取色器 2 qq 或者微信截图功能 也可以多软件结合使用 */ }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
文字属性
p { /*text-align: center; !*居中*!*/ /*text-align: right;*/ /*text-align: left;*/ /*text-align: justify; !*两端对齐*!*/ /*text-decoration: underline;*/ 下划线 /*text-decoration: overline;*/ 头顶带线 /*text-decoration: line-through;*/ 删除线 /*text-decoration: none;*/ /*在 html 中 有很多标签渲染出来的样式效果是一样的*/ font-size: 16px; text-indent: 32px; /*缩进 32px*/ } a { text-decoration: none; /*主要用于给 a 标签去掉自带的下划线 需要掌握*/ }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
背景图片
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #d1 { height: 500px; background-color: red; # 背景颜色 } #d2 { height: 500px; background-color: green; } #d3 { height: 500px; background-image: url("222.png"); 重点，默认会铺满 background-attachment: fixed; # background-attachment :定义背景图片随滚动轴的移动方式 # 取值: scroll | fixed | inherit #scroll: 随着页面的滚动轴背景图片将移动 #fixed: 随着页面的滚动轴背景图片不会移动 #inherit: 继承初始值: scroll } #d4 { height: 500px; background-color: aqua; } style> head> <body> <div id="d1">div> <div id="d2">div> <div id="d3">div> <div id="d4">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
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
边框
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { background-color: red; border-width: 5px; border-style: solid; border-color: green; } div { /*border-left-width: 5px;*/ /*border-left-color: red;*/ /*border-left-style: dotted;*/ /*border-right-width: 10px;*/ /*border-right-color: greenyellow;*/ /*border-right-style: solid;*/ /*border-top-width: 15px;*/ /*border-top-color: deeppink;*/ /*border-top-style: dashed;*/ /*border-bottom-width: 10px;*/ /*border-bottom-color: tomato;*/ /*border-bottom-style: solid;*/ border: 3px solid red; /*三者位置可以随意写*/ } #d1 { background-color: greenyellow; height: 400px; width: 400px; border-radius: 50%; /*直接写 50%即可 长宽一样就是圆 不一样就是椭圆*/ } style> head> <body> <p>穷人 被 diss 到了 哭泣.pngp> <div>妈拉个巴子,妈拉个巴子,妈拉个巴子,妈拉个巴子div> <div id="d1">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
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
display 属性
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> /*#d1 {*/ /* !*display: none; !*隐藏标签不展示到前端页面并且原来的位置也不再占有了 但是还存在于文档上*!*!*/ /* display: inline; !*将标签设置为行内标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: inline;*/ /*}*/ /*#d1 {*/ /* display: block; !*将标签设置成块儿级标签的特点*!*/ /*}*/ /*#d2 {*/ /* display: block;*/ /*}*/ /*#d1 {*/ /* display: inline-block;*/ /*}*/ /*#d2 {*/ /* display: inline-block; !*标签即可以在一行显示又可以设置长宽*!*/ /*}*/ style> head> <body> <div style="display: none">div1div> <div>div2div> <div style="visibility: hidden">单纯的隐藏 位置还在div> <div>div4div> 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
CSS盒子模型
margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding: 用于控制内容与边框之间的距离；
Border(边框): 围绕在内边距和内容外的边框。
Content(内容): 盒子的内容，显示文本和图像。
margin外边距
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; } 推荐使用简写： .margin-test { margin: 5px 10px 15px 20px; } 顺序：上右下左- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
常见居中：
.mycenter { margin: 0 auto; }- 1
- 2
- 3
padding内填充
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }- 1
- 2
- 3
- 4
- 5
- 6
推荐使用简写：
.padding-test { padding: 5px 10px 15px 20px; }- 1
- 2
- 3
顺序：上右下左
补充padding的常用简写方式：
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；浮动
"""浮动的元素 没有块儿级一说 本身多大浮起来之后就只能占多大""" 只要是设计到页面的布局一般都是用浮动来提前规划好 <style> body { margin: 0; } #d1 { height: 200px; width: 200px; background-color: red; float: left; /*浮动 浮到空中往左飘*/ } #d2 { height: 200px; width: 200px; background-color: greenyellow; float: right; /*浮动 浮到空中往右飘*/ } style>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
-
相关阅读:
能否帮我写个论文的框架。
Python + Django4 搭建个人博客（二）：准备开发环境
存储器笔记
vue3项目的src下的各个文件夹介绍
vue造轮子完整指南--npm组件包开发步骤
同步FIFO设计实现（8/7）
创建第一个鸿蒙开发项目
【操作系统】I/O软件层次结构
聚丙烯酸/Fe3O4纳米复合材料PAA/Fe3O4|α-Fe2O3和Fe3O4不同尺寸的纳米复合材料|齐岳
计算机网络 | 02.[HTTP篇] 请求方式
- 原文地址：https://blog.csdn.net/kafu0/article/details/126130412
