CSS基础语法(全)
29-CSS
30-CSS引入方式
-
内部样式
CSS 代码写在style标签里面
-
外部样式
<link rel="stylesheet" href="./my.css">
-
行内样式
<div style="color:green; font-size:30px;"> 这是div 标签 </div>
31-选择器-标签和类
-
标签选择器
标签选择器都是以标签名作为选择器,选中同名标签设置相同的格式
<style> p{ color:red; } </style> <body> <p> 这是叔叔叔叔 </p> <p> hhhhhhha哈哈哈哈 </p> </body>
-
类选择器
定义类选择器- > .类名
使用类选择器 -> 标签添加 class="类名"
<style> .red{ color:red; } </style> <body> <p class="red"> 111111 </p> <p> 222222 </p> <div class="red"> div标签 </div> </body>
一个类选择器可以给多个标签使用
32-ID 和通配符
id 选择器:
-
定义id 选择器 : #id名
-
定义 id 选择器 : 标签添加 id="id名"
<style> #red{ color:red; } </style> <body> <div id="red"> div标签 </div> </body>
通配符选择器
作用:查找页面所有标签,设置相同的格式
通配符选择器:* 不需要调用,浏览器自动查找页面所有的标签,设置相同的格式
*{ color:red; }
33-画盒子
<style> .red{ width:100px; height:100px; background-color:brown; } </style> <body> <div class="red"> div1 </div> </body>
34-文字控制属性
写一个字体倾斜的代码
<style> em{ font-style:normal; } div{ font-style:italic; } </style> <body> <em>em标签</em> <div> div 标签 </div> </body>
行高
<style> p{ font-size: 20px; line-height: 2; //如果行高为数字,那么表示的是倍数 } </style>
只能是当行文字才能实现
36-字体族
font-family :楷体
37-font属性
38-文本缩进
<style> p{ text-indent : 2em; font-size: 30px; } </style>
文本对齐
<style> h1{ text-align :center; } </style>
居中的是文字内容,不是标签
水平对齐方式-图片
<style> div{ text-align-center; } </style> <body> <div> <img src="" slt=""> </div> </body>
修饰线
44-复合选择器
由两个或者多个基础选择器组成,通过不同的方式组合而成。
后代选择器:选中某元素的后代元素
选择器写法:父选择器,子选择器,赋值选择器之间用空格隔开
<style> div span{ color:red; } </style> <body> <span>span标签</span> <div> <span>这是div 的儿子</span> <p> <span>这是div的孙子</span> </p> </div> </body>
<style> div > span{ color:red; } </style> <body> <span>span标签</span> <div> <span>这是div 的儿子</span> <p> <span>这是div的孙子</span> </p> </div> </body>
这样就只会输出儿子的标签了。这个也就是子代选择器
并集选择器
并集选择器:选中多组标签设置相同的格式
选择器写法:选择器1,选择器2.。。
交集选择器
选中同时满足多个条件的元素
<style> div.box{ color:red; } </style> <body> <span>span标签</span> <div class="box"> 这里这段文字输出 </div> </body>
45-伪类选择器
伪类表示元素状态,选中元素的某个状态设置样式
鼠标悬停状态:选择器 hover(css属性)
<style> a:hover{ color:red; } .box:hover{ color:green; } </style> <body> <a href="#">a 标签,超链接</a> <div class="box">div 标签</div> </body>
选中范围越大,优先级越低
通配符选择器 《 标签选择器 〈 类选择器 《 id选择器 < 行内样式
! important 权重最高
从左向右一次比较选的个数,同一级个数多的优先级高,如果个数相同,则向后比较
!important 权重 最高
47-emment 写法
48-背景
默认是平铺的,会显示多张照片
不平铺,只会显示一张且原像素大小
背景图缩放
-
cover 等比例缩放背景图片以完全覆盖背景区
div{ background-repeat : no-repeat; background-image:url(./images/1.png); background-size:contain; 如果宽高根盒子尺寸相等停止播放,可能导致盒子有空白 background-size:cover; background-size:100%; }
背景图固定
background-attachment: fixed;
50-显示模式
-
独占一行,宽高属性生效,默认宽度是父级的100%,是块级的显示特点 一般是用div
-
一行共存多个,宽高属性不生效,宽高由内容撑开,是行内模式的特点. 一般是用span
-
一行共存多个,宽高属性生效,宽高默认由内容撑开是行内块的显示模式特点 一般是用img
转换显示模式
<style> div{ width:100px; height:100px; display:inline-block; display: inline; } </style> <body> <div class="div1"> div1111 </div> <div class="div2"> div2222 </div> <span class="span1">span11111</span> <span class="span2">span1</span> <img src="./images./1.png" alt=""> <img src="./images./1.png" alt=""> </body>
记住这几个特性
.banner{ • height: 500px; • background-color: url(./images/bk.png) • background-repeat: no-repeat; • background-position: left bottom; }
banner轮播图
真的很不戳
54-结构伪类选择器
伪元素选择器
快捷输出“w100 + h100 + bgc
57-盒子模型
<style> div{ width: 200px; height: 200px; background-color:pink; padding:20px; border:10x solid margin:50px; } </style>
盒子模型-边框线
Solid : 实现
Dashed: 虚线
Dotted: 点线
padding : 10px 20px 40px 80px
上右下左
margin: 0 auto; 也是可以的,会自动调整
盒子模型-元素溢出
div { width: 200px; height: 200px; background-color: pink; /* 测试不同 overflow 属性 */ overflow: auto; /* 当前设置 */ }
<style> .father { width: 300px; height: 300px; background-color: pink; border-top: 1px solid #000; overflow: hidden; /* 添加 overflow 解决问题 */ } .son { width: 100px; height: 100px; background-color: orange; margin-top: 50px; } </style> <div class="father"> <div class="son">son</div> </div>
或者是这样的写法
66-圆角属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆角矩形</title> <style> div { margin: 50px auto; width: 200px; height: 200px; background-color: orange; border-radius: 20px; } </style> </head> <body> <div></div> </body> </html>
左上角,右上角,右下角,左下角
border-radios:50%;
71-浮动
浮动后的盒子有什么特点:* 顶对齐 * 具备行内块功能 * 脱标
很久之前,我们做过小米官网的实现。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex 布局</title> <style> /* 父容器 */ .product { display: flex; /* 使用 Flex 布局 */ justify-content: space-between; /* 子元素之间均匀分布 */ align-items: flex-start; /* 子元素顶部对齐 */ flex-wrap: wrap; /* 自动换行 */ width: 100%; /* 父容器宽度 */ background-color: brown; height: auto; /* 高度根据内容自适应 */ } /* 左侧内容 */ .left { width: 200px; /* 固定宽度 */ height: auto; /* 高度根据内容自适应 */ background-color: lightblue; } /* 右侧内容 */ .right { display: flex; /* 使用 Flex 布局 */ flex-wrap: wrap; /* 自动换行 */ gap: 14px; /* 子元素间距 */ width: calc(100% - 220px); /* 右侧内容宽度,减去左侧宽度及间距 */ } /* 每个子元素 */ .right li { list-style: none; /* 去掉列表样式 */ width: calc(25% - 14px); /* 每行 4 个,减去间距 */ height: 300px; background-color: orange; } /* 右侧最后一行的边距调整 */ .right li:nth-child(4n) { margin-right: 0; /* 每行最后一个子元素清除右边距 */ } </style> </head> <body> <div class="product"> <div class="left">左侧内容</div> <div class="right"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> </body> </html>
如果您希望为 .product 容器中的 .left 元素设置样式,应该使用 .product .left 或 .product > .left,而不是 .product.left。
清除浮动
场景:浮动元素会脱标,父级没有高度,子级无法撑开父级高度
flex
display:flex;
第一,先是要有容器,我们称之为弹性容器
第二就是要有弹性盒子,一般是沿着主轴方向排列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Flex 布局居中</title> <style> .box { display: flex; flex-direction: column; /* 主轴为垂直方向 */ justify-content: center; /* 垂直方向居中 */ align-items: center; /* 水平方向居中 */ width: 150px; height: 120px; background-color: pink; } img { width: 32px; height: 32px; } </style> </head> <body> <div class="box"> <img src="https://via.placeholder.com/32" alt="图标"> <p>文字内容</p> </div> </body> </html>
明确每一个地方是怎么变化的,这里自己练习一下
对应79集
堆叠顺序
z-index: 1;
定位
子级绝对定位,父级相对定位
resolute absolute
transform : translate(-50%,50%);
Position :fixed; 表示固定
CSS精灵
vertical-align
过渡属性
transition: all is; img:hover{ width:200px; height:100px; }
透明度
Opacity:0.5;
CSS大体上就是这样。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/524389.html 如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!