CSS

最新推荐文章于 2024-05-03 21:35:17 发布

原创最新推荐文章于 2024-05-03 21:35:17 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

2 篇文章

订阅专栏

HTML缺陷：

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

CSS （Cascading Style Sheet）层叠样式表

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

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

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>

在这里插入图片描述

cursor的hand值在低版本不适用，改为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-image	url()
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