元素之后的
元素*/
div+p {
margin: 5px;
}
注意点：
1、相邻兄弟选择器必须通过+连接
2、相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
通用兄弟选择器
属性选择器
- 什么是属性选择器？
- 作用：根据指定的属性名称找到对应的标签，然后设置属性
- 格式：
格式:
[attribute]
作用:根据指定的属性名称找到对应的标签, 然后设置属性
[attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性
最常见的应用场景, 就是用于区分input属性
/*用于选取带有指定属性的元素。*/
p[title] {
color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
color: green;
}
1.属性的取值是以什么开头的
[attribute|=value] CSS2
[attribute^=value] CSS3
两者之间的区别:
CSS2中的只能找到value开头,并且value是被-和其它内容隔开的
CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
2.属性的取值是以什么结尾的
[attribute$=value] CSS3
3.属性的取值是否包含某个特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
两者之间的区别:
CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的
CSS3中的只要包含value就可以找到
其它用法
通配符选择器
选择器练习
选择器练习示例
CSS三大特性
继承性
- 什么是继承性？
- 作用：给父元素设置一些属性，子元素也可以使用，这个我们就称之为继承性
- 示例代码：
<style>
div{
color: red;
}
style>
<div>
<ul>
<li>
<p>我是段落p>
li>
ul>
div>
- 注意点：
1、并不是所有的属性都可以继承，只有以color/font-/text-/line-开头的属性才可以继承
2、在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
3、继承性中的特殊性：
3.1>a标签的文字颜色和下划线是不能继承的
3.2>h标签的文字大小是不能继承的
应用场景：
一般用于设置网页上的一些共性的信息，例如网页的文字颜色，字体，文字大小等内容
层叠性
优先级
!important
CSS属性相关
宽和高
width属性可以为元素设置宽度。
height属性可以为元素设置高度。
块级标签才能设置宽高，内联标签的宽度由内容来决定。
文字属性
font-style
font-weight
font-size
font-family
文字属性的补充
1、如果设置的字体不存在，那么系统会使用默认的字体来显示（默认使用宋体）
2、如果设置的字体不存在，而我们又不想用默认的字体来显示怎么办？
可以给字体设置备选方案
格式：font-family："字体1","备选方案1"...;
3、如果想给中文和英文分别多带带设置字体，怎么办？
但凡是中文字体，里面都包含了英文
但凡是英文字体，里面都没有包含中文
也就是说中文字体可以处理英文，而英文字体不能处理中文
**注意点：如果想给界面中的英文多带带设置字体，那么英文的字体必须写在中文的前面
4、在企业开发中最常见的字体有以下几个
中文: 宋体/黑体/微软雅黑
英文: "Times New Roman"/Arial
还需要知道一点, 就是并不是名称是英文就一定是英文字体
因为中文字体其实都有自己的英文名称, 所以是不是中文字体主要看能不能处理中文
宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
文字属性缩写
- 缩写格式：
font: style weight size family;
- 例如：
font:italic bold 10px "楷体";
- 注意点：
1、在这种缩写格式中有的属性值可以忽略
sytle可以省略
weight可以省略
2、在这种缩写格式中style和weight的位置可以变换
3、在这种缩写格式中有的属性值是不可以缩写的
size不能省略
family不能省略
4、size和family的位置是不能随便乱放的
size一定要写在family的前面，而且size和family必须写在所有属性的最后
文本属性
text-align
text-decoration
- 作用：给文本添加装饰效果
- 格式：
text-decoration: underline;
- 取值：
underline 下划线
line-through 删除线
overline 上划线
none 什么都没有, 最常见的用途就是用于去掉超链接的下划线
- 快捷键：
td text-decoration: none;
tdu text-decoration: underline;
tdl text-decoration: line-through;
tdo text-decoration: overline;
text-indent
颜色属性
在css中如何通过color属性来修改文字颜色
- 格式：
color： 值；
- 取值：
1. 英文单词
2. rgb(255,0,0)
3. rgba(255,0,0,3)
4. #FF0000
-
1.1英文单词
一般情况下常见的颜色都有对应的英文单词, 但是英文单词能够表达的颜色是有限制的, 也就是说不是所有的颜色都能够通过英文单词来表达
1.2rgb
rgb其实就是三原色, 其中r(red 红色) g(green 绿色) b(blue 蓝色)
格式: rgb(0,0,0)
那么这个格式中的
第一个数字就是用来设置三原色的光源元件红色显示的亮度
第二个数字就是用来设置三原色的光源元件绿色显示的亮度
第三个数字就是用来设置三原色的光源元件蓝色显示的亮度
这其中的每一个数字它的取值是0-255之前, 0代表不发光, 255代表发光, 值越大就越亮
红色: rgb(255,0,0);
绿色: rgb(0,255,0);
蓝色: rgb(0,0,255);
黑色: rgb(0,0,0);
白色: rgb(255,255,255)
只要让红色/绿色/蓝色的值都一样就是灰色
而且如果这三个值越小那么就越偏黑色, 越大就越偏白色
例如: color: rgb(200,200,200);
1.3rgba
rgba中的rgb和前面讲解的一样, 只不过多了一个a
那么这个a呢代表透明度, 取值是0-1, 取值越小就越透明
例如: color: rgba(255,0,0,0.2);
1.4十六进制
在前端开发中通过十六进制来表示颜色, 其实本质就是RGB
十六进制中是通过每两位表示一个颜色
例如: #FFEE00 FF表示R EE表示G 00表示B
什么是十六进制?
十六进制和十进制一样都是一种计数的方式
在十进制中取值范围0-9, 逢十进一
在十六进制中取值范围0-F, 逢十六进一
十进制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f
十六进制和十进制转换的公式
用十六进制的第一位*16 + 十六进制的第二位 = 十进制
15 == 1*16 + 5 = 21
12 == 1*16 + 2 = 18
FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255
00 == 0*16 + 0 = 0
1.5十六进制缩写
在CSS中只要十六进制的颜色每两位的值都是一样的, 那么就可以简写为一位
例如:
#FFEE00 == #FE0
color取值详细说明
overflow溢出属性
- 作用：清除溢出盒子边框外的内容
- 格式：overflow:hidden;
overflow （水平和垂直均设置）
overflow-x（设置水平方向）
overflow-y（设置垂直方向）
- 取值：
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
- 示例代码：
View Code
- 添加overflow:hidden前：
- 添加overflow:hidden后：
圆形的头像示例
overflow 圆形头像示例
CSS元素的显示模式
在HTML中HTML将所有的标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有的标签分为两类，分别是块级元素和行内元素
什么是块级元素，什么是行内元素？
块级元素会独占一行
行内元素不会独占一行
常见的容器级的标签：
div h ul ol dl li dt dd ...
常见的文本级的标签：
span p buis stong em ins del ...
常见的块级元素：
p div h ul ol dl li dt dd
常见的行内元素：
span buis strong em ins del
块级元素和行内元素的区别？
块级元素：
- 独占一行
- 如果没有设置宽高，那么默认和父元素一样宽
- 如果设置了宽高，那么就按照设置的来显示
行内元素：
- 不会独占一行
- 如果没有设置宽高，那么默认和内容一样宽
- 行内元素是不可以设置宽度和高度的
行内块级元素：
为了能够让元素既能够不独占一行，又可以设置宽度和高度，那么就出现了行内块级元素
不独占一行，并且可以设置宽高
CSS元素显示模式转换（display属性）
如何转换css元素的显示模式？
设置元素的display属性
背景和精灵图
背景相关属性
background-color
background-image
background-repeat
background-position
- 作用：专门用于控制背景图片的位置
- 格式：
background-position: 水平方向 垂直方向;
- 取值：
1. 具体的方位名词
水平方向：left center right
垂直方向：top center bottom
2. 具体的像素
例如: background-position: 100px 200px;
记住一定要写单位, 也就是一定要写px
记住具体的像素是可以接收负数的
- 快捷键：
bp background-position: 0 0;
- 注意点：同一个标签可以同时设置背景颜色和背景图片, 如果颜色和图片同时存在, 那么图片会覆盖颜色
-
方位取值示例
-
像素取值示例
背景属性连写
和font属性一样，background属性也可以连写
- 格式：
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
- 快捷键：
bg+ background: #fff url() 0 0 no-repeat;
- 注意点：background属性中，任何一个属性都可以被省略
- 什么是背景关联方式？
默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条的滚动而滚动，那么我们就可以修改背景图片和滚动条的关联方式
- 如何修改背景关联方式？
在CSS中有一个叫做background-attachment的属性， 这个属性就是专门用于修改关联方式的
- 格式：background-attachment：scroll;
- 取值：scroll 默认值， 会随着滚动条的滚动而滚动；fixed 不会随着滚动条的滚动而滚动
- 快捷键：ba background-attachment:;
-
滚动背景图示例
鼠标滚动背景不动示例
插入图片和背景图片的区别
- 1.1
背景图片仅仅是一个装饰, 不会占用位置
插入图片会占用位置
- 1.2
背景图片有定位属性, 所以可以很方便的控制图片的位置
插入图片没有定位属性, 所有控制图片的位置不太方便
- 1.3
插入图片的语义比背景图片的语义要强, 所以在企业开发中如果你的图片想被搜索引擎收录, 那么推荐使用插入图片
精灵图
1.什么是css精灵图？
CSS精灵图是一种图像合成技术
2.CSS精灵图作用
可以减少请求的次数, 以及可以降低服务器处理压力
3.如何使用CSS精灵图
CSS的精灵图需要配合背景图片和背景定位来使用
CSS盒模型
什么是CSS盒模型？
CSS盒模型仅仅是一个形象的比喻，HTML中的标签都是盒模型
CSS盒模型指那些可以设置宽度高度/内边距/边框/外边框的标签
1、内容的宽度和高度
就是通过width/height属性设置的宽度和高度
2、元素的宽度和高度
宽度 = 左边距 + 左内边距 + width + 右内边距 + 右边距
高度 同理可证
3、元素空间的宽度和高度
宽度 = 左外边距 + 左边框 + 左内边距 + width + 右内边距 + 右边框 + 右外边距
高度 同理可证
- margin：（外边距）用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目录。
- padding：（内边距）用于控制内容与边框之间的距离
- border（边框）：围绕在内边框和内容外的边框
- content：盒子的内容，显示文本和图像
边框属性（border）
- 什么是边框？
边框就是环绕在标签宽度和高度周围的线条
- 格式：
1、连写（同事设置四条边的边框）
border: 边框的宽度 边框的样式 边框的颜色;
-
2、连写（分别设置四条边的边框）
border-top: 边框的宽度 边框的样式 边框的颜色;
border-right: 边框的宽度 边框的样式 边框的颜色;
border-bottom: 边框的宽度 边框的样式 边框的颜色;
border-left: 边框的宽度 边框的样式 边框的颜色;
- 快捷键：
bd+ border: 1px solid #000;
bt+ border-top: 1px solid #000;
br+ border-right: 1px solid #000;
bb+ border-bottom: 1px solid #000;
bl+ border-left: 1px solid #000;
- 注意点：
1、连写格式中颜色属性可以省略，省略之后默认就是黑色
2、连写格式中样式不能省略，省略之后就看不到边框了
3、连写格式中宽度可以省略，省略之后还是可以看到边框
- 边框样式：
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。
- border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
外边距（margin）
什么是外边距？
标签和标签之间的距离就是外边距
- 格式：
1、非连写
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
示例代码
2、连写
margin: 上 右 下 左;
示例代码
- 注意点：
1、外边距的那一部分是没有背景颜色的
2、这三个属性的取值省略时的规律：
上 右 下 左 > 上 右 下 > 左边的取值和右边的一样
上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样
上 右 下 左 > 上 > 右下左边取值和上边一样
外边距合并现象
默认布局的垂直方向的外边距是不会叠加的，会出现合并现象，谁的外边距比较大就听谁的
外边距合并现象
我是span我是span
我是div
我是div
外边距合并示例
margin-top问题
1、如果两个盒子是嵌套关系，那么设置了里面一个盒子顶部的外边距，外面一个盒子也会被顶下来
2、如果外面的盒子不想被一起顶下来，那么可以给外面的盒子添加一个边框属性
在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，应该首先考虑padding，其次再考虑margin（margin本质上是用于控制兄弟关系之间的间隙的）
text-align:center;和margin:0 auto;区别
text-align:center; 是设置盒子中存储的文字/图片水平居中
margin:0 auto; 是让盒子自己水平居中
![]()
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1650.html
