标签选择器(TAG选择器)
css:div{}
html:
<div></div>
应用场景:1.去掉某些标签默认样式时
2.复杂选择器(如层次选择器)
群组选择器(分组选择器)
css:div,p,span{}
可以通过都好的方式给多个不同的选择器添加统一的css样式,达到代码的复用
通配选择器
*{}
给所有标签添加css样式
慎用(去掉所有标签的默认样式时可使用)
层次选择器
后代:M N
父子:M>N
兄弟:M~N
相邻:M+N
编写尝试2
后代
<head>
<style>
ul li{ 样式}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
后代选择器将只选择ul标签下的li标签也包括li标签内ul的li标签(父亲(ul)的孩子(li)的孩子(ul)的孩子(li))
父子
<head>
<style>
ul > li{ 样式;}
</style>
</head>
<body>
<ul>
<li>
<ul>
<li></li>
</ul>
</li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</body>
父子选择器将选择ul标签下的li但不包含li中ul的li
(父亲(ul)的孩子(li))
兄弟
<head>
<style>
div ~ h2{ 样式;}
</style>
</head>
<body>
<h2>标题a</h2>
<div>块</div>
<h2>标题b</h2>
<h2>标题c</h2>
</body>
兄弟选择器会选择div标签下方的所有h2标签
如上所写则标题a没有样式而标题b和标题c有
相邻
<head>
<style>
div + h2{ 样式;}
</style>
</head>
<body>
<h2>标题a</h2>
<div>块</div>
<h2>标题b</h2>
<h2>标题c</h2>
</body>
相邻选择器会选择div标签下方的相邻的h2标签
如上所写则标题a标题c没有样式而标题b有
属性选择器
M[attr](有该属性)
M[attr=value](属性的值完全符合)
M[attr*=value](属性的值包含value)
M[attr^=value](属性的值的开始为value)
M[attr$=value](属性的值的结束为value)
如:id="a-b"则a是开始b是结束
M[attr1][attr2](同时拥有多个属性)
M为选择器
attr为属性
value为属性的值
如
<style>div[id=a]{ }</style>
就会选择div标签中拥有id属性且值为a的
伪类选择器
css伪类用于向某些元素添加特殊的效果,用于初始样式无法添加的情况。
:link
(只对a标签)
:visited
(只对a标签)
:hover
(对所有标签)
:active
(对所有标签)
若四个都生效则按顺序 L V H A
一般网站这样设置:a{} a:hover{}
:after
(向后添加内容)
:before
(向前添加内容)
通过伪类的方式给元素添加一段文本内容,用content属性
:checked
(标签具有checked(选中)属性时改变样式)
:disabled
(标签具有checked(选中)属性时改变样式)
:focus
(输入框有光标时改变样式)
都是针对表单元素的
编写尝试3
a标签
<head>
<style>
a:link{color: red;}
/* 链接在未访问时为红色 */
a:visited{color: green;}
/* 链接在访问后时为绿色 */
a:hover{color: blue;}
/* 鼠标移到目标时修改属性 */
a:active{color: yellow;}
/* 鼠标按下时修改,抬起时还原 */
</style>
</head>
<body>
<a href="链接地址">链接文字</a>
</body>
一般情况下网站只设置
a{} (link visited active) a:hover
link visited active可以作为属性添加进选择器样式
hover和active
<head>
<style>
div{width: 100px;height: 100px;background-color: red;}
div:hover{background-color: blue;}
/* 鼠标移到目标时修改属性 */
div:active{background-color: yellow;}
/* 鼠标按下时修改,抬起时还原 */
</style>
</head>
<body>
<div></div>
</body>
after和before
<head>
<style>
div:before{content: "aaa";}
div:after{content: "ccc";}
</style>
</head>
<body>
<div>bbb</div>
</body>
显示效果为aaabbbccc
使用这个办法可以省去span标签的使用单独给aaa,ccc添加样式
清除浮动,添加小图标等(后面会讲)
::两个冒号表示伪元素(后面会讲)
结构性伪类选择器
:nth-of-type()
:nth-child()
角标从1开始,1表示第一项,2表示第二项
n 表示从0到无穷,2n表示偶数项可做类似运算如3n,4n
<style>
li:nth-of-type(2){background-color: red;}
/* 如此则第二个li标签背景变红 */
li:nth-child(2){background-color: red;}
/* 如此则不变红 */
</style>
<ul>
<li></li>
<div>aaa</div>
<li></li>
<li></li>
</ul>
child选择的是从第一个li开始数的第二项,若第二项不是li则无效
type选择的是所有li中的第二个故生效
:first-of-type
(对第一项生效)
:last-of-type
(对最后一项生效)
:onle-of-type
(若只有一项则生效,有两项则不生效)
样式继承
文字相关的样式可继承
布局相关的样式不可继承
<div>
<p></p>
</div>
如上则p标签内的内容可以继承选择器中div标签的样式
但仅限文字相关,布局相关不行
可以通过设置属性使布局相关继承(inherit)
在style中添加p{border:inherit;}
使p标签继承
CSS优先级
- 相同样式(若重复则后面的优先级高)
- 内部样式和外部样式(优先级相同,如果设置了相同的样式则后写入的优先级高)
- 单一样式(style行间>id>class>tag>*>继承)
style行间指
<div style="样式"></div>
这种形式
注:style行间权重1000,id 100 ,class 10, tag 1
!important
提升样式优先级,但不合规
如
div{background-color: red !important;}
则此时背景颜色为红优先级最高。
不能对继承属性优先级进行提升。
- 标签+类与单类
标签+类的优先级比单类高
如.box{color:red;}
div.box{color:blue}
两者之间后者优先级高
- 群组
在同一个等级下,群组选择器与单一相同,靠后写的优先级高)
- 层次(权重比较与约分比较)
权重比较
约分比较
尽量避免,写三层以内
盒子模型
组成:content(物品)
paading(填充物)
border(包装盒)
margin(盒子之间的间距)
content:width与height组成
padding:内边距(内填充)
padding-(left,right,top,bottom)可以单独设置一边
只有一个值时表示上下左右,两个值为上下/左右,四个值为上右下左
border:边框
margin:外边距(外填充)与padding类似
背景色填充到margin以内的区域
文字在content区域
padding不能为负但margin可以
margin为负时可能会出现两个盒子叠加的情况
box-sizing(57)
盒尺寸,可以改变盒形态
该属性可以以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认)|border-box
content-box:width、height(针对content)(默认)
border-box:width、height(content padding border)
不用计算一些值了
解决一些百分比的问题
margin叠加(58)
上下margin同时存在时会出现margin叠加问题
此时取值较大的作为叠加值
解决方案:
1.BFC规范
2.只给一个元素添加间距
margin传递(59)
其只会出现在嵌套结构中,只有margin-top会出问题
解决方案:
1.BFC规范
2.添加边框(泛用性不强)
3.用margin换成padding(里面的盒子动不了就动外面的盒子)
margin自适应居中
margin-left:auto;margin-right:auto
可以实现居中(只能左右不能上下)
若想实现上下适应,以后会学
对宽和高不设置时,继续计算容器大小
小练习:61
标签分类
按类型:
block:块(div、p、ul、li、h1……)
1.占一行
2.支持所有样式
3.不写宽的时候,跟父元素的宽相同
4.所占区域是一个矩形
inline:内联(如:span、a、em、strong、img……)
1.挨在一起
2.有些样式不支持,如:width、height、margin、padding
3.不写宽的时候,宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会因换行产生间隙
注:span是用来修饰文本的,不用它来做布局,布局一般用块标签,修饰文本一般用内联标签。(块默认是上下布局)
(实现左右布局的解决方案:找到这两个元素的富容器)
inline-block:内联块(如input、select……)
1.挨在一起且支持宽高
2.内联标签之间会因换行产生间隙
3.支持所有样式
4.所占区域是一个矩形
按内容
Flow:流内容(有一些内容是会叠,表示网页中能够感知到的一些标签)
如:标题、块和区域可以感知到,大部分标签都为Flow的特点
Metadata:元数据(如:设置网页中的一些编码。)
如:title、link、style……一部分是可以感知到的,还有一部分是感知不到的。
Sectioning:分区(表示划分区域,除了常见的div标签以外,还有很多划分区域的)
Heading:标题(h1~h6)
Phrasing:措辞(对文本的一个修饰)
如:strong、em……基本为内联标签
Embedded:嵌入的
如:通过src引入图片,添加视频等的
Interactive:互动的(指用户和界面进行一些交互操作。—)
比如:输入框、下拉菜单等
按显示
替换元素(替换标签):浏览器根据元素的标签和属性,来决定元素的具体显示内容。如img、img等
非替换元素:将内容直接告诉浏览器,将其显示处理。
如div、h1、p等
显示框类型
display
显示框类型:block、inline 、inline-block、none
注:
1.display:none→不占空间的隐藏
2.visibility:hidden→占空间的隐藏
标签嵌套规范
一些组合标签可以嵌套使用
ul、li
dl、dt、dd
table、tr、td
- 块标签可以嵌套内联标签:
<div>
<span></span>
<a href=“#”></a>
</div>
- 块标签不一定能嵌套块标签
块嵌套块:
<div>
<div></div>
</div>
3.内联标签不能嵌套块标签
a标签例外
<a href=“#”>
<div></div>
</a>
溢出隐藏
overflow:
visible:默认
hidden:隐藏
scroll:滚动条(一直显示)
auto:内容多时滚动条,少时没有
x轴、y轴:overflow-x、overflow-y 针对两个轴分别设置
透明度与手势
opacity(对整体进行透明操作)
opacity:0(透明)占空间~1(不透明)
0.5(半透明)
注:占空间、所有的子内容也会透明
rgba(对背景进行透明操作)
rgb : 0~1
注:可以让指定的样式透明,而不影响其他样式
cursor(手势)
default:默认箭头
move可移动的、pointer手型、help带问号
自定义鼠标样式
实现自定义手势:准备图片:.cur、.ico
cursor:url(./img/cursor.ico),auto
最大、最小宽高
min-width、max-width
min-height、max-height
注:强化对百分比单位的理解
百分比单位→换算:以父容器的大小进行换算
一个容器怎么适应屏幕的高:容器加height:100%; body:100%; html:100%
html,body{height:100%;}
.contrainer{height:100%;}能够自适应屏幕
默认样式
有些标签有默认样式,有些标签没有默认样式。
1.没有默认样式:
div、span……
2.有默认样式:
body、h1~h6、p、ul、……
body→margin:8px
h1→margin:上下 21.44px
h1→font-weight:bold(加粗)
p→margin:上下 16px
ul→margin:上下 16px padding:左 40px(默认点:list-style:disc)
a→text-decoration:underline;(下划线)
CSS重置样式(71)
CSSreset:
1.*{margin:0;padding:0;}
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微的影响性能
body,p,h1,ul{margin:0;padding:0;}
2.ul{list-style:none;}(没有点)
3.a{tex-decoration:none;color:#666;}
默认颜色是蓝色
4.img{disply:block;}
图片和容器底部有一些空隙。
内联元素是对齐方式是按照文字基线对齐的,而不是文字底线对齐
vertical-align:baseline;基线对齐方式,默认
解决方案:img{vertical-align:bottom;}
写具体页面的时候或者写一个布局效果的时候:
1.写结构
2.CSS重置样式
3.写具体样式
float浮动
文档流
文档中可显示对象在排列时所占用的位置。
标签分为块内联,块标签的默认的排列方式是从上到下,内联标签的默认的排列方式是从左到右
float特性
加浮动的元素,会脱离文档流,会延着父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
float取值
left:向左浮动
right:向右浮动
none:不浮动(默认)
浮动的元素可能会叠加在正常的文档流元素
float注意点
- float只会影响下方的元素
- 文字默认提升半层(可以实现图文混排效果)
文字不会被覆盖而会被挤开
- 不设置宽时由内容决定宽
- 换行排列(浮动元素排列不下会折行)
- 主要给块元素添加,也可给内联元素添加
float浮动的清除
上下排列:clear表示清除浮动(left清左浮动,right清右浮动,both全部清除)
嵌套排列
解决方案:
1. 固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
2. 父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
3. overflow:hidden(BFC规范),不推荐,父容器会影响到后面的元素。
4. display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
5. 设置空标签:不推荐,会多添加一个标签。
6. after伪类:推荐,是空标签的加强版,目前各大公司的做法。
如
clear:after{ content:'';clear:both;display:block;
}
after伪类添加的内容默认为内联形式,需要转换成块
82.83为制作页面小练习