『JavaWeb前端』二、CSS - 基础

欢迎浏览『JavaWeb前端』专栏的其他文章:
一、HTML-精炼-易懂

三、CSS - 进阶

四、JavaScript


**持续完善中。。。**

二、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背景色
backgroundurl(“url是相对于当前CSS定义所在的位置或完整路径”)背景
background-repeatno-repeat不平铺
repeat-x在x方向上都平铺
repeat-y在y方向上都平铺
repeat默认是在x,y方向上都平铺
background-positionleft / center / right / 50% / 200px距离左测的距离x
top / center / bottom / 50% / 200px距离顶部的距离y
background-sizepx 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-familyfont-family: arial,"Times New Roman",sans-serif;设置字体时,首选字体>候选字体>字符类
font-stylenormal正常
initial / oblique斜体
font-weightnormal正常
bold加粗
font-sizepx(13px)像素
pt(13pt)点数
em(2em–当前字体的两倍,同是em会继承父级元素的字体大小)字体尺寸

4 - 文本

属性含义
text-indent34px文本缩进
text-alignleft/right/center对其方式
text-decorationunderline下划线
line-through删除线
overline上划线
letter-spacing10px字符之间的距离
text-transformcapitalize首字母大写
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));

    注意:当扩散距离未充满整个区域时,剩下的区域会由结束色填充

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值