『JacaWeb前端』二、CSS基础

二、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 加滚动条（无论内容是否超出）

posted @ 2021-07-02 22:59  CarryBircks  阅读(86)  评论(0)    收藏  举报