HTML+CSS笔记3
一.CSS选择器
1标签选择器(TAG选择器)
css : div{}
html : < div></div>
使用场景:
去掉某些标签的默认样式时
复杂的选择器中,如层次选择器
2群组选择器(分组选择器)
写法css :
div , p , span{}
可以通过逗号的方式,给多个不同的选择器添加统一的css样式,来达到代码的复用。
3通配选择器
*{ }
会给所有的标签添加样式,慎用。
去掉所有标签的默认样式
4层次选择器
后代 : M N { }当前M后面的所有N标签
父子:M > N{ }当前M标签下面的一层N标签
兄弟:M ~ N{ } 当前M下面的所有兄弟N标签
相邻:M + N { } 当前M下面的相邻的N标签
<style>
/* #list li{border: 1px red solid;} */
/* #list > li{border: 1px red solid;} */
/* div~h2{background: red;} */
/* div+h2{background: red;} */
</style>
<body>
<ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol> -->
<!-- <div>这是一个块</div>
<p>这是一个段落</p>
<h2>这是一个标题</h2>
</body>
5.属性选择器
M[attr] { }
=:完全匹配
*= : 不完全匹配
^= : 起始匹配
$= : 结束匹配
[ ] [ ] [ ]:组合匹配
6.伪类选择器
CSS伪类选择器用于向某些元素添加特殊的效果,一般用于初始样式添加不上的时候,用伪类来添加。
M:伪类{ }
:link 访问前的样式 (只能添加给a标签)
:visited 访问后的样式 (只能添加给a标签)
:hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)
注:一般的网站都只设置 a{ } ( link visited active ) a: hover{ }
:after 、:before 通过伪类的方式给文本添加一个内容,使用content属性
:checked、:disabled、:focus 都是针对表单元素的
这是一个链接 ```
结构性伪类选择器
nth-of-type ( )、nth-child ( )
角标是从1开始的,1表示第一项,2表示第二项
frist-of-type
last-of-type
only-of-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li:first-of-type{background-color: blue;}
li:nth-of-type(2n+3){background-color:greenyellow;}
li:nth-of-type(2n){background-color: red;}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
nth-of-type ( )和nth-child ( )之间的区别:
type:类型
child:孩子
二.CSS样式继承
文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的,但是可以设置继承属性 inherit值)
<style>
div{ width: 60px;height: 60px; border: 2px red solid;}
p{border:inherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
</html>
暂时效果:
三.CSS优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高。
2.内部样式与外部样式
内部样式与外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * > 继承
style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
4.import群组
提升样式优先级,非规范模式,不建议使用(不能针对继承的属性进行优先级的提升)
5.标签+类与单类
标签+类 > 单类
6.群组优先级
群组选择器与单一选择器优先级相同,靠后写的优先级高。
7.层次优先级
1.权重比较
ul li .box p input { } 1+1+10+1+1
.hello span #elem{ } 10+1+100
2.约分比较
ul li .box p input { } 约分后 li p input{ }
.hello span #elem{ } 约分后 #elem{ }
五.CSS盒子模型
content、padding、margin
-组成:content --> padding --> border --> margin
(物品 --> 填充物 --> 包装盒 --> 盒子与盒子之间的间距)
1content
content : 内容区域 由width和height组成的
2 padding
padding: 内边距(内填充)
number : 30px
只写一个值:30px (上下左右)
写两个值 : 30px 40px (上下 、左右)
写四个值:30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
padding-top:上填充
padding-left:左填充
padding-right:右填充
padding-bottom:下填充
3 margin
margin : 外边距(外填充)
只写一个值:30px (上下左右)
写两个值 : 30px 40px (上下 、左右)
写四个值:30px 40px 50px 60px(上、右、下、左)
单一样式只能写一个值:
margin-top:上填充
margin-left:左填充
margin-right:右填充
margin-bottom:下填充
注:
1.背景颜色会填充到margin以内的区域
2.文字会在content区域
3.padding不能出现负值,margin是可以出现负值的。
练习:
<style>
#box1{width: 350px;height: 350px;border: 1px black dashed; padding:27px;}
#box2{border: 5px #d7effe solid; padding: 20px;}
#box3{background: #ffa0df;padding: 41px;}
#box4{border: 1px white dashed; padding: 3px;}
#box5{border: 1px white dashed; padding: 49px;}
#box6{width: 100px;height: 100px;background-color: #96ff38;border: #fcff00 5px solid;}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3">
<div id="box4">
<div id="box5">
<div id="box6"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
展示效果:
六.标签分类
按类型
block(块): div 、ui 、li 、p、 h1 …
1.独占一行
2.支持所有样式
3.不写宽的时候,跟父元素的宽相同。
4.所占区域是一个矩形
inline(内联): span 、a 、em 、strong、 img…
1.挨在一起的
2.有些样式不支持,例如:width 、height、 margin、 padding…
3.不写宽的时候,宽度由内容决定
4.所占区域不一定是矩形
3.内联标签之间有空隙,原因:换行产生的
inline-block(内联块) : input 、 select…
1.挨在一起,但支持宽高
注:布局一般用块标签,修饰文本一般用内联标签。
按内容
flow:流内容
interactive:互动的
heading:标题
sectioning:分区
embedded :嵌入的
phrasing:措辞
按显示
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
img、input…
非替换元素:将内容直接告诉浏览器,将其显示出来。
div、 h1、p…
6.显示框类型
dispiay: block、 inline、 inline-block、 none
区别:
display : none 是不占空间的隐藏
visibility : hidden 占空间的隐藏
七.标签嵌套规范
组合规范
ul li
dl dt dd
table tr td
块标签可以嵌套内联标签
< div>
< span> < /span>
< /div>
块标签不一定能嵌套块标签
居然大多数可以嵌套 但< p> < /p>不能嵌套div
内联标签不能嵌套块标签
特殊:
< a herf=“#”>
< div> < /div>
< /a>
这个是可以的
八.overflow溢出隐藏
visible:默认
hidden:截取
scroll:x、y轴滚动条
auto:自动感知 内容多就会出现滚动条
x轴、y轴:overflow-x、overflow-y针对两个轴分别设置
九.透明度与手势
1 透明度opacity
opacity : 0 (透明 )~~ 1(不透明)
0.5(半透明)
注:占空间、所有的子内容也会透明
rgba() : 0~~1 可以让指定的样式透明,而不影响其他样式
2 手势 cursor
cursor:手势
default:默认 鼠标的样式
要实现自定义手势 ,需要准备图片: .cur、.ico 格式
cursor : url(./img/cursor.ico),auto;
十.最大、最小宽高
min-width、min-height
max-width、max-height
百分比单位:换算→以父容器的大小进行换算的
一个容器这么适应屏幕的高:容器加height:100% ; body:100% ;
十一.CSS默认样式
有些标签有默认样式,有些没有默认样式
没有默认样式:div、span…
有默认样式:
body→margin:8px
h1→margin:上下 21.440px
font-weight : bold
p→margin:上下 16px
ul→margin:上下 16px padding:左 40px
默认点:list-style : disc
a→text-decoration:underline
CSS reset:
*{ margin : 0; padding : 0; }
优点:不用考虑哪些标签有默认的margin和padding
缺点:稍微影响性能
ul{ list-style : none; }
a{ text-decoration : none ; color : #999 ; }
img{ display : block ; }
问题的现象:图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
vertical-align:baseline; 基线的对齐方式,默认值
img{ vertical-align : bottom; }解决方式是推荐的
写具体页面的时候和一个布局效果的时候:
1.写结构
2.CSS重置样式
3.写具体样式
float浮动
脱离文档流,沿着父容器靠左或靠右进行排列。
left、right、none
float注意点
只会影响后面的元素。
内容默认提升半层。
默认宽根据内容决定。
换行排列(放不下的时候换行排列)
主要给块元素添加,但也可以给内联元素添加。
如何清除浮动
上下排列:
clear属性,表示清除浮动的,left、right、left
嵌套排列:
固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果。
父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素。
overflow:hidden(BFC规范),如果有子元素想溢出,那么会受到影响。
display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
设置空标签:不推荐,会多一个标签。
after伪类:推荐,是空标签的加强版,目前各大公司的做法。
注:clear属性只会操作块标签,对内联标签不起作用