欢迎浏览『JavaWeb前端』专栏的其他文章:
一、HTML-精炼-易懂
文章目录
**持续完善中。。。**
二、CSS基础
CSS(Cascading Style Sheets):层叠样式表
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
-
css语法规则
选择符:表明应用于哪个或哪些HTML元素的样式
属性:body { background-color: blue; }
属性的值:blue(本例)
-
CSS三种方式
内联样式表(HTML的style属性定义)
<!DOCTYPE html> <html style="background-color: blue"> <head> <title></title> </head> <body> </body> </html>
内部样式表(head内style标签定义)
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body{ background-color: red } </style> </head> <body> </body> </html>
外部样式表(外部文件)----推荐
-
标签优先级:范围越小,优先级越高,((*)最低)元素选择器 < class选择器 < id选择器 < 内联样式
- 强制优先级: 在需要最高优先级的样式后 + !important,表示其优先级最高
1 - CSS基本样式
由三部分组成:选择符、属性、值
body
{
background-color:red;
font-family: "Times New Roman"; <!--值由多个单词组成,应加引号-->
}
2 - 颜色与背景
body{
background: [background-color] [background-image] [background-repeat] [background-position];
}
属性 | 值 | 含义 |
---|---|---|
color | #0000ff | 前景色 |
background-color | #eeeeee | 背景色 |
background | url(“url是相对于当前CSS定义所在的位置或完整路径”) | 背景 |
background-repeat | no-repeat | 不平铺 |
repeat-x | 在x方向上都平铺 | |
repeat-y | 在y方向上都平铺 | |
repeat | 默认是在x,y方向上都平铺 | |
background-position | left / center / right / 50% / 200px | 距离左测的距离x |
top / center / bottom / 50% / 200px | 距离顶部的距离y | |
background-size | px px | 缩放后的图片大小 |
注意:background-size必须写在background(改变图片大小必须先加载图,反之则无效)
-
案例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } .img { width: 300px; height: 500px;/* 设置的长宽可能无法完整显示图片(图片:411px 730px) */ background: url(http://image.biaobaiju.com/uploads/20180211/01/1518284655-tbVFsHcGLN.jpg) no-repeat;/* 图片地址 不平铺*/ background-size: 300px 500px;/* 图片缩放比例,设置以后可以将图片显示完全 */ } </style> </head> <body> <div class="img"></div> </body> </html>
3 - 字体
body{
font: [font-style] [font-weight] [font-size] [font-family];
}
属性 | 值 | 含义 |
---|---|---|
font-family | font-family: arial,"Times New Roman",sans-serif; | 设置字体时,首选字体>候选字体>字符类 |
font-style | normal | 正常 |
initial / oblique | 斜体 | |
font-weight | normal | 正常 |
bold | 加粗 | |
font-size | px(13px) | 像素 |
pt(13pt) | 点数 | |
em(2em–当前字体的两倍,同是em会继承父级元素的字体大小) | 字体尺寸 | |
4 - 文本
属性 | 值 | 含义 |
---|---|---|
text-indent | 34px | 文本缩进 |
text-align | left/right/center | 对其方式 |
text-decoration | underline | 下划线 |
line-through | 删除线 | |
overline | 上划线 | |
letter-spacing | 10px | 字符之间的距离 |
text-transform | capitalize | 首字母大写 |
uppercase | 全部大写 | |
lowercase | 全部小写 | |
5 - 选择符
-
选择器后+
:hover
鼠标移上之后的样式
5 - 1 通配选择符(*)
*{
margin:0;
padding:0;
}
5 - 2 类型选择符(HTML)
div {
text-indent: 34px;
text-align: left;
text-decoration: underline;
}
5 - 3 包含选择符(空格)
- 子元素选择器:
- 用
>(大于号)
连接,只对直接子元素生效 - 用
(空格)
连接,会对此标签下的所有指定的子标签生效
- 用
#myid>span{/*只对元素id值为myid下的span(直接子元素)标签生效*/
}
div p{/*对元素div标签下的所有p标签生效*/
text-indent: 100px;
text-align: left;
text-decoration: line-through;
}
5 - 4 ID选择符(#)
#myid{
font-size: 50px;
}
#myid span{
color: blue;
}
5 - 5 class选择符(.)
.myclass{
color: yellow;
}
5 - 6 伪类选择符(:)
选择符 | 含义 |
---|---|
a:link | 链接未访问前的样式 |
a:active | 活动的链接,即获得焦点的链接(按住鼠标左键不放) |
a:hover | 鼠标悬停样式 |
a:visited | 链接访问过后的样式 |
-
未访问
a:link{ /*未访问的样式*/ color: blue; }
-
已访问
a:visited{ /*已访问的样式*/ color: gray; }
-
活动的
活动的链接,即是获得焦点的链接(比如点击鼠标左键不放)
a:active{ /*按住链接不放的样式*/ background-color: green; }
-
鼠标悬停
a:hover{ /*鼠标悬停的样式*/ color: red; }
5 - 7 综合案例:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/**{
color: red;
}*/
a{
font-size: 30px;
}
a:link{ /*未访问的样式*/
color: blue;
}
a:active{ /*按住链接不放的样式*/
background-color: green;
}
a:hover{ /*鼠标悬停的样式*/
color: red;
font-style: italic;
}
a:visited{ /*已访问的样式*/
color: gray;
}
div {
text-indent: 34px;
text-align: left;
text-decoration: line-through;
}
div p{
color: red;
text-decoration: line-through;
}
#myid{
font-size: 50px;
}
#myid span{
color: blue;
}
.myclass{
color: yellow;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank" name="baidu">链接到百度首页</a>
<div>
我啥也不是!!<br>
<div id="myid">
<p>ID牛逼!!</p>
<span>ID-span牛逼!!</span>
<p class="myclass">class牛逼!!</p>
</div>
</div>
</body>
</html>
6 - 大小的单位
-
%、px
%:参照父元素的大小
px:定值
-
vh、vw
vh:根据浏览器的高度而变化
vw:根据浏览器的宽度而变化
-
em
参照父元素的大小,变为父元素的多少倍
-
rem(相较于em,此较为常用)
参照浏览器的大小(字体),变为其的多少倍
7 - 游标(cursor)
鼠标移动到元素上显示什么样式
-
pointer 小手
a标签自带样式
-
move 移动
-
*-resize 指定方向移动
-
wait 等待(圆圈)
-
help 帮助 (箭头+?)
-
crosshair 大十字
-
text 文本(竖棍)
8 - overflow
当内容超过元素大小时,会出现显示不全的问题,在父元素中用overflow解决
-
visible 默认
-
auto 自动加滚动条(内容超出时)
-
hidden 超出的部分不显示
通常用于显示图片
-
scroll 加滚动条(无论内容是否超出)
9 - 过渡时间
样式改变的时候经历一个过渡时间
transition: 过渡时间 延迟时间
过渡时间:样式变化的一个速度
延迟时间:样式过多久之后在开始改变
10 - 倒影
只有google浏览器等webkit内核浏览器支持该样式
-webkit-box-reflect
- below 下方显示
- above 上方显示
- left 左方显示
- right 右方显示
可以传两个值,第二个值表示阴影距离图片的距离
11 - 背景阴影
box-shadow: 右阴影 下阴影 锐化(看着如同发光一样) 阴影色
12 - 背景渐变
-
线性渐变
呈现一条直线得到渐变方式
background: linear-gradient(角度,开始颜色,结束颜色);
background: linear-gradient(90deg,#c6ffdd,#fbd786,#f7797d);
-
径向渐变(圆形扩散)
background: -webkit-radial-gradient(两个值确定一个点,扩散距离两个值(横向、纵向),开始色,结束色);
background: -webkit-radial-gradient(500px 500px,500px 500px,#000000,#ff0000);
background: -webkit-radial-gradient(center center, 400px 400px, #ffaa7f, rgba(0, 0, 0, 1));
注意:当扩散距离未充满整个区域时,剩下的区域会由结束色填充