css知识点

最新推荐文章于 2024-09-10 14:15:01 发布

前端的初学者

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量478

点赞数 2

文章标签： html webview linq

本文链接：https://blog.csdn.net/M815241/article/details/123129663

版权

本文详细介绍了CSS中的各种概念和技术，包括html基础框架、背景、元素类型、字体样式、链接样式、文本修饰、列表样式、边框、轮廓、外边距、隐藏方式以及定位方法，帮助读者深入理解CSS并提升布局能力。

摘要由CSDN通过智能技术生成

一，html基础框架

<!DOCTYPE html>版本号
<html>
	<head>头部
		<meta charset="utf-8">字符集编码方式（国际通用）
		<title></title>文档标题
	</head>
	<body>主体
	</body>
</html>

二，background;背景

background-color背景颜色
		 background-image:url(图片地址)背景图片
		 background-repeat:no-repeat背景图片是否平铺
		 background-attachment:fixed背景图像是否固定或者随着页面的其余部分滚动。
		 background-position背景的位置 
		 background:#ffffff url('img_tree.png') no-repeat right top简写形式
					颜色		图片路径				是否平铺		背景位置-->
		<!-- 注：设置背景要么单独设置，要么简写形式设置

三，块，行，行内块元素

块：div,p,h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer

行内：span、a、lable、abbr(缩写)、em(强调)、big、cite(引用)、i(斜体)、q(短引用)、select、small、sub、e,、b

行内块：img、input、textarea

四，字体

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

例；

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

font-weight

font-style;

五链接

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

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

文本修饰

text-decoration 属性主要用于删除链接中的下划线：


a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

六，列表

基本语法格式

<table>

<tr>

</tr>

</table>

<tr>:表格中的一行。<td>:表格中的单元格

表格属性：

border:设置表格的边框 width:设置表格宽度 heighe:设置表格的高度 align:设置表格在网页中的水平对齐方式 cellspacing:单元格和单元格之间的距离 cellpadding:单元格内容距离单元边框的距离

三参为零：border=”0”,ceiispacing=”0”,cellpadding=”0”

表头位于表格的第一行或第一列其文本加粗居中即<th></th>代替相应的单元格标签<td></td>

表格标题：caption

定义：<table>

</table>

<tr>标签只包含<td>和<caption>标签

<caption>标签必须紧随table标签之后

合并单元格；

跨行合并：rowspan 跨列合并：colspan

公式；删除的个数=合并的个数-1

顺序先上后下先左后右

七，边框；border 轮廓；outline

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度；margin

        border-color 修改边框颜色
       border-top-color
       border-right-color
       border-bottom-color
       border-left-color
       border-width修改边框宽度
       border-style修改边框线条样式
       ·none:没有边框,即忽略所有边框的宽度(默认值)
       ·solid:边框为单实线
       ·dashed:边框为虚线
       ·dotted:边框为点线
       ·double:边框为双实线
       border-top修改边框某一边
例

<div style="width: 100px;height: 100px;
        border: 5px solid red;
        border-top: 10px dashed orange">
   </div>

轮廓；


		<div style="width: 100px;height: 100px;
		border: 5px solid red;
		outline:10px dashed #000">
		</div>

margin

margin:上右下左;
margin:上右左下;
margin:上下右左;

八，Css中隐藏的三种方式
       display: none;隐藏，不占位置
       visibility: hidden;隐藏，占位置
       opacity: 0;透明度,0为隐藏，1显示

九，定位
       static默认值
       relative相对定位，脱离文档流
       fixed固定定位
       absolute绝对定位,如果父级没有相对定位，
       那么他的父级就是浏览器，脱离文档流,
       如果父级没有相对或绝对定位会一直往上一级找，直到浏览器
       找到父级有相对或绝对定位，根据父级定位
       sticky粘性定位

<div style="position: relative;">
			<div style="width: 100px;height: 100px;
			border: 1px solid red;
			margin: 100px;
			top: 50px;left: 100px;
			position: relative;">
				1
				<div style="width: 30px;height: 30px;
				border: 1px solid red;
				position: absolute;
				top: 0;
				left: 0;">
					2
				</div>
			</div>
		</div>

固定定位；

<div style="width: 50px;height: 50px;
		border: 1px solid orange;
		border-radius: 50%;
		position: fixed;
		right: 0;
		bottom: 50px;
		text-align: center;
		line-height: 50px;
		font-size: 30px;
		font-weight: 700;">↑</div>