css样式复习（一）

安慕欣

已于 2022-02-25 10:49:54 修改

阅读量373

点赞数

文章标签： html 前端

于 2022-02-25 09:57:58 首次发布

本文链接：https://blog.csdn.net/YtAnMu/article/details/123092004

版权

一、常见的行内块元素

img（图片）、input（文本框）、textarea（文本域）。

二、html的基本骨架

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
</html>

三、设置css样式

1、行内样式

<div style="color:red;"></div>

2、外部引用

<link rel="stylesheet" type="text/css" href="css文件地址"/>

3、设置类名，id等XX选择器

<div class="box1"></div>
<div id="box2"></div>

四、<a>标签（超链接标签）

1、none取消a标签默认下划线
overline设置上划线
line-through设置删除线
underline设置下划线

<a href="" style="text-decoration: none;">我是a标签</a>
<div style="text-decoration: line-through;">
	我是div
</div>

2、a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a:link {
				color: black;
			}/* 未访问链接*/
			a:visited {
				color: green;
			}/* 已访问链接 */
			a:hover {
				color: red;
			}/* 鼠标移动到链接上 */
			a:active {
				color: blue;
			}/* 鼠标点击时 */
		</style>
	</head>
	<body>
		<p><a href="">这是一个链接</a></p>
	</body>
</html>

五、text文本

font-size 字体大小
font-style 斜体
font-family 字体样式
font-weight 粗细

<div style="font-weight: bold;">
	我是div
</div>

六、列表

none 取消列表默认样式
circle 列表的空心圆
square 列表的正方形
upper-roman 列表罗马数字
lower-alpha 列表字母
decimal 数字

<ul style="list-style: none;">
	<li>第一个</li>
</ul>
<ul style="list-style: upper-roman;">
	<li>第二个</li>
</ul>
<ul style="list-style: square;">
	<li>第三个</li>
</ul>

七、table表格

1、border边框
cellspacing 合并外边框
cellpadding合并内容到边框的距离
2、<tr>行
<th>标题，列，会加粗
<td>列
3、合并单元格：rowspan合并行、colspan合并列

<table style="text-align: center;" border="1" cellspacing="0" cellpadding="0">
	<tr>
		<th colspan="2">姓名、年龄</th>
		<th>性别</th>
		<th>爱好</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>19</td>
		<td>男</td>
		<td rowspan="2">唱歌</td>
	</tr>
	<tr>
		<td>小花</td>
		<td>18</td>
		<td>女</td>
	</tr>
</table>

八、首行缩进

text-indent: **px;

<div style="text-indent: 30px;">
	很高兴可以认识你，和你一起探讨交流编程
</div>

九、字母大小写转换

text-transform:uppercase转大写
lowercase转小写
capitalize首字母都转换成大写

<div style="text-transform: capitalize;">
	Hello Word Jack
    hello word jack
</div>

十、backgrounds（背景）

1、background-color背景颜色
background-image:url(图片地址)背景图片
background-repeat:no-repeat背景图片是否平铺
background-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动。
background-position背景的位置

2、还有简写模式:background:#ffffff url('img_tree.png') no-repeat right top简写形式
颜色图片路径是否平铺背景位置

3、注：设置背景要么单独设置，要么简写形式设置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				background-color: aqua;/* 设置背景颜色 */
				background-image: url();/* 在此处插入一张图片 */
				background-repeat: no-repeat;/* 图片不平铺或只有一张不重复 */
				background-attachment: fixed;/* 背景图像是否固定或者随着页面的其余部分滚动 */
				background-position: bottom;/* 设置位置 */
			}
		</style>
	</head>
	<body>
		<div class="box">
			用来试验背景的div
		</div>
	</body>
</html>