CSS样式测试

最新推荐文章于 2022-09-06 10:20:07 发布

不蛋定

最新推荐文章于 2022-09-06 10:20:07 发布

阅读量1.6k

点赞数 1

分类专栏：前端文章标签： CSS 举例说明内容全面简单易懂

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.CSS概述

CSS：指层叠样式表（Cascading Style Sheets）

作用：可以为网页创建样式表，渲染网页。写成样式文件是为了代码的复用。

构成：选择器，以及一条或多条声明。

2.选择器

2.1元素选择器

元素选择器是最常见的元素选择器。又被称为类型选择器。类型选择器会匹配文档中该元素类型的所有实例。

div {
    text-align: center;
}

td {
    padding: 3px 5px;
    background: #FA6703;
    color: white;
}

2.2类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。可以单独使用，也可以结合其他元素使用。

.h1Style {
	color: black;
}

<h1 class="h1Style">这是一个实验</h1>

2.3ID选择器

id选择器允许以一种独立于文档元素的方式来指定样式

#pStyle {
	color: red;
}

<p id="#pStyle">这是一个实验</p>

2.4属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

a[href] {
	color: blue;
}

<a href="">这是一个实验</a>

2.5后代选择器

可以选择作为某元素后代的元素

h1 h2 {
	color: red;
}

<h1>这是一个实验
    <h2>这是一个实验</h2>
</h1>

2.6子元素选择器

与后代选择器相比，子元素选择器只能选择某元素的子元素（不作用于选择孙子那一辈）

h1 > p {
	color: red;
}

<h1>这是一个实验
    <h2>这是一个实验
    <p>这是一个实验</p><!-->生效<-->
	<h3>这是一个实验</h3>
	<p>这是一个实验</p><!-->无效<-->
    </h2>
</h1>

2.7伪类选择器

用于向某些选择器添加特殊的效果。

a:link {
	color: #FFFFFF
}/*未访问链接*/


a:visited {
	color: #FFFF00
}/*已访问链接*/

a:hover {
	color: #000000
}/*鼠标移动到链接*/

a:hover {
	color: #888888
}/*选定的链接*/

3.CSS样式

3.1背景

3.1.1背景色

<p style="background-color: blue">This is a text</p><!--蓝色-->
<p style="background-color: red">This is a text</p><!--红色-->

3.1.2背景图像

<div style="width: 300px; height: 300px; background-image: url(./resouse/pic/timg.jpg);"></div><!--背景图片-->

3.1.3背景重复

<div style="width: 300px; height: 3000px; background-image: url(./resouse/pic/timg.jpg); background-repeat: repeat-y;"></div><!--背景重复-->

3.1.4背景定位

<div style="width: 300px; height: 300px; background-image: url(./resouse/pic/timg1.jpg); background-repeat: no-repeat; background-position: center;"></div><!--背景定位-->

3.1.5背景关联

<body style="width: 300px; height: 300px; 
        background-image: url(./resouse/pic/timg1.jpg); 
        background-repeat: no-repeat; 
        background-attachment: fixed;"><!--背景关联 图片不随屏幕滚动-->
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
		<p>这是一个测试</p>
	</body>

3.2CSS文本

3.2.1缩进文本

p#inner {
        text-indent: 10%;
}
<p style="text-indent: 5em;">This is a test</p><!--首行缩进-->
<p style="text-indent: -5em; padding-left: 5em;">This is a test</p><!--使用负值-->
<p style="text-indent: 20%">This is a test</p><!--百分百值-->
<p id="inner">This is a test</p><!--继承-->

3.2.2水平对齐

<p style="text-align: center;">This is a test</p><!--居中-->
<p style="text-align: left;">This is a test</p><!--左对齐-->
<p style="text-align: right;">This is a test</p><!--右对齐-->

3.2.3字间隔

<p style="word-spacing: 30px">This is a test</p><!--字间隔-->
<p style="word-spacing: -0.5em">This is a test</p><!--字间隔-->

3.2.4字母间隔

<p style="letter-spacing: -0.5em;">This is a test</p><!--字母间隔-->
<p style="letter-spacing: 20px;">This is a test</p><!--字母间隔-->

3.2.5字符转换

<p style="text-transform: none;">This is a test</p><!--不变-->
<p style="text-transform: uppercase;">This is a test</p><!--全大写-->
<p style="text-transform: lowercase;">This is a test</p><!--全小写-->
<p style="text-transform: capitalize;">This is a test</p><!--首字母大写-->

3.2.6文本装饰

<p style="text-decoration: none;">This is a test</p><!--不变-->
<p style="text-decoration: underline;">This is a test</p><!--下划线-->
<p style="text-decoration: overline;">This is a test</p><!--上划线-->
<p style="text-decoration: line-through;">This is a test</p><!--删除线-->
<p style="text-decoration: blink;">This is a test</p><!--闪烁-->

3.2.7处理空白符

<p style="white-space: pre-line;">Th  is   is   a   
		test</p><!--空白符：合并； 换行符：保留； 自动换行：允许-->
<p style="white-space: normal;">Th  is   is   a   
		test</p><!--空白符：合并； 换行符：忽略； 自动换行：允许-->
<p style="white-space: nowrap;">Th  is   is   a   
		test</p><!--空白符：合并； 换行符：忽略； 自动换行：不允许-->
<p style="white-space: pre;">Th  is   is   a   
		test</p><!--空白符：保留； 换行符：保留； 自动换行：不允许-->
<p style="white-space: pre-wrap;">Th  is   is   a   
		test</p><!--空白符：保留； 换行符：保留； 自动换行：允许-->

3.2.8文本方向

<p style="direction: ltr;">This is a test</p><!--从左向右-->
<p style="direction: rtl;">This is a test</p><!--从右向左-->

3.3CSS字体

3.3.1字体

<p style="font-family: serif;">This is a test</p><!--serif字体-->
<p style="font-family: sans-serif;">This is a test</p><!--sans-serif字体-->
<p style="font-family: monospace;">This is a test</p><!--monospace字体-->
<p style="font-family: cursive;">This is a test</p><!--cursive字体-->
<p style="font-family: fantasy;">This is a test</p><!--fantasy字体-->

3.3.2字体大小

<p style="font-size: 60px;">This is a test</p><!--像素-->
<p style="font-size: 3.75em;">This is a test</p><!--60px / 16 = 3，75em-->
<p style="font-size: 300%;">This is a test</p><!--百分比-->

3.3.3字体加粗

<p style="font-weight: normal;">This is a test</p><!--不变-->
<p style="font-weight: bold;">This is a test</p><!--加粗-->
<p style="font-weight: 900;">This is a test</p><!--100~900-->

3.3.4字体变形

<p style="font-variant: small-caps;">This is a test</p><!--小型大写字母-->

3.3.5字体风格

<p style="font-style: normal;">This is a test</p><!--正常-->
<p style="font-style: italic;">This is a test</p><!--斜体-->
<p style="font-style: oblique;">This is a test</p><!--倾斜-->

3.4CSS链接

a:link {
	color: #FF0000;
}/*未被访问的链接*/

a:visited {
	color: #00FF00;
}/*已被访问的链接*/

a:hover {
	color: #FF00FF;
}/*鼠标指针移动到链接*/

a:action {
	color: #0000FF;
}/*正在被点击的链接*/

3.5CSS列表

<ul>
	<li style="list-style-type: square;">This is a test</li><!--方块-->
	<li style="list-style-type: circle;">This is a test</li><!--圆圈-->
</ul>

3.6CSS表格

3.6.1表格边框

table {
	border: 2px solid blue;
}

th, td {
	border: 1px solid red;
}
<table>
	<tr>
		<th>表头</th>
		<th>表头</th>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>
	<tr>
		<td>内容</td>
		<td>内容</td>
	</tr>
</table>

3.6.2折叠边框

table{
  	border-collapse:collapse;
}

table, th, td{
  	border: 1px solid black;
}

3.6.3表格宽度和高度

table,td,th{
  	border:1px solid black;
}
table{
  	width:100%;
}

th{
  	height:50px;
}

3.6.4表格文本对齐

table,td,th {
    border:1px solid black;
}
<table>
	<tr>
		<th style="text-align: right;">这是表头</th><!--右对齐-->
		<th style="text-align: left;">这是表头</th><!--左对齐-->
	</tr>
	<tr>
		<td style="text-align: right;">内容</td><!--右对齐-->
		<td style="text-align: left;">内容</td><!--左对齐-->
	</tr>
	<tr>
		<td style="text-align: right;">内容</td><!--右对齐-->
		<td style="text-align: left;">内容</td><!--左对齐-->
	</tr>
	<tr>
		<td style="text-align: center;">内容</td><!--居中-->
		<td style="text-align: center;">内容</td><!--居中-->
	</tr>
</table>

3.6.5表格内边距

td {
	padding: 15px;
}

3.6.6表格颜色

td {
	background-color: green;
	color: red;
}

3.7CSS轮廓

<p style="outline-color: green;">This is a test</p><!--边框颜色-->
<p style="outline-style: dotted;">This is a test</p><!--边框样式-->
<p style="outline-width: 5px;">This is a test</p><!--边框宽度-->
<p style="outline-color: green; outline-style: dotted;outline-width: 5px;">This is a test</p><!--边框轮廓-->

4.CSS框模型

4.1框模型概述

CSS框模型（Box Model）规定了元素框处理元素内容，内边距，边框和外边距的方式

4.2内边距

元素的内边距在边框和内容之间。

p {
	padding-top: 10px;/*上内边距 像素值*/
	padding-right: 0.25em;/*右内边距 em值*/
	padding-bottom: 2ex;/*下内边距 ex值*/
	padding-left: 20%;/*左内边距 百分比值*/
}
<p style="background-color: blue">This is a test</p>

4.2边框

元素的边框（border）是围绕元素内容和内边距的一条或多条线。

p {
        border-top-style: solid;/*上边框： 实线*/
	border-right-style: dotted;/*右边框： 点线*/
	border-bottom-style: dashed;/*下边框： 短线*/
	border-left-style: double;/*左边框： 双线*/

	border-top-width: 15px;/*上边框： 15px*/
 	border-right-width: 5px;/*右边框： 5px*/
  	border-bottom-width: 15px;/*左边框： 15px*/
  	border-left-width: 5px;/*左边框： 5px*/

  	border-top-color: red;/*上边框： 红色*/
 	border-right-color: blue;/*右边框： 蓝色*/
  	border-bottom-color: black;/*左边框： 黑色*/
  	border-left-color: yellow;/*左边框： 黄色*/
}

<p>	This is a test<br>
        This is a test<br>
	This is a test<br>
	This is a test<br>
</p>

4.3外边距

外边距是围绕在元素边框的空白区域。外边距会与外边距合并。

p {
	margin-top: 20px;
	margin-right: 0.5em;
	margin-left: 0.5ex;
	margin-bottom: 20%;
}

<p style="background-color: blue">
        This is a test<br>
	This is a test<br>
	This is a test<br>
	This is a test<br>
</p>

5.CSS定位

允许对元素进行定位。通过position属性，可以选择4种不同类型的定位。

5.1正常定位

position属性使用static值时，元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

p {
	position: static;
}
<p style="background-color: gray">This is a test</p>

5.2相对定位

相对定位的元素相对于他的起点进行移动。

p {
	position: relative;
	left: 50px;
	top: 50px;
}
<p style="background-color: gray">This is a test</p>

5.3绝对定位

绝对定位的元素不占用文档流空间。

p.absolute {
	position: absolute;
	left: 50px;
	top: 50px;
}
<p style=" background-color: gray" class="absolute">This is a test</p>
<p>This is a test</p>

5.4浮动

div {
	float: right;
}
<p>
	<div style="background-color: red; border-radius: 1em;
	width: 500px; height: 500px;"></div>
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
	This is a test.This is a test.This is a test.
</p>