1 样式分类和语法
1.1 内联样式
1.2 内部样式表(常用)
2 选择器
2.1 基本选择器
2.1.1 标签选择器
<style>
p{
color: red;
}
</style>
<body>
<p>
标签选择器
</p>
</body>
2.1.2 类选择器
2.1.3 id选择器
2.2复合选择器
2.2.1交集选择器
<style>
p.one{
color: red;
}
</style>
<body>
<p class="one">
这个元素会被应用样式
</p>
<p>
这个元素不会被应用样式
</p>
</body>
2.2.2并集选择器
<style>
p,div{
color: red;
}
</style>
<body>
<p>
这个元素会被应用样式
</p>
<div>
这个元素也会被应用样式
</div>
</body>
2.3关系选择器
用法:
父亲>儿子 | 儿子中的个别选择 | 选择器之间有大于号 |
祖先 后代 | 后代全部选择 | 选择器之间用空格隔开 |
兄+弟 | 哥哥的弟弟被选择(弟弟必须严格相邻哥哥) | 选择器之间用+隔开 |
兄~弟 | 哥哥的符合条件的所有弟弟被选择 | 选择器之间用波浪线隔开 |
演示:
body部分:
父亲>儿子:
祖先 后代:
兄+弟,哥哥的弟弟被选择(弟弟必须严格相邻哥哥)
兄~弟,哥哥的符合条件的所有弟弟被选择
2.4属性选择器
语法 | 用法 |
---|---|
[属性] | 选中含有指定属性的元素 |
[属性=属性值] | 选中含有指定属性和指定属性值的元素 |
[属性^=属性值] | 选中含有指定属性和指定属性值开头的元素 |
[属性$=属性值] | 选中含有指定属性和指定属性值结尾的元素 |
[属性*=属性值] | 选中指定属性名和含有指定属性值的元素 |
2.5伪类选择器
CSS 伪类是用来添加一些选择器的特殊效果。
伪类的语法:
selector:pseudo-class {property:value;}
CSS 类也可以使用伪类:
selector.class:pseudo-class {property:value;}
:first-child | 选择某个元素下的第一个子元素 |
:last-child | 选择某个元素下的最后一个子元素 |
:nth-child() | 选择某个元素下的一个或多个特定的子元素 |
:nth-last-child() | 选择某个元素的一个或多个特定的子元素,从后往前数 |
:nth-of-type() | 选择指定的元素 |
:nth-last-of-type() | 选择指定的元素,从后往前数 |
:first-of-type | 选择一个父级元素下的第一个同类型子元素 |
:last-of-type | 选择一个父级元素下的第一个同类型子元素,从后往前数 |
:only-child | 选择的元素是它父元素的唯一 一个子元素 |
:only-of-type | 选择一个元素是上级元素下唯一相同类型的子元素 |
:empty | 选择的元素里面没有任何内容(空标 |
3.盒子
3.1 盒子的边框border
- 边框高度:border-width
- 边框颜色:border-color
- 边框样式:border-style(实线:solid,虚线:dashed)
3.2盒子的外边距margin
margin(外边距)属性定义元素周围的空间
- margin-top :上外边距
- margin-right :右外边距
- margin-bottom :下外边距
- margin-left :左外边距
3.3盒子的内边距padding
padding,定义了内容区距离边框的这一片区域,该区域是透明的,没有颜色。
-
padding-top: 上内边距
-
padding-right: 右内边距
-
padding-bottom:下内边距
-
padding-left: 左内边距
3.4盒子的内容区域content
-
该区域可以放入文本,以及子元素。
-
样式属性width,height,background-color就是对该区域进行设置的
3.5盒子的圆角
border-radius:数值或者百分比;
圆形:
写法一:border-radius:100px:
写法二:border-radius:50%
3.6盒子的阴影
box-shadown:水平阴影位置 垂直阴影位置 模糊程度 阴影尺寸 阴影颜色
刚开始没有影子,当鼠标放入则出现影子:
div:hover{ }
4.浮动
4.1浮动的语法
通过浮动可以使一个元素向其父元素的左侧或右侧移动,
使用 float 属性来设置于元素的浮动。
可选值:
float : left 元素向左浮动
float : right 元素向右浮动
4.2浮动的特点
- 浮动元素不会盖住文字,文字会自动环绕在浮动元素的周围,所以我们可以利用浮动来设置文字环绕图片的效果。
- 元素设置浮动以后,将会从文档流中脱离,从文档流中脱离后,元素的一些特点也会发生变化。
4.3清除浮动clear
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。
例如使用 clear 属性往文本中添加图片廊:
.text_line
{
clear:both;
}
4.4高度坍塌及解决方案
有的时候,父元素的高度不需要设置具体值,而是由子元素撑开的。这样的好处就是,不会因为子元素的内容减少,而出现大量的空白区域,也不会因为子元素的内容过多发生溢出现象。但是,如果子元素设置了浮动效果,那么就会出现一个问题。这个问题是高度塌陷的问题,必须要解决的,否则会影响网页的美观。
解决方案:
1、给父元素一个固定的高度
缺点:给父元素固定高度违背了高度自适应的原则,不够灵活,当不知道父元素的具体高度时没办法设置,不推荐使用。
2、给父元素添加属性:overflow:hidden
缺点:当子元素定位到父元素外的时候,不希望溢出部分隐藏,此方法不适合使用。
3、在最后一个浮动的元素后面添加一个空的div并给该元素添加属性: clear:both;
缺点:在页面中添加无意义的div,形成冗余代码。4、万能清除浮动法:
在父元素中内容的最后添加一个伪元素来实现 父元素选择符::after{ content:""; display:block; clear:both; } 最合适的方法推荐使用
5.元素的定位
5.1static(静态定位)
例如,<div style="position:static;">这是一个静态定位的元素</div> 会按照页面的正常布局显示。
5.2relative(相对定位)
比如,<div style="position:relative; top:5px; left:5px;">会在其原始位置的基础上向上和向左各偏移5像素,但原来的位置依然会被保留下
5.3 absolute(绝对定位)
元素相对于最近的已经完成定位的初始元素进行定位,如果没有已定位的初始元素,则相对于文档的 body 元素进行定位。
例如<div style="position:absolute; top:0; right:0;">这是一个绝对定位的元素
5.4fixed(固定定位):
相对于浏览器窗口进行定位
例如:<div style="position:fixed; bottom:0; left:0;">这是一个固定定位的元素他会始终固定在浏览器窗口的左下角。
6.动画
6.1过渡 transition
transition-property: 指定要执行过渡的属性。
transition-duration: 指定过渡效果的持续时间,时间单位:s 和 ms 1s = 1000ms。
transition-timing-function: 过渡的时序函数。
ease 默认值,慢速开始,先加速,再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速transition-delay: 过渡效果的延迟,等待一段时间后在执行过渡
6.2动画
设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤
animation-name: 要对当前元素生效的关键帧的名字
animation-duration: 动画的执行时间animation-play-state: 设置动画的执行状态
可选值:
running 默认值 动画执行
paused 动画暂停
animation-fill-mode: 动画的填充模式
可选值:
none 默认值 动画执行完毕元素回到原来位置
forwards 动画执行完毕元素会停止在动画结束的位置
backwards 动画延时等待时,元素就会处于开始位置
both 结合了forwards 和 backwards
6.3变形
变形就是指通过CSS来改变元素的形状或位置
- 变形不会影响到页面的布局
- transform 用来设置元素的变形效果
- 平移:
translateX() 沿着x轴方向平移
translateY() 沿着y轴方向平移
translateZ() 沿着z轴方向平移
- 平移元素,百分比是相对于自身计算的
z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,
距离越大,元素离人越近
z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果
6.4旋转
通过旋转可以使元素沿着x y 或 z旋转指定的角度
rotateX()
rotateY()
rotateZ()