1 .CSS3 圆角(border-radius)
在CSS3中,使用border-radius属性用于创建圆角
代码:
div{
border: 2px solid #b5b5b5;
border-radius: 5px;
width: 300px;
text-align: center;
background-color: lightgrey;
padding: 8px 16px;
2 .CSS3 盒阴影(box-shadow)
box-shadow属性用来定义盒阴影。语法:box-shadow: x y z red。其中x、y、z代表3个方向偏移量
代码:
div{
border: 2px solid #b5b5b5;
border-radius: 5px;
width: 300px;
text-align: center;
background-color: lightgrey;
padding: 8px 16px;
box-shadow: 5px 5px 5px #949494;
}
.class-show ul li:hover{position: relative;top: -3px;left: 0;box-shadow: 0px 5px 5px #c8c8c8;}
.coachshow ul li:hover {
position: relative;
top: -3px;
left: 0;
box-shadow: 0px 0px 5px #c8c8c8, /*上边阴影 红色*/
-5px 0px 5px #c8c8c8, /*左边阴影 绿色*/
5px 0px 5px #c8c8c8, /*右边阴影 蓝色*/
0px 0px 5px #c8c8c8;
border-radius: 15px;
}
hover
hover的效果设置 通俗的来说,就是当你鼠标停留在<a>标签上面时,a标签的样式在原理样式的基础上,根据hover{}做出对应改变,如颜色改变,margin改变等,hover{}中没有重设的地方依然采取默认的样式。
li:hover与a:hover的区别
<style>
ul.two
{ display:none; }
li#one:hover
{ display:block }
</style>
<li id="one">
<a id=“a1”>链接</a>
<ul class="two">
<li><a>链接1-1</a></li>
<li><a>链接1-2</a></li>
</ul>
</li>
如果用a#a1:hover来控制列表的颜色,
那么当光标移动到ul.two时,就会失效,因为光标离开了a#a1,a#a1:hover不再成立
如果用li#one:hover来控制列表的颜色,
那么当光标移动到ul.two时,不会失效,因为ul.two包含在li#one中,所以此时li#one:hover仍然成立。
display: inline-block什么意思,应用场景
inline-block的特点是结合inline和block两种属性的特定,可以设置width和height,并且元素保持行内排列的特性,基于这一点,所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。
css样式
background 背景颜色 font-size 字体大小
color 字体颜色 solid 实线 dotted 圆点 dashed 虚线 (边框的设置方式)
border 边框的线条大小
border-collapse(0) 边框的边距为0
margin outo 水平居中
使用一个包裹层将页面主题包裹起来,设置width和margin就可以使整个页面居中。
width是页面内容区的宽度,margin是外边距,将左右外边距设为auto后,变可以自动计算左右外边距导致页面居中。
background-size 100%背景色改大小
color 设置文本颜色
text-align:right ;设置元素水平对齐方式
text-indent:20px ;设置文本首行缩进
line-height:25px;设置文本的行高
text-decoration :underline;设置文本装饰
underline 下划线
overline 上划线
line-through文字中间贯穿线
blink 闪烁
none无装饰
超链接伪类
a:link 点击时(定义a元素未访问时的样式)
a:visited 访问后(定义a元素访问后的样式)
a:hover 鼠标悬浮(定义鼠标经过显示的样式)
a:active 点击未释放(定义鼠标单击激活时的样式)
RGBA
在RGB基础上增加了控制alpha透明度的参数其中这个透明通道值为0~1
RGB十六进制方法表示颜色:有前两位表示红色分量,中间两位表示绿色分量最后两位表示蓝色分量
rgb(r,g,b,)正数值为0~255
text-shadow:color(阴影的颜色)x-offset(x轴移动用来指阴影水平移)y-offset(y轴移动阴影垂直位移动)blur-radius(阴影模糊半径)
box-shadow:color(阴影的颜色)x-offset(x轴移动用来指阴影水平移)y-offset(y轴移动阴影垂直位移动)blur-radius(阴影模糊半径)
list-style-type:none无标记符号
disc 实心圆 circle 空心圆 square 实心正方圆 decimac 数字
盒子模型
border-color 边框颜色
border 2px double red 四个边框
高级选择器:
body>div:nth-of-type(1)指定元素
background-color背景颜色
background-size背景图片大小
background-repeat:背景图片的重复方式
no-repeat:背景图片不重复方式
repeat-x背景图片水平重复
repeat-y背景图片垂直重复
background-position背景图片的位置
margin-top上边距
margin-right右边距
margin-last左边距
margin-bottom下边距
margin 0px out 去掉网页内边距
border-radius圆角
padding内边距依次顺序上,右,下,左
border-width
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 规定应该从父元素继承边框宽度。
标准文档流:只元素根据块元素和行内元素的特性按从上到下从左到右
display-block块级元素的默认值,元素背显示为块级元素该元素前后有换行符
display-inline内联元素的默认值,元素会显示为内联元素
display-inline-block行内块元素
display-noone设置元素不会显示
头部
身体
尾部 article独立的文章内容 aside相关内容和应用 nav导航辅助内容
标准文档流组成
块级元素(block)
列表 内联元素( inline )
float:left元素向左浮动
overflow: hidden;边框塌陷 清除塌陷
float:right元素向右浮动
float:none默认值,不浮动
lianear-gradient (red ,black)线性渐面
45deg角度
radial-gradien (20deg ,red,blue)劲向渐面
background-image: linear-gradient(to right, red , yellow)从左到右的线性渐变
repeating-radial-gradient(red, yellow 10%, green 15%);重复的径向渐面
不同尺寸大小关键字的使用
size 参数定义了渐变的大小。它可以是以下四个值:
closest-side
radial-gradient(closest-side at 60% 55%, red, yellow, black)渐变的边缘形状与容器距离渐变中心点最近的一边相切(圆形)或者至少与距离渐变中心点最近的垂直和水平边相切(椭圆)
farthest-side
radial-gradient(farthest-side at 60% 55%, red, yellow, black)与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)。
closest-corner
radial-gradient(closest-corner at 60% 55%, red, yellow, black);渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
farthest-corner
radial-gradient(farthest-corner at 60% 55%, red, yellow, black)渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
at中心点
定位
relative 相对定位,保留原位置
absolute 绝对定位以浏览器窗口为基础为准进行定位
fixed 固定一个位置不动
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
z-index 属性值:整数,默认值为0
设置了position属性值时,z-index属性可以设置个元素之间的重叠高低关系
z-index值大的层位于值小的层上方
opacity:x x值为0~1越小越透明。opacity:0.4;
定位小结3-1
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后,它原来的位置会被保留下来
层级提高,可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用,都是配合
绝对定位使用,为绝对定位创造定位父级而又不设
置偏移量
定位小结3-2
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位,
如果没有设置定位父级,则相对浏览器窗口来定位
元素位置发生偏移后,原来的位置不会被保留
层级提高,可以把标准文档流中的元素及浮动元
素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下,绝对定位用在下拉菜单、焦点图轮 数字气泡特别花边的场景
定位小结3-3
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
通配符
E【attr】 选择匹配具有属性attr的E元素
E【attr=val】 选择匹配具有属性attr的E元素并且属性值为val其中val(区分大小写)
E【attr~=val】 用于选取属性值中包含指定词汇的元素。
E【attr|=val】 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
E【attr^=val】 匹配属性值以指定值开头的每个元素。
E【attr$=val】 匹配属性值以指定值结尾的每个元素。
E【attr*=val】 匹配属性值中包含指定值的每个元素。9:02 2020/12/3
p段落上下间距
p默认情况下有上下间距 div没有,若想清除可以设置p{margin:0px;padding:0px;},margin与padding同时也适用于css中p段落调整上下间距(而line-height由于值设置越大,段落间距和行距都会增加,不推荐)。
块级元素和行内元素
display:inline---- -block------inline-block---》改变元素的布局级别
1.display:inline--多个相邻元素排一行,直到占不下,宽度随着元素内容而变化,设置width,height无效
2.display:block--多个元素各自起新行,宽度自动填满父元素,可以设置width,height,padding,margin
3.display:inline-block--既具有block的宽度高度特性又具有inline的同行特性
示例如下:
1.<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度设置无效
2.<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度设置生效,自动生成两行
3.<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">链接一</a>
宽高度生效,且排列在同一行