css样式复习（一）

2022-02-25 10:04:22 阅读：149 来源： 互联网

标签：设置 repeat 复习样式列表 color background 链接 css

一、常见的行内块元素

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>

标签：设置,repeat,复习,样式,列表,color,background,链接,css
来源： https://blog.csdn.net/YtAnMu/article/details/123092004

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9