认识 CSS
层叠样式表
引入方式
方式一
CSS代码,直接写在 HTML 的 style 标签里
| <style> |
| p { |
| color:red; |
| font-size:30px; |
| } |
| </style> |
方式二
在 HTML 使用 link 标签引入
| <link rel="stylesheet" href="./test.css"> |
| |
| rel 属性(了解) |
| 1. rel 属性规定当前文档与被链接文档之间的关系 |
| 2. 只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持 |
方式三
CSS代码,直接写在标签的 style 属性值里(不推荐)
| <div style="color:red; font-size:20px;"> 这是div标签 </div> |
| |
| 行内样式,配合 JavaScript 使用 |
CSS 注释
CSS 特性
继承性、层叠性、优先级
作用:简化代码 ( 定位问题 ),并解决问题
| 1.继承性: |
| 子级默认继承父级的文章控制属性,当然,如果子级自己有则生效自己的样式,不继承。 |
| 2.层叠性: |
| 相同的属性会覆盖:后面的CSS属性覆盖前面的CSS属性 |
| 不同的属性会叠加:不同的CSS属性都生效 |
| 3.优先级: |
| 优先级也叫权重,当一个标签使用了多种选择器时,基于不同种类的选择器的匹配规则 |
| 规则内容:选择器优先级高的样式生效 |
| 公式详情: |
| |
| |
| |
| 即:选中标签的范围越大,优先级越低 |
| !important 提权功能,提高权重/优先级提到最高,慎用!! |
| |
| 举例: |
| <style> |
| .box { |
| color:blue !important; |
| } |
| </style> |
选择器
作用:查找标签,从而能够设置样式
基础选择器
1.标签选择器
| <style> |
| p { |
| color:red; |
| } |
| </style> |
| |
| 使用"标签名"(如:p、div、h1...)作为选择器->选中"同名标签"设置"相同的样式" |
2.类选择器
| <style> |
| .to-red { |
| color:red; |
| } |
| .TO-big { |
| font-size:20px; |
| } |
| </style> |
| |
| <body> |
| <p class="to-red">111111</p> |
| <p>222222</p> |
| <p class="to-red TO-big">333333</p> |
| </body> |
| |
| 查找标签,差异化设置标签的显示效果(一个标签可以使用多个类名,当 class 属性值要写多个类名时,类名与类名之间用空格隔开) |
3.id选择器
| <style> |
| #d1 { |
| color:red; |
| } |
| </style> |
| <body> |
| <div id="d1">111111</div> |
| <div>222222</p> |
| <div>333333</div> |
| </body> |
| |
| id 选择器一般配合 JavaScript 使用,很少用来设置 CSS 样式(注意,同一个id 选择器在一个页面只能使用一次) |
4.通配符选择器
| <style> |
| * { |
| color:red; |
| } |
| </style> |
| |
| 不需要调用,浏览器自动查找页面所有标签,设置相同的样式 |
复合选择器
| 定义:由两个或多个基础选择器,通过不同的方式组合而成 |
| 作用:更准确、高效的选择目标元素(标签) |
| 类型: |
| 1.后代选择器 |
| 2.子代选择器 |
| 3.并集选择器 |
| 4.交集选择器 |
1.后代选择器
| 作用: |
| 选中某元素的后代元素(包括儿子、孙子、重孙子...) |
| 写法: |
| 父选择器 子选择器 { |
| css属性:值; |
| } |
2.子代选择器
| 作用: |
| 选中某元素的子代元素(最近的子级) |
| 写法: |
| 父选择器 > 子选择器 { |
| css 属性:值; |
| } |
3.并集选择器
| 作用: |
| 选中多组标签设置相同的样式 |
| 写法: |
| 选择器1, 选择器2, 选择器3 { |
| css属性:值; |
| } |
4.交集选择器
| 作用: |
| 选中同时满足多个条件的元素(了解) |
| 注意:标签选择器必须书写在最前面 |
| 写法: |
| <style> |
| ` |
| p.box { |
| color:red; |
| } |
| </style> |
| <body> |
| <p class="box">p标签,使用了类选择器</p> |
| <p>p标签</p> |
| <div class="box">div标签,使用了类选择器</div> |
| </body> |
伪类选择器
- 伪类表示 "元素状态",选中元素的某个状态,设置样式!
| 鼠标悬停状态: |
| |
| 选择器:hover { |
| CSS属性:属性值; |
| } |
| |
| <style> |
| |
| a:hover { |
| color: red; |
| text-decoration: none; |
| } |
| .box:hover { |
| color:blue; |
| } |
| </style> |
| |
| <body> |
| <a href="#">a标签</a> |
| <div class="box">div标签</div> |
| </body> |
| 伪类---超链接 |
| |
| 超链接共有四个状态,分别是: |
| |
| :link 访问前 |
| :visited 访问后 |
| :hover 鼠标悬停 |
| :active 点击时(激活) |
| |
| 提示:如果要给超链接设置以上四个状态,需要按LVHA的顺序书写 |
文字属性
字体大小
字体粗细
| font-weight:400 |
| |
| 正常:400,加粗:700 |
字体倾斜
| font-style |
| |
| 不倾斜:normal,倾斜:italic |
行高
| line-height:20px; |
| |
| 直接写数字的话,将作为当前标签 font-size 属性值的倍数 |
字体族
| font-family:Microsoft YaHei, Heiti SC; |
| |
| 从左往右,有这个字体就执行这个字体,没有就向右继续执行备胎字体,建议在工作中使用无衬线字体进行兜底 sans-serif |
字体复合属性
| font:italic 700 30px/2 楷体; |
| |
| 文字倾斜、文字加粗、字体大小30px、行高2倍、楷体 |
| (注意:字号和字体必须书写,否则不生效) |
文本属性
文本缩进
| text-indent:2em; |
| |
| 推荐使用em ,若当前标签的字号的大小为16px,则1em=16px,2em=32px。 |
| 当然也可以使用"数字+px",但是不推荐。 |
| 首行缩进两个字实例:text-indent:2em; |
文本对齐
| text-align:center; |
| |
| 文本对齐方式: left、center、right |
| 居中的本质是文字居中,而不是标签居中 |
| 扩展:图片居中 |
| |
| <style> |
| div { |
| text-align:center; |
| } |
| </style> |
| |
| <div> |
| <img src="./images/pic.jpg" alt="这是一张猫的图片"> |
| </div> |
修饰线
| text-decoration:none; |
| |
| none 清除所有效果 |
| underline 下划线 |
| line-through 删除线 |
| overline 上划线 |
| 例子: 清除"a标签"的下划线 |
| |
| <style> |
| a { |
| text-decoration:none; |
| } |
| </style> |
| |
| <a>点击前往</a> |
颜色
| color: red; |
| |
| rgb 表示法(了解) |
| 1. rgb(r,g,b) |
| 2. 三元色取值(0-255) |
| |
| rgba 表示法(开发使用) |
| 1. rgba(r,g,b,a) |
| 2. a 表示透明度,其取值为(0-1) |
| |
| 十六进制表示法(开发使用) |
| 1. #000000、#ffcc00... |
| 2. 简写形式:#000、#fc0... |
背景属性
属性大全
| 背景色 background-color |
| 背景图 background-image |
| 背景图平铺方式 background-repeat |
| 背景图位置 background-position |
| 背景图缩写 background-size |
| 背景图固定 background-attachment |
| 背景复合属性 background |
背景图
引用背景图
| <style> |
| div { |
| width: 400px; |
| height: 400px; |
| |
| background-image: url(); |
| } |
| </style> |
| |
| <body> |
| <div>div标签</div> |
| </body> |
平铺方式
| 属性名: background-repeat(bgr) |
| |
| 属性值: |
| no-repeat 不平铺 |
| repeat 平铺 |
| repeat-x 水平方式平铺 |
| repeat-y 垂直方式平铺 |
| |
| 代码演示: |
| <style> |
| div { |
| width: 400px; |
| height: 400px; |
| background-image: url(); |
| background-repeat: no-repeat; |
| } |
| </style> |
| |
| <body> |
| <div>div标签</div> |
| </body> |
背景图位置
| 属性名:background-position |
| |
| 属性值:水平方向位置,垂直方向位置,具体如下: |
| 1.属性值方式一:关键字 |
| left 左 |
| right 右 |
| center 居中 |
| top 顶部 |
| bottom 底部 |
| 2.属性值方式二:坐标(数字+px,正负都可以) |
| 3.属性值方式三:上面两者混用 |
| |
| 代码演示: |
| <style> |
| div { |
| width: 400px; |
| height: 400px; |
| background-color: pink; |
| background-image: url(./images/1.png); |
| background-repeat: no-repeat; |
| |
| background-position:center bottom; |
| background-position:50px -100px; |
| bakcground-position:50px center; |
| } |
| </style> |
| |
| <body> |
| <div>div标签</div> |
| </body> |
背景图缩放
| 属性名:background-size |
| |
| 属性值: |
| cover:等比例缩放背景图片以完全覆盖区域,可能背景图片部分看不见 |
| contain:等比例缩放背景图片以完全装入背景区,可能背景区部分空白 |
| 百分比:根据盒子尺寸计算图片大小 |
| 数字 + 单位(例如:px) |
| |
| 代码演示: |
| <style> |
| div { |
| width: 600px; |
| height: 400px; |
| background-color: pink; |
| background-image: url(./images/1.png); |
| background-repeat: no-repeat; |
| |
| background-size:100%; |
| background-size:cover; |
| background-size:contain; |
| } |
| </style> |
背景图固定
作用:背景不会随着元素的内容滚动
| 属性名:background-attachment |
| |
| 属性值:fixed |
显示模式
| 1.块级元素(例如:div) |
| * 独占一整行 |
| * 宽度默认是父级的100% |
| * 添加宽高属性会生效 |
| |
| 2.行内元素(例如:span) |
| * 一行共存多个 |
| * 尺寸由内容撑开 |
| * 加宽高不生效 |
| |
| 3.行内块元素(例如:img) |
| * 一行共存多个 |
| * 默认尺寸由内容撑开 |
| * 加宽高属性会生效 |
转换显示模式
| 属性名:display |
| |
| 属性值: |
| block 块级 (独占一行,宽高生效) 例如:div |
| inline-block 行内块 (一行共存,宽高生效) 例如:img |
| inline 行内 (一行共存,宽高无效) 例如:span |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现