CSS选择器
基础选择器（由单个选择器组成）
元素选择器，又称标签选择器
id选择器，“#”
类选择器，又称class选择器，可以有多类名，中间用空格隔开，“.”
通用选择器，“*”
复合选择器(由多个选择器组成)
后代选择器， 祖先元素 子元素 中间用空格隔开
子元素选择器， 祖先元素 > 子元素 中间用大于号隔开，选取的是亲儿子
并集选择器，可以选择多组标签，中间用逗号隔开
超链接选择器：a : hover 鼠标经过时
a : link 未访问过
a : active 鼠标摁下时
a : visited 访问过后
有严格的顺序：link --> visited --> hover --> active
<head>
<style>
a {
text-decoration: none;
color: #ccc;
}
a:hover {
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">百度一下，你就知道</a>
</body>focus伪类选择器：用于选取获得焦点(光标)的表单元素
一般情况下input类表单元素才能获取，主要针对与表单元素来说
<head>
<style>
input:focus {
/* 哪一个获得光标就修改哪一个 */
background-color: pink;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="text" name="" id="">
</body>CSS字体系列
font-family 定义文本的字体系列 常见的有 “Microsoft Yahei ,微软雅黑”
font-size 定义字体大小，单位是像素，谷歌默认为16px
font-weight 定义字体的粗细，推荐用数字，400为正常(normal)，700为加粗(bold)
font-style 设置文本的风格(是否倾斜)，取值有normal和italic
line-height 行高，行高设置偏大，会朝下。设置偏小，会朝上。
复合写法
font: font-style font-weight font-size/line-height font-family;
顺序不能更改，必须保留font-size和font-family
color 文本颜色
text-align 文本对齐
text-indent 文本缩进
文本装饰
text-decoration: none; 默认，没有装饰线
text-decoration: overline; 上划线
text-decoration: underline; 下划线
text-decoration：line-through 删除线
CSS的引入方式
内部样式
<head>
<title>网页标题</title>
<style>
</style>
</head>外部样式
<link rel="stylesheet" href="./index.css">行内样式
<p style="color: pink;">1111</p>元素显示模式
块级元素特点：（男人）
- 自己独占一行
- 可以设置宽高和内外边距
- 宽度默认为父级的100%
- 里面可以放行内和块级元素
- 文字类的元素不能使用块级元素(例如：p里面不能放div , h1-h6等)
行内元素特点：（女人）
- 自己不会独占一行，会一行显示
- 宽高直接设置时无效的
- 宽度是内容的宽度
- 行内元素只能容纳文本或其他行内元素
- a链接里面不能再放其他a链接
- 但是a链接里面可以放块级元素(最好转换成块级元素)
行内块元素：（人妖）
- 可以设置宽高
- 不会独占一行，和相邻的行内块元素在一行上，之间会有空白缝隙
- 默认宽度是他本身内容的宽度
- input , img , textarea , td都是行内块元素
- 宽高，行高，内外边距都可以控制
转换为块级元素(也可以让隐藏的元素显示) display : block ;
转换为行内元素 display : inline ;
转换为行内块元素 display : inline-block;
把元素隐藏脱标，不会占有原先的位置 display : none;
visibility：visibility； 对象可视
visibility：hidden； 对象隐藏，但是不脱标，会占有原先的位置
overflow：hidden; 会把溢出的部分隐藏(切掉)
overflow：scroll; 溢出的部分显示滚动条
overflow：auto; 如果不溢出，就不显示滚动条，如果溢出，就会显示滚动条
CSS背景
background-color 背景颜色(transprant是透明色)
background-image(url(“图片地址”)) 背景图片
background-repeat 背景是否平铺(默认为平铺)
background-position：x y; 背景图片位置(可以使用方位名词，也可以使用精准单位，甚至是百分比)
background-attachment：scoll / fixed; 背景图片是否固定或者随着页面的其余部分滚动，一般用作视差滚动的效果
background: pink url(./img/5.jpg) no-repeat top;
background-size: 100%;
background-attachment: fixed;background-size: x y; 设置背景图片大小，可以设置数值px，百分比，关键字。最好单独写
- cover 全覆盖，宽延伸到就可以
- 如果指定一个值，则另一个值为auto
<head>
<title>鼠标经过图片放大</title>
<style>
.box {
overflow: hidden;
width: 500px;
height: 300px;
margin: 100px auto;
background: url(./img/5.jpg) no-repeat center;
background-size: 100%;
border-radius: 10px;
cursor: pointer;
}
.box:hover {
transition: all 1s;
background-size: 110%;
}
</style>
</head>
<body>
<div class="box"></div>
</body>复合写法(没有先后顺序)
background：背景颜色 背景图片 背景是否平铺 背景是否滚动 背景图片位置/背景图片大小；
- 推荐背景图片大小单独写
背景色半透明
background：rgba(0，0，0，.3)； 1是不透明，0是全透明，依次递减
CSS三大特性
层叠性 ，样式冲突时，下面的样式会覆盖上面的样式，遵循就近原则
继承性，子元素会继承祖先元素的某些样式
可以被继承的样式：text- font- line- 这些元素开头的都可以继承，还有color 行高可以带单位，也可以不带单位
<head>
<style>
body {
color: pink;
/* font: 20px/24px 'Microsoft Yahei'; */
font: 20px/1.5 'Microsoft Yahei';
/* 1.5是当前元素文字的1.5倍 */
}
p {
/* 会继承祖先元素的行高，所以这里是 14px * 1.5 = 21px */
font-size: 14px;
}
</style>
</head>
<body>
<p>这是一段神奇的文字</p>
</body>优先级（权重可以叠加，但是永远不会有进位！）
继承或者* 0，0，0，0
元素选择器 0，0，0，1
类选择器，伪类选择器 0，0，1，0
id选择器 0，1，0，0
行内样式 1，0，0，0
! important 无穷大
p { color: skyblue !important; }盒子模型
组成：内边距padding，外边距margin，边框border和内容4部分组成
边框
边框由三部分组成：边框宽度(border-width)，边框样式(border-style)，边框颜色(boeder-color)
复合写法：border : 边框宽度 边框样式 边框颜色; 没有顺序要求
常用的边框样式：solid(实线) dashed(虚线) dotted(点线)
可以分别设置边框：border-top border-right border-bottom border-left
border-color/border-style : border-top border-right border-bottom border-left;(上右下左的顺序)
补充（表格细线边框）
合并边框 border-collapse : collapse;
<style>
table {
width: 500px;
height: 220px;
text-align: center;
}
table,
th,
td {
border: 1px solid pink;
border-collapse: collapse;
}
</style>内边距
内边距padding即边框与内容之间的距离
可以分别设置内边距：padding-top padding-right padding-bottom padding-left
padding : padding-top padding-right padding-bottom padding-left;(上右下左的顺序)
padding : 上下边距 左右边距; (如果是俩个值)
padding : 上边距 左右边距 下边距; (如果是三个值)
外边距
内边距margin即元素与元素之间的距离
可以分别设置内边距：margin-top margin-right margin-bottom margin-left
margin: margin-top margin-right margin-bottom margin-left;(上右下左的顺序)
margin: 上下边距 左右边距; (如果是俩个值)
margin: 上边距 左右边距 下边距; (如果是三个值)
外边距合并问题
- 相邻块元素垂直外边距的合并
取两个值中的较大者
<head>
<style>
.one {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 100px;
}
.two {
width: 200px;
height: 200px;
background-color: purple;
/* 它和上面的外边距会合并，取两者之间的最大值 */
margin-top: 200px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>- 嵌套块元素垂直外边距的塌陷
父元素上有上边距同时子元素上有上边距，此时父元素塌陷的距离就是父子外边距大的内个
<head>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
margin-top: 50px;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
/* 嵌套关系中，父子谁的外边距大，就执行谁的 这个子元素外边距大,所以塌陷距离为100px */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>解决塌陷问题
- 可以为父元素定义上边框
- 可以为父元素添加overflow：hidden；
- 可以为父元素定义上内边距
- 加浮动，固定，或者绝对定位的盒子都不会有塌陷问题
居中对齐方式
让块级元素居中：首先要有宽，然后 margin : 0 auto;
行内或者行内块元素居中：给父元素添加 text-align : center;
清除内外边距
* {
padding: 0;
margin: 0;
/* 防止盒子被撑大 */
box-sizing: border-box;
}行内元素尽量只设置左右的内外边距，不要设置上下内外边距(设置了也不会生效)。但是转换为块级元素或者行内块元素就可以了
圆角边框&阴影
圆角边框
border-radius：像素值 / 百分比 ; 数值越大，越圆润
还可以分别设置四边：border-radius：左上角 右上角 右下角 左下角；
还可以分别设置两边：border-radius：左上角和右下角 右上角和左下角；
还可以单独设置一个角：border-top-left-radius：像素值 / 百分比 ; border-top-right-radius：像素值 / 百分比 ;
border-bottom-right-radius：像素值 / 百分比 ; border-bottom-left-radius：像素值 / 百分比 ;
盒子阴影(影子不占空间)
box-shadow：水平阴影 垂直阴影 [模糊距离 阴影的尺寸 阴影颜色 将外部阴影改为内部阴影]；
水平阴影：允许负值，正值往右走，负值往左走
水平阴影：允许负值，正值往下走，负值往上走
模糊距离：0就是实的，数值越大，越模糊
阴影的尺寸：就是阴影的大小，数值越大，阴影就越大
阴影颜色：一般喜欢用 rgba
将外部阴影改为内部阴影：默认的是外阴影(outset)，但是不可以写上这个单词，否则无效。内阴影是inset
文字阴影(影子不占空间)
text-shadow：水平阴影 垂直阴影 [模糊距离 阴影颜色];
浮动(一浮全浮)
网页布局三要素：浮动 定位 标准流
标准流，又叫文档流/普通流 就是从上到下依次排列
非标准流，就是加浮动和定位的
网页布局第一准则：多个块级元素纵向排列(上下)找标准流，多个块级元素横向排列(左右)找浮动
网页布局第二准则：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
浮动特性
- 浮动可以让多个块元素一行内显示，会脱离标准流
- 浮动只会影响后面的元素，且不会保留原先的位置
- 浮动的元素会具有行内块元素的特性
- 浮动的元素不会压住下面标准流的文字和图片，而绝对和固定定位则会完全压住下面标准流所有的内容
清除浮动
为什么要清除浮动：有的盒子没法给高度(像产品图很多，新闻)，内容多少，高度就是多少。所以需要清除浮动。如果不影响下面的元素就不需要清除，如果影响了下面的元素，一定要清除浮动
- 给父元素加overflow：hidden;
- 额外标签法：
div可以换成其他的块级元素 给父元素添加after伪元素 / 给父元素添加after伪元素 /
.clearfix:after {content: ''; /* 伪元素默认为行内元素，所以必须转换成块级元素 */ display: block; height: 0; clear: both; visibility: hidden; }给父元素添加双伪元素(完美写法，推荐) / 给父元素添加双伪元素(完美写法，推荐) /
.clearfix:after,
.clearfix:before {content: ''; display: table;}
.clearfix:after {
clear: both;
}
常见图片格式
- jpg，JPEG(jpg)对色彩保留较好，高清颜色多。产品类的图片经常用jpg格式的
- gif，小动图，色彩比较少，可以保存透明背景。经常用于一些小动画效果
- png，结合了jpg和gif，可以保存透明背景。如果想要切成背景透明的图片，选择png
- PSD，是ps专用格式，网页设计图
- DPG，京东自主研发退出的压缩技术，可直接节省用户近50%的浏览流量。极大提升了网页打开速度，能够兼容jpeg。压缩后的图片和webp清晰度对比没有差距，这个比webp更好
- webp，谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，节省了空间
定位
定位 = 定位模式 + 边偏移
定位模式(5种)
- static，静态定位。即无定位
- relative，相对定位。相对于自己，不脱标，会占有原来的位置
- absolute，绝对定位。相对于有定位的祖先元素，脱标，不占有原先的位置
- fixed，固定定位。以浏览器的可视窗口为参照，脱标，不会占有原先的位置。
- sticky，粘性定位。以浏览器的可视窗口为参照，不脱标，会占有原先的位置。必须添加至少一个边偏移量(top，left,right,bottom)
<head>
<style>
.w {
height: 1500px;
}
.box {
position: sticky;
top: 50px;
width: 1200px;
height: 50px;
margin: 0 auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="w">
<div class="box">我是导航栏</div>
</div>边偏移
top，bottom，left，right
将小盒子固定到版心右侧
<head>
<style>
.w {
position: relative;
width: 1200px;
height: 1000px;
margin: 0 auto;
background-color: pink;
}
.w .box {
position: fixed;
/* 先移动50% */
left: 50%;
top: 300px;
/* 然后移动版心的一半 */
margin-left: 600px;
width: 40px;
height: 120px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="w">
<div class="box"></div>
</div>
</body>定位的叠放顺序
z-index：数字； 即层级，只有定位的盒子才有这个属性 ！ 那个盒子在上面，那个盒子在下面，数字可以是正值，也可以是负值，数字越大，层级越高
定位的一些特性
- 行内元素加了定位的元素可以直接设置宽高
- 块级元素加了定位，如果不给宽高，默认大小就是内容的大小
- 脱标的盒子不会触发外边距塌陷
- 浮动的元素不会压住下面标准流的文字和图片，而绝对和固定定位则会完全压住下面标准流所有的内容
精灵图
利用background-position：x,y;
x,y就是精灵图移动的距离
<head>
<style>
.box {
width: 60px;
height: 60px;
margin: 100px auto;
/* 开始引入精灵图 */
background: url(./images/sprites.png) no-repeat -182px 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>三角形制作
<head>
<style>
.box {
width: 0;
height: 0;
border: 10px solid transparent;
/* 要那个方向的，就修改border方向 */
border-top-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>鼠标样式&表单轮廓取消&文本域防拖拽
cursor：属性值； 鼠标样式
属性值有：pointer（小手） move（移动） text（文本） not-allowed（禁止）
outline：none; 表单轮廓取消
resize：none； 文本域防拖拽
vertical-align属性
vertical-align：middle/bottom/top/baseline； 经常用于设置图片或者表单(行内块)元素和文字的垂直对齐
baseline，默认，与父元素基线对齐
vertical-align只针对行内块和行内元素有效
<head>
<style>
img {
/* 这是顶部对齐 */
vertical-align: top;
/* 这是底部对齐 */
vertical-align: bottom;
/* 这是中间对齐 */
vertical-align: middle;
}
</style>
</head>
<body>
<img src="./images/ldh.jpg" alt="">这是pink老师
</body>图片底测空白缝隙解决方案
解决方案1：
文字默认是与图片的基线对齐的，所以图片底测会有一点的空白。这时候只需要改一下对齐方式就可以了，只要不是默认的基线对齐就行。
<head>
<style>
div {
/* 文字默认是与图片的基线对齐的，所有图片底测会有一点的空白 */
border: 1px solid pink;
}
div img {
/* 这时候只需要改一下对齐方式就可以了,只要不是默认的基线对齐就行，推荐使用这种 */
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<img src="./images/ldh.jpg" alt="">pink老师
</div>
</body>解决方案2：
把图片转换为块级元素
<style>
div {
/* 文字默认是与图片的基线对齐的，所有图片底测会有一点的空白 */
border: 1px solid pink;
}
div img {
/* 方案2 把图片转换为块级元素，推荐第一种方案 */
display: block;
}
</style>
</head>
<body>
<div>
<img src="./images/ldh.jpg" alt="">
</div>
</body>单行/多行文字溢出省略号显示
单行文字溢出省略号显示：
<head>
<style type="text/css">
/* 单行文字溢出省略号显示，需要满足三个条件 */
.box {
width: 150px;
height: 50px;
background-color: pink;
margin: 100px auto;
/* 1.必须强制一行显示 */
white-space: nowrap;
/* 2.超出部分隐藏 */
overflow: hidden;
/* 3.文字用省略号代替超出的部分 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="box">
这是一段无关紧要的文字，后面省略了一万字
</div>
</body>多行文字溢出省略号显示：
<head>
<style type="text/css">
.box {
/* 这个有兼容性问题，这个是兼容webkit的版本，最好后端人员写 */
width: 150px;
height: 65px;
background-color: pink;
margin: 100px auto;
/* 溢出部分隐藏 */
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本的行数 修改这里的参数，修改第几行出现省略号 */
-webkit-line-clamp: 3;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
这是一段无关紧要的文字，后面省略了一万字,一万字,一万字,一万字
</div>
</body>常见布局技巧
- margin负值的秒用
<head>
<style>
li {
position: relative;
list-style: none;
float: left;
width: 150px;
height: 200px;
border: 1px solid pink;
/* 让每个边框都往左走1px,后面的盒子就压住了前面的盒子,巧妙的避开了边框合并的问题 */
margin-left: -1px;
}
li:hover {
/* 当鼠标经过盒子的时候,提高当前盒子的层级即可 */
border: 1px solid blue;
/* 1. 如果li没有定位,则加相对定位(保留位置) */
/* position: relative; */
/* 2. 如果li有定位,则用z-index: ;提高层级 */
z-index: 99;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>2.文字围绕浮动元素
<head>
<style>
.box {
width: 300px;
height: 70px;
background-color: skyblue;
padding: 5px;
}
.box img {
float: left;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="./images/img.png" alt="">【集锦】热身赛-巴西0-1秘鲁 内马尔替补两人血染赛场
</div>
</body>3.行内块的巧妙运用
<head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
text-align: center;
}
a {
display: inline-block;
text-decoration: none;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
border: 1px solid black;
color: black;
font-size: 14px;
}
a:first-child,
a:nth-child(8) {
width: 87px;
height: 38px;
}
a:nth-child(2),
a:nth-child(7) {
border: 0;
}
.box input {
width: 47px;
height: 38px;
border: 1px solid black;
outline: none;
}
.box button {
width: 60px;
height: 36px;
outline: none;
}
</style>
</head>
<body>
<div class="box">
<a href="#"><<上一页</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">...</a>
<a href="#">>>下一页</a>
到第
<input type="text" name="" id="">
页
<button>确定</button>
</div>
</body>4.css三角强化
<head>
<style>
.box {
position: relative;
width: 200px;
height: 40px;
background-color: pink;
}
.box .little {
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
/* border-top: 40px solid transparent;
border-bottom: 0px solid purple;
border-left: 0px solid red;
border-right: 20px solid skyblue; */
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 40px 20px 0 0;
}
</style>
</head>
<body>
<div class="box">
<div class="little"></div>
</div>
</body>css初始化
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0
box-sizing: border-box;
}
html,body {
height: 100%;
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li 的小圆点 */
li {
list-style: none
}
img {
/* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
border: 0;
/* 取消图片底侧有空白缝隙的问题 */
vertical-align: middle
}
button {
/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
/* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* CSS3 抗锯齿形 让文字显示的更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}补充
- 设置body和html的高度都为百分百
html,body {
height: 100%;
}原文链接：https://blog.csdn.net/qq_52845451/article/details/126632773
此处评论已关闭