![](https://img-blog.csdnimg.cn/7ed17604460d4c28979996099daaffb2.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
css
全栈开发
全栈开发工程师,互联网教育特约讲师
展开
-
css专栏 01.css简介 01.css引入方式
# 01.css引入方式[toc]{type: "ol", level: [3]}### 内部直接引入```html<style> h1 { color: green; }</style>```### 从外部引入> 解耦合 最正规的方式```html<link href="my_css.css" rel="stylesheet">``````css// my_css.cssh2 { c...原创 2022-03-14 23:13:36 · 74 阅读 · 0 评论 -
css专栏 01.css简介 02.css注释及语法结构
# 02.css注释及语法结构[toc]{type: "ol", level: [3]}### css注释- 单行注释```css/*单行注释*/```- 多行注释```css/*多行注释通过注释划定样式区域*/```### 语法结构```css/* 选择器名称 { 属性1:值1; 属性2:值2; 属性3:值3; ... }*/```...原创 2022-03-14 23:20:04 · 119 阅读 · 0 评论 -
css专栏 02.选择器 01.基本选择器
# 01.基本选择器[toc]{type: "ol", level: [3]}### html结构> 元素没有选择器时,会与其父标签保持一致```html<div id="d1" class="c1 c2"> div <p> div_p </p> <span> div_span </span></div><p id="p1"...原创 2022-03-14 23:23:23 · 75 阅读 · 0 评论 -
css专栏 02.选择器 02.组合选择器
# 02.组合选择器[toc]{type: "ol", level: [3]}### html结构```html<span>span1</span><span>span2</span><div> div <p> div_p </p> <p> div_p <span> div_p...原创 2022-03-14 23:30:29 · 57 阅读 · 0 评论 -
css专栏 02.选择器 03.属性选择器
# 03.属性选择器[toc]{type: "ol", level: [3]}### html结构```html<label> <input type="text" username> <input type="text" username="apple"> <input type="text" username="admin"></label><p username="lili"> ...原创 2022-03-14 23:34:00 · 56 阅读 · 0 评论 -
css专栏 02.选择器 04.伪类选择器
# 04.伪类选择器[toc]{type: "ol", level: [3]}### 伪类选择器> 配置不同交互状态下,元素的显示效果- html结构```html<a href="https://www.google.com">谷歌</a>```- 未点击```cssa:link { color: green;}```- 悬停```cssa:hover { color: darkgoldenrod;}```...原创 2022-03-14 23:37:33 · 80 阅读 · 0 评论 -
css专栏 02.选择器 05.伪元素选择器
# 05.伪元素选择器[toc]{type: "ol", level: [3]}### 伪元素选择器> css添加内容 无法被用户选中> 可用于清除浮动带来的影响- html结构```html<p>Love Apple</p>```- first-letter> 为第一个文字添加样式```cssp:first-letter { font-size: 48px; color: brown;}```- bef...原创 2022-03-14 23:40:47 · 79 阅读 · 0 评论 -
css专栏 02.选择器 06.分组与嵌套
# 06.分组与嵌套[toc]{type: "ol", level: [3]}### html结构```html<div id="d1"> div <p class="c1"> div_p <span id="s1">div_p_span1</span> <span id="s2">div_p_span2</span> </p><...原创 2022-03-14 23:45:39 · 68 阅读 · 0 评论 -
css专栏 02.选择器 07.选择器优先级
# 07.选择器优先级[toc]{type: "ol", level: [3]}### 选择器优先级- 选择器相同> 从上向下读写,就近原则- 选择器不同> 精确度越高,范围越小,优先级越高**行内式**{style="color:brown"} > **id选择器**{style="color:goldenrod"} > **类选择器**{style="color:green"} > **标签选择器**{style="color:gold"}`...原创 2022-03-14 23:49:29 · 65 阅读 · 0 评论 -
css专栏 03.属性设置 01.文本属性
# 01.文本属性[toc]{type: "ol", level: [4]}#### 字体```cssfont-family: "Al Bayan",serif;```#### 字号```cssfont-size: 18px;```#### 加粗```cssfont-weight: bold;```#### 装饰线- 下划线:underline- 顶部线:overline- 删除线:line-through- 去掉样式:none> 可用于给a标签去...原创 2022-03-14 23:53:08 · 97 阅读 · 0 评论 -
css专栏 03.属性设置 02.背景属性
# 02.背景属性[toc]{type: "ol", level: [3,4,5]}### 背景填充#### 背景颜色```cssheight: 360px;width: 600px;/*背景颜色 只能影响背景色*/background-color: rgba(60,60,60,0.6);```![背景属性-背景填充-背景颜色](02.背景属性-背景填充-背景颜色.png)#### 背景图片##### 图片地址```cssbackground-imag.原创 2022-03-14 23:59:00 · 66 阅读 · 0 评论 -
css专栏 03.属性设置 03.display属性
# display属性[toc]{type: "ol", level: [3,4,5]}### none- 隐藏标签> 不占据位置> 不展示给用户```cssdisplay: none;```### block- 让标签拥有块类标签的特点> **可以设置**{style="color:goldenrod"}宽度与高度> **保留**{style="color:gold"}上下外边距/内边距 独占一行```cssdisplay: block;...原创 2022-03-15 00:09:29 · 73 阅读 · 0 评论 -
css专栏 03.属性设置 04.溢出属性
# 04.溢出属性[toc]{type: "ol", level: [3]}### 溢出属性- 隐藏:hidden- 滚动:scroll- 自动:auto> 用于裁剪头像或处理文字溢出```html<p> It's a good idea love is apple hello world It's a good idea love is apple hello world</p>``````cssp { width: ...原创 2022-03-15 00:12:47 · 59 阅读 · 0 评论 -
css专栏 03.属性设置 05.边距属性
# 05.边距属性[toc]{type: "ol", level: [3]}### 边距属性- margin> 外边距> 标签与标签之间的距离```cssbody { /*浏览器自带8px边距 可将其去除*/ margin: 0; /*margin: 4px 8px 16px 32px*/}margin-left: 0;margin-top: 36px;```- border> 边框> 标签的边框厚度```cssbo...原创 2022-03-15 00:16:44 · 69 阅读 · 0 评论 -
css选择器 04.浮动与定位 01.浮动
# 01.浮动[toc]{type: "ol", level: [3,4]}### 浮动属性- 浮在空中并移动- 失去块级特性,本身是多大,就占多大位置- 会造成父标签塌陷的问题```html<div id="d1" class="claerfix"> <div id="d2"></div> <div id="d3"></div> <div id="d4"></div>...原创 2022-03-15 00:20:26 · 50 阅读 · 0 评论 -
css专栏 04.浮动与定位 02.定位
# 02.定位[toc]{type: "ol", level: [3,4]}### html结构```html<div id="d1"></div><div id="d2"> <div id="d3"></div></div><div style="height: 3000px"></div><div id="d4"></div>```### 相对...原创 2022-03-15 00:26:32 · 63 阅读 · 0 评论