CSS

HTML缺陷:

  1. 不能适应多种设备
  2. 要求浏览器足够智能
  3. 数据和显示没有分开
  4. 功能不够强大

CSS (Cascading Style Sheet)层叠样式表

作用:给HTML页面标签添加各种样式
优点

  1. 数据和显示分开
  2. 降低网络流量
  3. 视觉效果好
  4. 提高开发效率

1、CSS基础

CSS语法

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS语法</title>
	<style type="text/css">
		p{
			font-weight: bold;
			font-style: italic;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="CSS样式1.css">
</head>
<body>
	<pre style="font-size: 16px">
	CSS与HTML结合有多种方式
		1、行级样式表:采用style属性
		2、内部样式表:采用&lt;style&gt;标签
		3、外部样式表:引用外部CSS文件,需要用标签&lt;link&gt;引入
</pre>
	<p style="color: red">1、采用style属性添加CSS样式的p标签</p>

	添加&lt;style&gt;样式,在里面对各个标签进行设置,例如,对&lt;p&gt;标签设置<br>
	注意:不要随机加空格,没加一个属性要分号结束
	
	<p>2、通过style标签添加CSS样式的p标签,每个该文件中的p标签都有该属性</p>
	<p>3、通过外部CSS文件设置p标签,使每个p标签都有了这个属性</p>

</body>
</html>

在这里插入图片描述

CSS选择器

1)基本选择器
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS选择器</title>
	<style type="text/css">
		div{
			color: red;
		}
		.b{
			border: 1px dashed red;
		}
		#c{
			border: 2px dashed green;
		}
		*{
			padding: 2px;
			margin: 3px;
		}
	</style>
</head>
<body>
<pre style="font-size: 16px">
CSS选择器:
1、基本选择器:
	a.标签选择器
		定义:在&lt;style&gt;标签中定义:&lt;某标签&gt;{}
		只有这某一类标签使用
	b.类选择器
		定义:用.xxx定义
		可以多类标签使用
		在标签中用class属性选择
	c.ID选择器
		定义:用#定义
		针对特定一个标签使用
		在标签中用id属性选择
	d.通用选择器
		定义:用*定义
</pre>
	<div>1a、标签选择器,字体红色,通用选择器效果也有</div>
	<p class="b">1b、类选择器,p标签通过class属性使用</p>
	<p>没有设置class属性的p标签还有样式效果吗?</p>
	<h4 class="b">h4标签也通过类选择器使用</h4>

	<p id="c">1c、ID选择器,通过id使用</p>
	<p>没有设置id属性的p标签还有样式效果吗?</p>
	<h3 id="c">h3可以通过ID选择器再次使用吗?</h3>
	id是在取值情况下使用的,需要唯一,所以在取值时,h3的值取不到<br>
	虽然他可以显示CSS样式~但该做法不对。
</body>
</html>

在这里插入图片描述

2)扩展选择器
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS扩展选择器</title>
	<style type="text/css">
		div,p,h3{
			color: green;
		}
		b i span{
			border: 1px solid red;
		}
		a:link{
			color: blue ;
		}
		a:visited{
			color: red;
		}
		input:onfocus{
			border: 1px solid red;
			color: yellow;
			background-color: #ffcc11;
		}
		p:active{
			color: blue;
		}
		label:hover{
			cursor: hand;
		}
	</style>
</head>
<body>
<pre style="font-size: 16px">
2、扩展选择器
	a.组合选择器:用逗号隔开选择器的名称,大括号内的属性一样
	b.关联/后代选择器:用空格隔开,中间的添加属性?
	c.伪类选择器
		i.静态伪类:只能用于超链接。:link,:visited
		ii.动态伪类:适用于各种标签
			:onfocus 控件获得焦点
			:active  点击控件时
			:hover   单鼠标移动到某个控件上时
	补充几个控件/属性:
		输入框&lt;input&gt;
		鼠标cursor,值:hand
		label
</pre>
	<div>组合选择器1:div</div>
	<p>组合选择器2:p</p>
	<h3>组合选择器3:h3</h3>
	<b>关联1<i>关联2<span>关联3</span>关联22</i>关联11</b><br>
	<a href="">静态伪类选择器,点击前后</a><br>
	<input type="text" name="动态伪类"><br>
	<label>动态伪类hover,鼠标样式改变</label>
</body>
</html>

在这里插入图片描述

  • cursorhand值在低版本不适用,改为pointer
  • border的线属性值:实线solid、点划线dotted、双划线double

CSS样式冲突解决

样式可以从行级style属性、内部style标签代码、外部CSS文件应用;
而内部和外部的选择器又可以从标签选择器、类选择器、ID选择器进行选择;
所以CSS样式的优先级可以分为如下:

  • 行级 > 内部 > 外部
  • 内部/外部ID选择器 > 内部/外部类选择器 > 内部/外部标签选择器 (即这个不分内部外部)
  • 总的原则,定义的就近原则

2、CSS属性

参考CSS手册

link的rel属性

  • stylesheet 默认定义样式表
  • alternate stylesheet 候选样式表

CSS单位

HTML只有一个单位:像素PX
CSS单位:

  • 绝对单位 1in=2.54cm=25.4mm=72pt=6pc
  • 相对单位 px ,%

字体属性

name意义&值
font-size大小
font-family样式:华文彩云,幼圆,宋体
font-weight加粗 bolder
font-style斜体 italic
font-variant小写变大写 small-caps

文本属性

name意义&值
color颜色
text-align文本布局:居中center
text-decoration下划线underline,删除线line-through
text-transform字母大小写uppercase,lowcase,capitalize
letter-spacing每个字间隔大小
word-spacing单词间隔大小

背景属性

name意义&值
background-imageurl()
background-repeat不重复no-repeat,横向平铺repeat-x,纵向平铺repeat-y
background-position背景位置:right,left,center,center center等
background-attachment背景滚动方式:fixed,scroll
background-color背景颜色

列表属性

name意义&值
list-style列表前样式:none,是简写属性序列
list-style-image列表前图片:url()
margin-left距离左边的间距
list-style-type列表前面序列标记

盒子模型

  • 明白margin、border、padding、content、width、height指示意义。
  • 可以在浏览器的开发者模式上查看盒子模型,快捷键F12
    在这里插入图片描述
    在这里插入图片描述

位置属性

在style中添加position属性,值有两种:absolute、relative,并需要设置left与top的间距大小;

  • 绝对定位absolute:绝对位置,其原点是父容器的左上角
  • 相对定位relative:相对位置,其原点是自身容器原本的左上角位置
 <style type="text/css">
  p{
   position: absolute;
   left: 50px;
   top: 50px;
   font-weight: bold;
   font-style: italic;
  }
 </style>

会脱离顺序流的两种情况:

  • 位置设置为绝对属性absolute
  • 设置了float属性

float、overflow、z-index属性

  • float:none | left | right               设置浮动

  • clear:none | left | right | both   不允许有浮动

  • overflow:盒子的内容超出范围时的相关处理
                 :auto | visible | hidden

  • z-index:解决重复内容覆盖层级的问题,数值最大的为顶层、最小的为底层
                即垂直于界面的Z轴方向上的显示层级,所以取名为z-index

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值